Apple touch icon: размер, тег и поведение iOS
Apple touch icon — это изображение, которое iOS использует, когда кто-то добавляет ваш сайт на домашний экран из Safari. Вы отдаёте его как один PNG 180x180 по пути /apple-touch-icon.png и указываете на него тегом <link> с rel="apple-touch-icon". iOS игнорирует прозрачность в этом изображении и накладывает его на чёрный фон, поэтому дайте ему непрозрачный фон и позвольте iOS самой применить скруглённые углы, а не запекайте их.
Что iOS с ней делает
Когда пользователь нажимает «Поделиться», а затем «На экран Домой» в Safari, iOS нужна иконка для лаунчера. Она ищет тег <link> с rel="apple-touch-icon", а если его нет, запрашивает /apple-touch-icon.png и /apple-touch-icon-precomposed.png напрямую из корня сайта. Если она ничего не находит, то откатывается к скриншоту страницы, который никогда не выглядит намеренным.
Изображение, которое вы предоставляете, квадратное и во весь кадр. iOS сама накладывает маску со скруглёнными углами при отрисовке иконки, так что исходное изображение с уже скруглёнными углами получится скруглённым дважды, с видимыми артефактами по краям.
Тег
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Один тег и один файл — это вся современная настройка. Отдавайте тот же файл по /apple-touch-icon.png, чтобы разрешался и запасной путь без тега.
Что отдавать
| Параметр | Значение |
|---|---|
| Размеры | 180x180 пикселей |
| Формат | PNG, альфа не нужна |
| Путь | /apple-touch-icon.png |
| Фон | Непрозрачный: прозрачность накладывается на чёрный |
| Углы | Квадратный исходник; iOS сама маскирует углы |
| Безопасный отступ | Держите знак вдали от внешних нескольких процентов, чтобы маска его не обрезала |
Частые вопросы об apple touch icon
Нужны ли все девять устаревших размеров apple-touch-icon?
Нет. Современная iOS использует 180x180 и уменьшает его для меньших контекстов. Варианты 57, 60, 72, 76, 114, 120, 144 и 152 важны только для очень старых iPhone и iPad.
Что такое apple-touch-icon-precomposed?
Устаревший отказ. Старая iOS добавляла глянцевый блик на иконки домашнего экрана, а вариант precomposed говорил этого не делать. iOS перестала добавлять глянец много лет назад, так что достаточно обычного rel="apple-touch-icon".
Использует ли Android apple-touch-icon?
Chrome на Android использует его как запасной вариант, если у сайта нет иконок в веб-манифесте приложения, но полагаться на это не стоит. Объявите PNG 192x192 и 512x512 в манифесте для Android, а apple-touch-icon оставьте для iOS.