Фавикон: что это, зачем нужен и как его поставить
Фавикон (favicon, от favorite icon) — маленькая иконка сайта, которая показывается во вкладке браузера, в закладках, в истории и в результатах поиска Яндекса рядом со ссылкой.
Элемент кажется декоративным, но у него две измеримые функции: он помогает найти вашу вкладку среди пятнадцати открытых и делает строку в выдаче заметнее. Ниже — форматы, подключение и типичные проблемы.
Где он виден
- Вкладка браузера — когда вкладок много, от заголовка остаётся только иконка.
- Закладки и история — по иконке сайт находят быстрее, чем по названию.
- Выдача Яндекса — иконка отображается рядом со ссылкой на сайт.
- Иконка на домашнем экране телефона, если сайт сохранили как приложение.
- Мессенджеры и агрегаторы — часть сервисов подтягивает её при показе ссылки.
Форматы и размеры
| Формат | Где применяется | Замечание |
|---|---|---|
| ICO | Классический /favicon.ico | Может содержать несколько размеров в одном файле |
| PNG | Основной современный вариант | Прозрачный фон, чёткие края |
| SVG | Векторная иконка | Масштабируется без потерь, умеет реагировать на тёмную тему |
| Apple touch icon | Экран телефона | Обычно 180×180, без прозрачности |
Разумный минимальный набор: 32×32 и 16×16 для браузера, 180×180 для мобильного экрана, 192×192 и 512×512 для установки сайта как приложения. Плюс /favicon.ico в корне — его браузеры и роботы запрашивают по умолчанию, даже если в коде указано другое.
Как подключить
- Положить
favicon.icoв корень сайта — это запасной путь, который работает без правок кода. - Добавить в
<head>ссылки на нужные размеры и форматы. - Отдельно указать иконку для мобильного экрана.
- Для установки сайта как приложения — описать иконки в манифесте.
- Проверить на реальных устройствах и в тёмной теме.
Важно, чтобы файл отдавался с кодом 200 и правильным типом. Иконка, лежащая по адресу, который возвращает 404, просто не появится — а в логах сервера это будет тихо повторяться на каждой странице.
Почему фавикон не меняется
Самая частая жалоба. Причина почти всегда одна — кэширование, причём сразу на нескольких уровнях.
- Браузер держит иконку дольше, чем остальные файлы. Помогает жёсткая перезагрузка, очистка кэша или открытие адреса иконки напрямую. Механика — что такое кэш.
- Кэш на сервере или в CDN — старый файл продолжает отдаваться. Сбрасывается на стороне сервера.
- Поисковая система обновляет иконку в выдаче не сразу: нужен повторный обход, это занимает недели.
- Старый ico в корне. В коде прописан новый PNG, а браузер берёт
/favicon.ico, который забыли заменить.
Приём, который снимает первые два пункта: подключить иконку с версией в адресе — при обновлении меняется адрес, и кэш перестаёт мешать.
Как нарисовать так, чтобы работало
Иконка живёт в квадрате 16 пикселей. Всё, что рассчитано на большой логотип, там превращается в пятно.
- Один элемент. Буква, знак, простая фигура — не логотип целиком с текстом.
- Контраст. Тонкие линии на светлом фоне исчезают.
- Проверка в реальном размере. Уменьшите до 16 пикселей и посмотрите — читается ли.
- Тёмная тема. Чёрный знак на прозрачном фоне пропадает на тёмной панели. Решение — плашка-подложка или SVG, который меняет цвет по теме.
- Узнаваемость. Иконка должна отличаться от соседних вкладок, а не повторять типовой синий круг.
Влияет ли на SEO
Прямым фактором ранжирования фавикон не является. Влияние косвенное и небольшое: заметная иконка делает строку в выдаче узнаваемой, а узнаваемость влияет на кликабельность. Проверить это можно по CTR в Вебмастере — так же, как эффект от сниппета.
Обратная сторона тоже есть: отсутствие иконки или стандартная заглушка на фоне конкурентов с собственными знаками выглядит как признак заброшенного сайта.
Коротко
- Фавикон — иконка сайта во вкладке, закладках и выдаче Яндекса.
- Нужен набор размеров: 16 и 32 для браузера, 180 для мобильного экрана, 192 и 512 для установки.
- Файл favicon.ico в корне обязателен как запасной путь.
- Не обновляется почти всегда из-за кэша браузера, сервера или старого ico в корне.
- Рисовать нужно один простой контрастный элемент и проверять в размере 16 пикселей.
- Фактором ранжирования не является, но влияет на узнаваемость и кликабельность.
Доводим техническую базу сайта до порядка, включая мелочи вроде иконок и разметки, — поисковое продвижение и разработка сайтов.