Значок Apple Touch явно задаёт изображение, которое используется при добавлении сайта на главный экран iPhone. Это отдельный ресурс: он отличается от фавикона вкладки и значков, объявленных в манифесте веб-приложения.
Всего один размер: 180×180
180×180 пикселей обычно используется как исходник высокого разрешения. iOS может уменьшать его для небольших областей отображения, поэтому большинству проектов достаточно одного объявления.
Старые рекомендации перечисляли восемь файлов, от 57×57 до 152×152, каждый со своим атрибутом sizes. Теперь эти варианты не нужны: они увеличивают HTML и вызывают лишние запросы с одинаковым результатом.
Файл должен быть PNG. Для этого значка iOS не читает ни SVG, ни WebP, а JPEG портит чёткие края плоской графики.
Выбирайте непрозрачный фон
Прозрачный фон может давать неожиданный результат в зависимости от версии и места отображения. Чтобы контролировать внешний вид на главном экране, используйте рисунок на выбранном непрозрачном фоне.
Перед экспортом объедините значок с непрозрачным фоном. Выберите фирменный цвет или белый фон, если сам символ разноцветный. Оставьте вокруг рисунка примерно 10% отступа, чтобы он не выглядел зажатым.
При этом не скругляйте углы самостоятельно: iOS накладывает свою скруглённую маску. Если файл уже скруглён, получится двойной радиус с некрасивыми углами.
Тег для вставки
Достаточно одной строки в head страниц: link rel="apple-touch-icon" href="/apple-touch-icon.png". Если файл один, атрибут sizes необязателен.
При желании добавьте meta name="apple-mobile-web-app-title" content="Your brand", чтобы задать подпись под значком. Без этого тега iOS берёт заголовок страницы, который обычно слишком длинный и обрезается.
Также поместите копию файла в корень под именем apple-touch-icon.png: как и в случае favicon.ico, iOS ищет его по этому адресу, если тег не найден.
Почему значок не обновляется
iOS активно кэширует значок, а уже добавленный на главный экран ярлык сам не меняется. Для проверки новой версии удалите ярлык, очистите данные Safari и добавьте сайт заново.
Если значок всё ещё не появился, проверьте три вещи: файл возвращает 200, а не 404; сервер отдаёт его с типом image/png; доступ не закрыт правилом robots.txt или авторизацией.
Инструмент проверки LFFavicon проверяет именно эти случаи для любого общедоступного URL и показывает значок, который действительно получил.
Первоисточники
Частые вопросы
Нужно несколько размеров apple-touch-icon?
Для большинства проектов одного файла высокого разрешения 180×180 достаточно, чтобы iOS создала уменьшенные версии. Проверьте устройства, которые входят в список поддерживаемых вашим проектом.
Использует ли Android apple-touch-icon?
Chrome на Android может использовать его как запасной вариант, но сначала читает значки веб-манифеста. Всегда объявляйте значки 192×192 и 512×512 в манифесте: это основной предусмотренный способ.
Можно использовать SVG как значок Apple Touch?
Нет, для этого тега iOS ожидает растровый PNG. Оставьте SVG для фавикона браузера на компьютере: там он обеспечивает чёткость и поддержку тёмной темы.