Что такое favicon
Favicon — маленькая иконка сайта, которая отображается во вкладке браузера, в закладках, в истории и в поисковой выдаче на мобильных. Название происходит от «favorite icon»: изначально в Internet Explorer 5 она появлялась только при добавлении в избранное.
Сегодня это часть узнаваемости. При двух десятках открытых вкладок пользователь ориентируется именно по иконкам — заголовки давно не помещаются. Сайт без favicon получает серый прочерк и теряется среди остальных.
Какие размеры нужны
| Файл | Размер | Где используется |
|---|---|---|
| favicon-16x16.png | 16×16 | Вкладка браузера |
| favicon-32x32.png | 32×32 | Панель задач, экраны Retina |
| favicon-48x48.png | 48×48 | Ярлык на рабочем столе Windows |
| apple-touch-icon.png | 180×180 | Домашний экран iPhone и iPad |
| android-chrome-192 | 192×192 | Android, PWA-приложение |
| android-chrome-512 | 512×512 | Экран запуска PWA |
Как сделать иконку читаемой
Главная ошибка — взять логотип целиком и уменьшить до 16 пикселей. На таком размере от него остаётся серое пятно. Favicon требует отдельного упрощённого решения.
- Один элемент. Символ, монограмма или самая узнаваемая часть логотипа — но не всё сразу
- Никакого текста мельче одной-двух букв. Слово из шести букв в 16 пикселях нечитаемо в принципе
- Высокий контраст. Иконка должна оставаться заметной и на светлой, и на тёмной панели браузера
- Простая форма. Тонкие линии и мелкие детали исчезают при уменьшении
- Проверка на 16 пикселях. Если на этом размере непонятно, что изображено — упрощайте дальше
Куда загружать файлы
Все файлы кладутся в корень сайта, рядом с главной страницей. Браузеры автоматически ищут /favicon.ico даже без указания в коде, но для остальных размеров нужны теги <link> в разделе <head>.
Для полноценной поддержки PWA дополнительно понадобится файл site.webmanifest с описанием иконок — тег на него уже включён в сгенерированный код.
Почему иконка не обновляется
Браузеры кешируют favicon особенно агрессивно — иногда неделями. Если после замены файла вы видите старую иконку, это почти всегда кеш, а не ошибка.
- Откройте адрес иконки напрямую и обновите страницу с очисткой кеша:
Ctrl+Shift+R - Добавьте к пути версию:
/favicon-32x32.png?v=2 - Проверьте в режиме инкогнито — там кеш чистый
- Для поисковой выдачи изменения появятся только после переобхода страницы роботом