Фавикон — это маленькая квадратная иконка сайта, которую браузер показывает во вкладке, в закладках, в истории и в мобильной выдаче Google рядом с заголовком. Технически это изображение от 16×16 до 512×512 пикселей в формате ICO, PNG или SVG, которое лежит в корне сайта и подключается в секции head тегом link rel=icon.
Название пришло от favorite icon: в 1999 году Internet Explorer 5 начал показывать иконку сайта в списке «Избранное». Сегодня это единственный элемент бренда, который виден даже тогда, когда вкладка сжата до двадцати пикселей и от заголовка остались две буквы.
Простыми словами
Представьте полку с двумя десятками одинаковых белых коробок. Фавикон — это наклейка, по которой человек находит свою коробку, не читая подписи. В браузере с двадцатью вкладками текст обрезается до пары букв, и узнаваемой остаётся только иконка. Поэтому главное требование к фавикону — не «красиво», а «узнаётся в размер ногтя»: здесь выигрывает не детализация, а контраст и одна простая форма.
Где пользователь видит фавикон
- Вкладка браузера — основное место. Чем больше вкладок открыто, тем важнее иконка для возврата на ваш сайт.
- Закладки и история — в списках из десятков строк глаз находит иконку быстрее, чем читает заголовок.
- Мобильная выдача Google — поисковик показывает фавикон слева от заголовка результата на смартфонах. Сниппет с чёткой иконкой выглядит солиднее сниппета с пустым кружком, и это влияет на кликабельность.
- Домашний экран смартфона — если сайт добавили «на рабочий стол», иконкой становится apple-touch-icon на iOS или изображение из веб-манифеста на Android.
- Мессенджеры и сервисы — Telegram, Slack, RSS-читалки и закладочные сервисы тянут фавикон для превью ссылки.
Мобильная выдача — самый недооценённый пункт списка. Вы платите за продвижение, выводите страницу в топ-5, а рядом с вашим заголовком стоит серый глобус, тогда как у конкурента — узнаваемый знак.
Какие размеры и форматы нужны
Один файл «на все случаи» не работает: iOS игнорирует ICO, Android берёт иконку из манифеста, а Google требует, чтобы сторона изображения была кратна 48 пикселям. Рабочий набор выглядит так:
| Размер | Формат | Где используется | Обязательно |
|---|---|---|---|
| 16×16 | ICO или PNG | Вкладка браузера, история, закладки | Да |
| 32×32 | ICO или PNG | Вкладка на Retina-экранах, панель задач Windows | Да |
| 48×48 и кратные | PNG или ICO в корне | Мобильная выдача Google | Да |
| 180×180 | PNG, apple-touch-icon | Домашний экран iPhone и iPad | Да |
| 192×192 | PNG в веб-манифесте | Домашний экран Android, PWA | Да |
| 512×512 | PNG в веб-манифесте | Сплеш-экран PWA, установка приложения | Да |
| Векторный | SVG | Современные браузеры, автопереключение под тёмную тему | Желательно |
Минимальный комплект на 2026 год: favicon.ico с размерами 16 и 32 внутри одного файла, apple-touch-icon.png на 180 пикселей, icon-192.png и icon-512.png в манифесте. SVG — бонус, а не замена растру: старые браузеры его не возьмут.
Как сделать фавикон из логотипа
Самая частая ошибка — взять готовый логотип и механически уменьшить его до 32 пикселей. Лок-ап с названием, слоганом и тонкими линиями превращается в серое пятно. Тренды приходят и уходят — мы разбирали их в материале про тренды веб-дизайна 2026 — а требование узнаваемости в 16 пикселях не менялось с 1999 года.
- Возьмите один элемент. Монограмму, первую букву названия или знак из логотипа. Не весь блок с текстом.
- Уберите детали. Тонкие обводки, градиенты и тени на малом размере исчезают или пачкают изображение. Оставляйте сплошные формы и высокий контраст.
- Проверьте в реальном масштабе. Не в макете на 400%, а во вкладке браузера рядом с другими сайтами. Если не узнаёте свой сайт за полсекунды — упрощайте дальше.
- Добавьте фон. Иконка с непрозрачным фоном фирменного цвета ведёт себя предсказуемо и в светлой, и в тёмной теме.
Если логотипа ещё нет, подойдёт буква фирменного цвета на сплошной плашке — это заметно лучше глобуса по умолчанию.
Тёмная и светлая тема браузера
Браузер рисует вкладки на светлом или тёмном фоне в зависимости от темы системы. Чёрная монограмма с прозрачным фоном отлично выглядит в светлой теме и полностью исчезает в тёмной. Рабочих решений два: непрозрачная плашка фирменного цвета, которая держится на любом фоне, или SVG-фавикон с медиазапросом prefers-color-scheme внутри файла — тогда иконка переключает цвет сама. Логика та же, что и при выборе темы для всего сайта: мы разбирали её в статье тёмная или светлая тема сайта.
Как подключить фавикон
Файлы кладут в корень сайта, а ссылки на них — в head каждой страницы. Минимальный набор тегов:
- link rel=icon href=/favicon.ico sizes=any — базовая иконка для всех браузеров;
- link rel=icon type=image/svg+xml href=/icon.svg — векторная версия для современных браузеров;
- link rel=apple-touch-icon href=/apple-touch-icon.png — иконка 180×180 для iOS;
- link rel=manifest href=/site.webmanifest — манифест, в котором перечислены icons 192 и 512 для Android и PWA.
Файл favicon.ico должен лежать именно в корне: браузеры и краулер Google обращаются по адресу /favicon.ico напрямую, даже если тега в коде нет. После замены иконки не спешите с выводами — фавиконы кешируются агрессивно, и старая картинка может висеть неделями. Проверяйте в режиме инкогнито.
Типичные ошибки
- Только 16×16. Иконка размывается на экранах с высокой плотностью пикселей и не проходит в выдачу Google, которой нужен размер, кратный 48.
- Прозрачный фон при тёмном знаке. В тёмной теме браузера иконка исчезает полностью.
- Забытый apple-touch-icon. Когда пользователь добавляет сайт на домашний экран iPhone, iOS подставляет уменьшенный скриншот страницы вместо иконки.
- Уменьшенный логотип целиком. Текст и тонкие элементы сливаются в неразборчивое пятно.
- Иконка недоступна краулеру. Файл на поддомене, закрытый в robots.txt или отдающийся с ошибкой — Google просто не покажет ничего.
- Редизайн без обновления иконки. Сайт уже новый, а в корне лежит фавикон с логотипом пятилетней давности.
Сколько это стоит
Отдельной цены на фавикон у нас нет: он входит в любой пакет разработки — и в лендинг, и в корпоративный сайт, и в интернет-магазин. Дизайнер готовит набор иконок ещё на этапе макета, разработчик подключает файлы и манифест при сборке. Это не отдельная услуга, а часть нормальной сдачи проекта — ровно как и адаптивная вёрстка. Что ещё входит в пакеты, видно на странице цен.
Если сайт уже работает и вопрос только в иконке — это полчаса в рамках поддержки.
Фавикон, мета-теги и другие мелочи, которые делают сайт узнаваемым в выдаче, мы проверяем во время аудита сайта.
