Как это работает
Изображение или буквы рисуются на canvas во всех размерах, которые запрашивают браузеры и телефоны, и сохраняются как PNG-файлы. Версии 16, 32 и 48 px упаковываются в один favicon.ico. Всё создаётся в вашем браузере, ничего не загружается.
favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest
Зачем нужен каждый файл
- favicon.ico: классическая иконка вкладки браузера. Все браузеры и Windows по-прежнему ищут её в корне сайта.
- apple-touch-icon.png: иконка, которую iPhone и iPad показывают, когда сайт добавляют на главный экран. У неё всегда сплошной фон.
- icon-192.png, icon-512.png: Android и устанавливаемые веб-приложения (PWA) берут их из манифеста.
- site.webmanifest: небольшой JSON-файл с названием сайта, цветами и списком иконок.
Советы
- Положите все файлы в корневую папку сайта рядом с index.html и вставьте код в head каждой страницы.
- При 16 px лучше всего читаются простые, крупные формы; мелкий текст и тонкие линии пропадают.
- Браузеры долго кэшируют фавиконки. Чтобы увидеть изменения, откройте URL иконки напрямую или используйте приватное окно.
- Тег theme-color окрашивает панель браузера на Android в ваш цвет фона.
Стандарты и источники
- HTML Standard — link rel="icon" · WHATWG
- Web Application Manifest · W3C
- Configuring Web Applications (apple-touch-icon) · Apple Developer
Последняя проверка 15 октября 2026 г.
Часто задаваемые вопросы
Какие размеры фавиконки нужны?
favicon.ico с 16, 32 и 48 px, apple-touch-icon 180 px и иконки 192 и 512 px для Android покрывают современные браузеры и телефоны.
Мой логотип загружается?
Нет. Иконки рисуются и упаковываются в вашем браузере.
Можно ли использовать SVG?
Да. Принимаются SVG, PNG, JPG, WebP и GIF; самый чёткий результат даёт квадратное изображение от 512 px.
Почему иконка Apple не прозрачная?
iOS заливает прозрачные области чёрным, поэтому иконка 180 px всегда использует ваш цвет фона.
Новая фавиконка не отображается.
Браузеры долго кэшируют фавиконки. Откройте адрес иконки напрямую, очистите кэш или попробуйте приватное окно.