Фавикон
Также: favicon, иконка сайта, значок вкладки
Маленькая иконка сайта, которая показывается на вкладке браузера, в закладках и в истории. Обычно это логотип или первая буква названия на контрастном фоне.
Каким он должен быть
- Разборчивым в размере 16×16 пикселей: мелкие детали и длинные надписи там превращаются в кашу.
- Контрастным к светлому и тёмному фону — темы браузеров разные.
- Постоянным: пользователи находят вкладку по иконке, и её смена сбивает привычку.
Технически современным браузерам достаточно файла favicon.ico или PNG в корне сайта. Отдельно указывают иконку для мобильных: её берут, когда сайт добавляют на домашний экран.
| Размер | Где используется |
|---|---|
| 32×32 | вкладка браузера, закладки |
| 180×180 | значок при добавлении сайта на экран телефона |
| 512×512 | манифест, крупные плитки |
Частые ошибки
- Логотип целиком с мелким текстом: в 16 пикселях он превращается в пятно.
- Белая иконка на прозрачном фоне — она пропадает в светлой теме браузера.
- Фотография вместо знака: детали не читаются.
- Смена иконки без нужды: пользователи находят вкладку именно по ней.
Как сделать за пять минут
- Возьмите знак из логотипа или первую букву названия.
- Поставьте её на контрастный фон — так иконка будет видна и в светлой, и в тёмной теме браузера.
- Сохраните квадратом в 512 пикселей и уменьшите до нужных размеров: уменьшение даёт чистый край, рисование сразу мелким — нет.
- Положите файлы в корень сайта и подключите в разделе <head>.
- Проверьте в новом окне браузера: старая иконка живёт в кэше долго.
Собрать иконку из буквы или своей картинки можно нашим бесплатным генератором — он сразу отдаёт все три нужных размера.
Частые вопросы
Обязателен ли фавикон?
Сайт без него работает, но выглядит незаконченным: браузер показывает пустой лист вместо иконки, а на панели закладок такую вкладку труднее найти.
Что рисовать, если нет логотипа?
Первую букву названия на контрастном фоне. Это разборчиво в мелком размере и работает лучше, чем уменьшенная фотография.
Нужен ли отдельный файл .ico?
Современным браузерам достаточно PNG. Формат .ico нужен только для очень старых версий, и на практике им можно пренебречь.