apple-touch-icon: полное руководство
Когда кто-то добавляет ваш сайт на домашний экран iPhone, iOS обращается к одному тегу. Ошибитесь, и он вместо этого захватит размытый скриншот вашей страницы.
Что такое apple-touch-icon
apple-touch-icon — это иконка, которую iOS использует, когда пользователь нажимает «Добавить на домашний экран». Она отделена от вашего favicon и отделена от web app manifest. Она существует, потому что iOS хочет полнокачественную иконку в стиле приложения, а не крошечный favicon вкладки, увеличенный до размера.
Одного PNG 180x180 достаточно. Текущий iOS уменьшает этот единственный файл для каждого нужного ему контекста, так что вы не отгружаете старую лестницу размеров 57, 72, 114 и 152.
Тег <link>
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">iOS также ищет /apple-touch-icon.png в корневом каталоге сайта даже без тега, но объявить его надёжнее в разных конфигурациях.
Спецификация вкратце
| Свойство | Значение |
|---|---|
| Размеры | 180x180 |
| Формат | PNG |
| Прозрачность | Игнорируется, накладывается на чёрный |
| Углы | Квадратный исходник, iOS скругляет их за вас |
| Имя файла | apple-touch-icon.png в корневом каталоге сайта |
Частые подводные камни
Полное отсутствие apple-touch-icon — худший случай. Когда iOS не находит его, он откатывается к уменьшенному скриншоту страницы, который получается размытым и вне стиля бренда. Один тег решает это.
Скруглять углы самому — ошибка. iOS применяет собственную маску скруглённого квадрата, так что предварительно скруглённый исходник скругляется дважды и показывает тонкую границу фона вокруг иконки. Дайте ему квадратное изображение во весь кадр.
Обновление не мгновенно. Как только кто-то добавил ваш сайт на домашний экран, изменение иконки на вашем сервере не обновляет существующий ярлык. Человеку нужно удалить его и добавить снова, чтобы получить новую иконку.
Часто задаваемые вопросы
Какого размера apple-touch-icon?
180x180 пикселей, как PNG. Текущий iOS масштабирует этот один файл для каждого контекста, так что вам не нужны более старые размеры 57, 72, 114 или 152.
Почему мой apple-touch-icon показывает чёрный фон?
iOS игнорирует прозрачность в apple-touch-icon и накладывает его на чёрный. Экспортируйте PNG со сплошным цветом фона вместо прозрачного.
Почему iOS показывает размытую иконку для моего сайта?
У вас, вероятно, нет apple-touch-icon. Без него iOS использует уменьшенный скриншот страницы. Добавьте PNG 180x180 и правильный тег <link>.
Почему моя иконка домашнего экрана не обновилась после того, как я её изменил?
Существующие ярлыки домашнего экрана кэшируют иконку, с которой были созданы. Пользователю нужно удалить ярлык и добавить сайт снова, чтобы получить новый apple-touch-icon.