Фавикон

Фавикон (favicon) – это маленькая иконка сайта, которую браузер показывает во вкладке, закладках и истории, а поисковики рядом со сниппетом в выдаче. Обычно это логотип компании или его упрощённая часть.

Иконка размером с ноготь кажется мелочью, пока не посмотришь на выдачу. Десять результатов подряд, и у каждого слева значок. Знакомый значок узнают быстрее, чем название, а серая заглушка вместо иконки выглядит как сайт, которым никто не занимается. Во вкладках браузера то же самое: когда открыто двадцать вкладок, человек ищет ваш сайт глазами именно по фавикону.

Где показывается фавикон

• Во вкладке браузера, в закладках и в истории.
• В поисковой выдаче Яндекса и Google рядом с адресом сайта в сниппете.
• На экране телефона, если человек добавил сайт как ярлык. Для этого используют отдельную иконку apple-touch-icon и иконки в файле манифеста.
• В некоторых сервисах и мессенджерах при превью ссылки.

Требования Яндекса и Google

У поисковиков свои правила, и выполнять их нужно одновременно. На момент написания справки дают такие требования:

Ещё два правила. Яндекс просит, чтобы иконка одинаково хорошо смотрелась в тёмной и светлой теме. Google поддерживает одну иконку на имя хоста, поэтому у каждого поддомена она своя, и не показывает иконки с неприемлемым содержанием.

Как подключить фавикон

Иконку кладут в корень сайта и указывают в разделе head главной страницы, а лучше в общем шаблоне всех страниц:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

SVG Яндекс рекомендует за чёткость на любых экранах. Рядом стоит держать растровую версию в ICO или PNG: её точно поймут все браузеры и сервисы. Для apple-touch-icon обычно готовят PNG 180×180.

Во многих CMS и готовых шаблонах есть поле для загрузки иконки в настройках, и тег прописывается сам. После загрузки всё равно загляните в код главной: шаблон иногда оставляет рядом старую иконку, и браузеры берут не ту.

Как сделать хороший фавикон

Главная ошибка: уменьшить весь логотип вместе с названием до 16 пикселей. Текст превращается в кашу, и иконка не читается. Работает другое:

• Упрощённый знак или первая буква названия.
• Контраст на светлом и тёмном фоне. Чёрный значок на прозрачном фоне в тёмной теме пропадает.
• Квадрат без пустых полей по краям, чтобы знак занимал всю площадь.
• Фирменные цвета и тот же стиль, что у логотипа, чтобы иконка и сайт выглядели как одно целое.
• Стабильность. Частая смена иконки сбивает узнавание, а в выдаче новая появляется не сразу.

Размер, установка и замена фавикона

Почему фавикон не показывается в выдаче

• Файл или папка с ним закрыты в robots.txt.
• Адрес иконки отдаёт 404 или цепочку редиректов вместо ответа 200. Проверить можно любым сервисом кодов ответа сервера.
• Тег link есть на внутренних страницах, но его нет на главной, или адрес файла указан с ошибкой.
• Иконка лежит на отдельном домене или CDN, где роботам закрыт доступ.
• Размер или пропорции не подходят: прямоугольная картинка, слишком мелкая иконка.
• Прошло мало времени. В Яндексе ускорить обновление можно, отправив главную на переобход в Вебмастере.

Как проверить фавикон

1. Откройте адрес иконки напрямую, например site.ru/favicon.ico. Должна открыться картинка, а не ошибка или главная страница.
2. Посмотрите код главной: есть ли теги link с иконкой и верные ли в них адреса.
3. Проверьте ответ сервера для файла иконки: нужен 200 без редиректов.
4. Включите в браузере тёмную тему и посмотрите на вкладку: иконка не должна сливаться с фоном.
5. Найдите свой сайт в Яндексе и Google по названию компании и проверьте, какая иконка стоит в сниппете.

Что фавикон даёт в поиске

На позиции фавикон напрямую не влияет. Его работа в другом: узнаваемый значок помогает выделиться среди соседей по выдаче и может добавить кликов, то есть поднять CTR выдачи. Поэтому фавикон входит в наш чек-лист технического аудита: правка небольшая, а иконку видно в каждом показе сайта.

Фавикон, сниппеты и доступность файлов для роботов проверяем при техническом аудите сайта. Иконку под фирменный стиль рисуем при разработке логотипа.

Источники

• Справка Яндекс Вебмастера: фавикон в результатах поиска
• Google Search Central: фавиконы в Google Поиске

См. также: Сниппет, CTR выдачи, Robots.txt, Логотип.