Что это
Favicon — маленькая иконка сайта размером 16×16, 32×32 или 48×48 пикселей, которая отображается во вкладке браузера, в закладках и в результатах поиска. Подключается через тег <link rel="icon"> в <head> страницы или через файл favicon.ico в корне домена. Современный стандарт также предполагает apple-touch-icon для iOS и манифест для PWA.
Почему это важно для SEO
Яндекс и Google отображают favicon рядом с заголовком сниппета в мобильной выдаче. Google показывает его во всех мобильных результатах с 2019 года — это прямое влияние на CTR. По данным исследований Backlinko, сниппеты с чётко читаемым брендовым значком получают на 5–10% больше кликов по сравнению с дефолтным пустым квадратом. Яндекс показывает favicon в мобильной выдаче и в Я.Браузере во вкладках, а отсутствие корректного файла может приводить к тому, что поисковик берёт случайный артефакт с сайта.
Поведенческий эффект выходит за рамки поисковой выдачи. Пользователь, открывший 10 вкладок, ориентируется по иконкам — отсутствие favicon или сломанный файл ведут к закрытию вкладки быстрее, чем страница успевает загрузиться. Это ухудшает поведенческие факторы: время на сайте падает, отказы растут. Для Яндекса, где ИКС (Индекс Качества Сайта) учитывает поведение аудитории, это косвенно давит на позиции.
Как проверить вручную
- Браузер. Откройте любую страницу сайта и посмотрите на вкладку. Если иконка отсутствует или показывается стандартный серый значок — favicon не установлен или путь указан неверно.
- Прямой запрос к файлу. Введите в адресную строку
https://вашдомен.ru/favicon.ico. Если браузер скачивает файл или отображает иконку — базовый favicon есть. Ответ404означает отсутствие файла.
- Просмотр кода страницы. Откройте DevTools (F12) → вкладка Elements, найдите
<head>. Ищите строки вида:
``html <link rel="icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> `` Если таких строк нет — favicon подключён только через корневой файл, что работает, но ненадёжно.
- Screaming Frog. Запустите краулинг сайта → вкладка Response Codes → фильтр
404. Проверьте, нет ли запроса кfavicon.icoсо статусом 404.
- Google Search Console. В разделе «Внешний вид в поиске» (Enhancement) иногда фиксируются ошибки favicon. Также проверьте Coverage — ошибки загрузки ресурсов страницы могут включать иконку.
Как исправить
Шаг 1. Подготовьте файл. Минимум — favicon.ico (мультиформатный, 16×16 + 32×32 внутри одного .ico). Оптимально — добавить favicon-32x32.png, apple-touch-icon.png (180×180) и site.webmanifest.
Шаг 2. Разместите файлы в корне сайта: https://вашдомен.ru/favicon.ico.
Шаг 3. Добавьте теги в <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">WordPress. Настройки → Персонализация → Свойства сайта → Иконка сайта. Загрузите PNG не менее 512×512 — WordPress сам сгенерирует нужные размеры и пропишет теги.
Tilda. Настройки сайта → Иконки (Favicon) → загрузите файл. Tilda автоматически добавляет <link rel="icon"> на все страницы.
1C-Bitrix. Настройки сайта → Настройки сайта → вкладка SEO или через шаблон: в файле header.php вашего шаблона добавьте теги вручную или используйте компонент bitrix:seo.tags.
Webflow. Pages → вкладка SEO → Favicon. Загружайте PNG 32×32 или выше — платформа сама конвертирует.
Типичные ошибки
- Файл есть, тег отсутствует.
favicon.icoлежит в корне, но в<head>нет<link rel="icon">. Браузеры по стандарту делают запрос к/favicon.icoавтоматически, но поисковые роботы могут не учитывать иконку без явного тега.
- Неверный MIME-тип. Сервер отдаёт
.icoс типомtext/plain. Добавьте в.htaccess:
``apache AddType image/x-icon .ico ``
- Favicon закрыт в robots.txt. Строка
Disallow: /favicon.icoзапрещает индексацию файла. Googlebot явно указывает: favicon должен быть доступен для краулинга.
- Низкое разрешение или нечитаемый дизайн. Логотип 200×200 сжатый до 16×16 превращается в кашу. Делайте упрощённую версию специально для малых размеров.
- Кеш после обновления. Заменили favicon, но пользователи видят старый — браузеры агрессивно кешируют иконки. Добавьте версионирование:
href="/favicon.ico?v=2".
Влияние на разные типы сайтов
Для интернет-магазинов favicon критичен в контексте доверия: пользователи, сравнивающие несколько магазинов в открытых вкладках, быстро ориентируются по иконкам брендов. Отсутствие фавиконки у магазина на фоне конкурентов с чёткими логотипами снижает возврат на страницу и итоговую конверсию.
Для контентных сайтов и медиа иконка работает в связке с закладками: читатели, добавляющие статью в избранное, видят favicon в панели закладок. SaaS-продуктам и лендингам favicon важен для узнаваемости в ретаргетинговых сценариях — когда пользователь возвращается через 3–5 дней, иконка в закладках работает как бесплатный брендовый триггер.