Apple Руководство по сенсорным значкам

apple-touch-icon — это совершенно отдельный ресурс от вашего favicon.ico. Вкладки браузера используют favicon.ico (или связанный с ним PNG/SVG). При установке iOS на главном экране используется apple-touch-icon. Без apple-touch-icon Safari делает снимок экрана области просмотра вашей страницы с низким разрешением и использует его в качестве значка на главном экране — размытый результат без бренда, который выглядит непрофессионально рядом с собственными приложениями.

Apple представил apple-touch-icon в iOS 1.1.3 еще в 2007 году и с тех пор расширял поддерживаемые размеры по мере увеличения плотности экрана iPhone и iPad. Текущая рекомендация для одного файла для всех устройств — 180×180 пикселей. Этот размер отображается с плотностью 60 пикселей при плотности 3x на iPhone 6 Plus, iPhone X и всех последующих моделях iPhone. Старые модели (iPhone SE 1-го поколения, iPhone до версии Plus) используют размер 120×120 с увеличением 2x — iOS автоматически уменьшает размер файла 180×180 до нужного размера.

Для покрытия iPad Apple рекомендует 167×167 для iPad Pro (3x) и 152×152 для стандартных iPad. На практике один файл размером 180×180, служащий apple-touch-icon, приемлемо покрывает все эти случаи, поскольку iOS уменьшает масштаб с помощью высококачественной билинейной фильтрации. Если безупречная резкость на iPad Pro является приоритетом, добавьте дополнительный тег `<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>`.

Формат PNG является обязательным для apple-touch-icon. iOS игнорирует файлы .ico, JPEG, SVG и GIF для значков на главном экране. Всегда экспортируйте PNG-32 (с альфа-каналом) или PNG-24 (без прозрачности, если у вашего значка сплошной фон). Прозрачность поддерживается и рекомендуется — значок с прозрачным фоном позволяет iOS применять стандартные эффекты закругленных углов и блеска к более старым версиям iOS.

Безопасная маржа имеет значение для apple-touch-icon. Хотя iOS больше не применяет старое глянцевое наложение (удаленное в iOS 7), оно обрезает значок до скругленного прямоугольника. Оставляйте вставки основного логотипа примерно на 10 % со всех сторон, чтобы ничего важного не было зажато закругленными углами. Безопасная область составляет примерно 162×162 пикселей на холсте размером 180×180.

Важно разместить файл apple-touch-icon в корне вашего домена. Хотя вы можете использовать любой URL-адрес через тег ссылки href, некоторые версии iOS Safari и некоторые сканеры Apple (для интеграции поисковой системы Spotlight) будут пытаться получить /apple-touch-icon.png или /apple-touch-icon-precompose.png непосредственно из корня, не считывая тег ссылки HTML. Размещение файла в корне обеспечивает лучшую совместимость.

Вариант тега `precomposed` — `<link rel='apple-touch-icon-precompose'>` – сообщает старым версиям iOS не применять к значку какие-либо дополнительные визуальные эффекты (глянец, закругленные углы, тень). Apple удалил эти эффекты в iOS 7, поэтому в 2026 году различие между «apple-touch-icon» и «apple-touch-icon-precompose» не имеет значения для современного iOS. Используйте простое значение отношения `apple-touch-icon`.

Поддерживаются объявления нескольких размеров с использованием нескольких тегов ссылок. Для максимальной точности на всех устройствах Apple вы можете объявить: `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon-180x180.png'>` для iPhone 6 Plus и новее, `<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>` для iPad Pro и `<link rel='apple-touch-icon' size='152x152' href='/apple-touch-icon-152x152.png'>` для старых iPad. iOS выбирает наиболее близкое совпадение.

Apple Watch не использует apple-touch-icon для значков приложений часов — они поступают из встроенного пакета приложений. Однако если пользователь переходит на ваш веб-сайт из браузера Apple Watch, Safari Watch отображает apple-touch-icon в списке закладок. Здесь работает тот же PNG 180×180 без каких-либо изменений.

macOS Safari на Mac также использует apple-touch-icon при добавлении веб-сайта в Dock в качестве веб-приложения (macOS Sonoma и более поздние версии позволяют закреплять веб-сайты как веб-приложения из Safari). apple-touch-icon используется в качестве значка Dock. Это делает apple-touch-icon важным не только для мобильных устройств, но и для пользователей Mac на современной macOS.

При обновлении apple-touch-icon iOS кэширует старый значок на устройстве пользователя и не проверяет наличие обновлений, пока пользователь не удалит значок на главном экране и не добавит его заново или не очистит кеш Safari. Этот кэш не контролируется на стороне сервера — это поведение iOS на стороне клиента. Сообщение об этом заинтересованным сторонам помогает определить, насколько быстро ребрендинг распространится на существующие сохранения на главном экране.

Для правильного тестирования apple-touch-icon требуется физическое устройство iOS или симулятор Xcode iOS. На устройстве откройте Safari, перейдите на свой сайт, нажмите кнопку «Поделиться» и выберите «Добавить на главный экран». Предварительный просмотр в диалоговом окне должен показать ваш apple-touch-icon. Если вместо этого отображается снимок экрана, либо файл недоступен по заявленному URL-адресу, либо в вашем HTML отсутствует тег ссылки.

favicon generator выводит файл apple-touch-icon.png размером 180×180 как часть стандартного пакета значков. После создания поместите файл в корень вашего сайта и добавьте тег ссылки в HTML `<head>`. Полное руководство по всем размерам значков, которые соответствуют apple-touch-icon, см. в справочнике favicon sizes explained.