Фавикон: зачем он нужен сайту и как его правильно сделать

Фавикон (favicon, от favorite icon) — маленькая иконка сайта. Её видно на вкладке браузера, в закладках, в истории, на экране телефона, если сайт добавили на главный экран, и в поисковой выдаче рядом с адресом сайта.

Кажется, что это мелочь. Но у сайта без фавикона в выдаче стоит серая заглушка, а на вкладке — пустой листок. Среди десяти результатов с узнаваемыми значками такой сниппет выглядит заброшенным, и кликают по нему охотнее не станут. Фавикон делается за час и работает годами — это одна из самых дешёвых доработок сайта.

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

• Вкладка браузера. Здесь иконка самая маленькая — 16 пикселей. Когда открыто двадцать вкладок, по ней сайт и находят.
• Поисковая выдача Яндекса и Google. Иконка стоит рядом с названием сайта в сниппете.
• Закладки и история браузера.
• Главный экран телефона. Если сайт добавили на главный экран, телефон берёт отдельную крупную иконку. Если её нет, получится размытый скриншот или буква на цветном фоне.

Размеры фавикона

Одного файла на все случаи недостаточно, но и тридцать размеров, как советовали лет десять назад, больше не нужны. Хватает такого набора:

Требования поисковиков:

• Яндекс рекомендует SVG, принимает также ICO, PNG, GIF, JPEG и BMP. Размер — 120×120, 32×32 или 16×16 пикселей. Анимацию не поддерживает.
• Google требует квадратную иконку не меньше 8×8 пикселей и советует брать больше 48×48. Адрес иконки должен быть постоянным: не меняйте его без нужды. Для выдачи Google надёжнее держать рядом PNG или ICO.

Иконка должна быть доступна роботам: если файл закрыт в robots.txt или отдаёт ошибку, поисковик покажет заглушку.

Как сделать фавикон

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

Проверьте на трёх размерах. Посмотрите иконку в 16, 32 и 180 пикселях. Если на 16 пикселях не узнать, упрощайте дальше.

Подумайте о тёмной теме. Чёрный значок на прозрачном фоне исчезнет на тёмной вкладке. Варианта два: поставить значок на цветную плашку или сделать SVG, который меняет цвет. В SVG можно прописать медиазапрос prefers-color-scheme: dark, и браузеры, которые это поддерживают, покажут светлый вариант на тёмной теме.

Соберите файлы. Нарисуйте иконку в векторе (Figma, Illustrator, Inkscape), экспортируйте SVG и PNG нужных размеров. ICO можно получить из PNG в любом конвертере. Генераторы фавиконов делают весь набор из одной картинки, но проверяйте результат глазами: автоматическое уменьшение часто мылит детали.

Как установить фавикон на сайт

Положите файлы в корень сайта и добавьте в <head> каждой страницы:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

В файле site.webmanifest укажите иконки для Android:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Если тег не прописан совсем, браузеры всё равно попробуют загрузить /favicon.ico из корня. Поэтому этот файл стоит держать на месте, даже когда основная иконка — SVG.

В WordPress фавикон ставится без кода: «Внешний вид» → «Настроить» → «Свойства сайта» → «Иконка сайта». WordPress просит квадратную картинку не меньше 512×512 пикселей и сам нарежет нужные размеры. Если тема сама прописывает свои иконки, проверьте код страницы: иногда в нём оказываются сразу два набора.

В конструкторах сайтов иконка загружается в общих настройках сайта. Ищите пункт «Фавикон» или «Иконка сайта».

Фавикон в Яндексе и Google не появился или не обновился

Поисковики берут иконку не сразу: робот должен зайти на сайт и забрать файл. По справке Яндекса новая иконка появляется в выдаче в течение двух недель, а если отправить главную страницу на переобход в Вебмастере — примерно за три дня. Google предупреждает, что повторный обход занимает от нескольких дней до нескольких недель. Что проверить, если иконка не появилась совсем:

• открывается ли файл иконки по прямому адресу и отдаёт ли код 200, а не редирект на главную;
• не закрыт ли файл или папка с ним в robots.txt;
• нет ли на странице двух разных тегов rel="icon" с разными файлами;
• соответствует ли иконка требованиям: квадрат, нужный размер, без запрещённого содержания;
• одинаковый ли фавикон на всех версиях сайта — с www и без, http и https.

Чтобы браузеры сразу увидели новую иконку, а не взяли старую из кэша, при замене меняйте имя файла или добавляйте к адресу параметр версии, например icon.svg?v=2.

Частые вопросы

Какой формат фавикона лучше: ICO, PNG или SVG? Для браузеров и Яндекса — SVG: он чёткий на любом экране и весит мало. ICO оставьте для совместимости и для Google, PNG — для иконок телефонов.

Можно ли поставить анимированный фавикон? Технически да, некоторые браузеры показывают GIF. Но Яндекс анимацию не поддерживает, а мигающая вкладка раздражает. Не стоит.

Нужно ли менять фавикон после ребрендинга? Да, вместе с логотипом. Учтите, что в выдаче старая иконка может продержаться ещё до нескольких недель.

Влияет ли фавикон на позиции в поиске? Напрямую нет. Но узнаваемая иконка выделяет сниппет в выдаче и помогает человеку найти ваш сайт среди открытых вкладок.