Apple Руководство по сенсорным значкам
Когда кто-то добавляет ваш сайт на главный экран iOS, Safari использует apple-touch-icon, а не favicon.ico. Используйте PNG размером 180×180 (или квадрат большего размера с чистым уменьшением масштаба) и свяжите его с <head>.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Apple не применяет маскирование к современным iOS для веб-клипов, как это делается для собственных приложений, но ваш значок по-прежнему должен быть квадратным с безопасными полями — сохраняйте вставки логотипов примерно на 10 %, чтобы закругленные углы никогда не обрезали изображения.
Используйте <link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png">. Один файл размером 180×180 охватывает все современные iPhone; дополнительные записи 152×152 и 167×167 помогают использовать старые макеты iPad.
Как это работает
- 1
Экспорт 180×180 PNG
С помощью нашего генератора значков или средства изменения размера изображений.
- 2
Загрузить в корень сайта
/apple-touch-icon.png рядом с favicon.ico.
- 3
Добавьте тег ссылки
<link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png"> в <head>.
Попробовать сейчас
Создать apple-touch-icon
Генератор фавиконовЧастые вопросы
Какой размер apple-touch-icon?+
180×180 пикселей для современных iPhone. Экспортируйте из мастера размером 512×512 или 1024×1024.
PNG или ICO вместо iOS?+
Только PNG. iOS игнорирует .ico для значков главного экрана.
Нужен ли мне еще favicon.ico?+
Да, вкладки и другие браузеры по-прежнему используют .ico. Apple-touch-icon является аддитивным.