Фавикон: размеры, форматы и как поставить иконку сайта

Фавикон — маленькая иконка сайта во вкладке браузера, в закладках и рядом с адресом в выдаче. Яндекс рекомендует размер 120 x 120, 32 x 32 или 16 x 16 пикселей и формат SVG, Google — квадрат от 48 x 48 пикселей в PNG, ICO или другом растровом формате. Файл кладут в корень сайта и прописывают ссылкой в коде главной страницы.

Что такое фавикон и где его видят

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

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

Без фавикона браузер ставит серую заглушку, а поисковик — пустой кружок или иконку по умолчанию. Сайт от этого не перестаёт работать, но выглядит незаконченным, особенно рядом с конкурентами, у которых иконка есть. Для того же на телефонах служит apple-touch-icon — значок сайта, добавленного на домашний экран.

Фавикон — первое изображение бренда, которое человек видит ещё до перехода на сайт: в выдаче и во вкладке браузера.

Какой размер фавикона нужен?

Единого размера нет: у Яндекса, Google, iPhone и Android свои требования, и надёжнее подготовить набор файлов. Яндекс рекомендует размер 120 x 120, 32 x 32 или 16 x 16 пикселей. Google требует квадрат не меньше 8 x 8 пикселей и рекомендует значок от 48 x 48, чтобы он хорошо смотрелся на разных платформах.

Яндекс отдельно отмечает, что размер 120 x 120 пикселей или формат SVG позволяют показывать логотип чётче и заметнее на его сервисах. Поэтому маленький файл 16 x 16 оставьте только как запасной вариант: на экранах с высокой плотностью пикселей он выглядит размытым.

Факт. Яндекс рекомендует для фавиконки размер 120 x 120, 32 x 32 или 16 x 16 пикселей, а Google — квадратный значок от 48 x 48 пикселей.

SVG, ICO или PNG: какой формат выбрать?

Формат выбирают под две поисковые системы сразу, и их списки не совпадают. Яндекс принимает SVG, ICO, GIF, JPEG, PNG и BMP и прямо рекомендует SVG. В списке форматов Google есть BMP, GIF, ICO, PNG, JPEG, PPM и TIFF, а SVG в нём не указан.

Отсюда рабочая схема для большинства сайтов: векторный файл favicon.svg для Яндекса и современных браузеров плюс растровый файл favicon.ico или PNG от 48 x 48 пикселей для Google и старых браузеров. SVG масштабируется без потери чёткости, а растровый файл гарантирует, что иконка появится там, где вектор не поддерживается.

Анимацию не используйте: Яндекс её не поддерживает. JPEG тоже не лучший выбор: у него нет прозрачного фона, а сжатие портит мелкие детали иконки.

Мнение. Если нет времени разбираться, сделайте два файла: favicon.svg и favicon.ico с размерами 32 x 32 и 48 x 48 внутри. Этого набора хватает Яндексу, Google и браузерам на компьютере.

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

Фавикон делают из логотипа, но почти никогда не из логотипа целиком. В квадрате 32 x 32 пикселя надпись с названием компании превращается в серую полосу. Берут самый узнаваемый элемент: знак, первую букву названия, монограмму.

Что учесть при отрисовке:

• Простая форма — один крупный элемент, без тонких линий и мелких деталей, которые исчезнут при уменьшении.
• Квадратная композиция — элемент вписан в квадрат с небольшими полями, без обрезанных краёв.
• Две темы — Яндекс рекомендует изображение, которое одинаково хорошо выглядит в тёмной и светлой темах оформления.
• Контрастный цвет — фирменный цвет на прозрачном фоне или белый знак на цветной подложке.
• Проверка в реальном размере — смотрите иконку во вкладке браузера, а не увеличенной в редакторе.

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

Как добавить фавикон на сайт?

Фавикон добавляют в два шага: кладут файлы на сайт и прописывают ссылки на них в разделе head главной страницы. Яндекс советует поместить файл с именем favicon в корневой каталог сайта, а Google получает адрес значка из элемента link на главной странице.

Пример набора ссылок:

<head>
  <link rel="icon" href="https://site.ru/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="https://site.ru/favicon.ico" type="image/x-icon" sizes="32x32">
  <link rel="apple-touch-icon" href="https://site.ru/apple-touch-icon.png" sizes="180x180">
  <link rel="manifest" href="https://site.ru/manifest.webmanifest">
</head>

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

Что требует Яндекс от фавиконки

Требования Яндекса касаются доступности файла для робота. Файл должен открываться по прямой ссылке с ответом сервера 200 OK, а не перенаправлять на другой адрес. Сам файл и каталог, в котором он лежит, не должны быть запрещены для индексирования, например директивой Disallow в robots.txt — как устроен этот файл, разобрано в статье файл robots.txt: что в нём писать.

Есть несколько менее очевидных правил:

• Одна ссылка на формат — если ссылка на фавиконку прописана в коде несколько раз, робот может выбрать любую из них.
• Одинаковая иконка на всех версиях — если сайт открывается с www и без, по HTTP и HTTPS, на всех адресах должна быть одна и та же иконка.
• Тег apple-touch-icon — робот может взять фавиконку и из него, поэтому иконка для iPhone должна быть того же рисунка.
• Доступность при обходе — если сайт недоступен, когда приходит робот, в выдаче может появиться фавиконка хостинга со страницы-заглушки.

Последний случай встречается после переезда или при сбоях хостинга: вместо логотипа рядом с сайтом стоит чужая иконка. Лечится он восстановлением доступности и ожиданием следующего обхода.

Что требует Google от значка сайта

Google показывает в выдаче один значок на сайт, а сайт определяет по имени хоста. Это значит, что example.com и news.example.com могут иметь разные значки, а раздел example.com/news отдельной иконки в выдаче не получит: главная страница уровня подкаталога не поддерживается.

Технические требования Google:

• Квадрат — соотношение сторон 1:1, не меньше 8 x 8 пикселей, рекомендуемо от 48 x 48.
• Формат из списка — BMP, GIF, ICO, PNG, JPEG, PPM или TIFF.
• Стабильный адрес — Google просит не менять адрес значка слишком часто.
• Доступ для роботов — Googlebot-Image должен сканировать файл значка, а Googlebot — главную страницу.

Ссылку Google принимает в атрибутах rel со значениями icon, apple-touch-icon и apple-touch-icon-precomposed, а адрес может быть как относительным, так и абсолютным, в том числе на CDN. Подключить сайт к кабинету Google и запросить переобход главной страницы поможет инструкция как подключить сайт к Google Search Console.

Как проверить фавикон и сколько ждать показа в выдаче

Первая проверка — в браузере: иконка во вкладке и файлы по прямым ссылкам. Вторая — в кабинетах поисковых систем. В Яндекс Вебмастере через несколько дней после добавления откройте «Оптимизация сайта -> Диагностика сайта»: если с фавиконкой проблема, там будет предупреждение. Чтобы убедиться, что всё в порядке, нажмите «Посмотреть всё, что проверяет Вебмастер» и найдите строку о фавиконке.

Сроки у поисковиков разные:

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

Новый фавикон появляется в выдаче не сразу: Яндекс указывает срок до двух недель после загрузки, а переобход главной ускоряет обновление до трёх дней.

Почему фавикон не отображается и как это исправить?

Если иконки нет в выдаче дольше положенного, причина почти всегда в одном из пунктов ниже:

• Файл отвечает не 200 — 404 после переезда, 403 из-за прав доступа или редирект на другой адрес.
• Запрет в robots.txt — закрыт не сам файл, а папка с картинками или служебный каталог шаблона.
• Неверный type — в ссылке указан image/png, а файл на самом деле ICO.
• Несколько разных иконок — старые ссылки из прошлого шаблона, и робот берёт любую из них.
• Только SVG — Яндекс его покажет, а Google SVG в списке форматов не указывает.
• Надпись вместо знака — иконка технически есть, но в маленьком размере превращается в пятно.
• Белый знак на прозрачном фоне — в светлой теме выдачи иконка пропадает.

С чего начать, если фавикона нет

Начните с логотипа: выберите элемент, который узнаётся в квадрате 32 x 32 пикселя, и проверьте его на светлом и тёмном фоне. Затем подготовьте набор файлов — SVG, ICO, apple-touch-icon 180 x 180 и значки для манифеста, — загрузите их в корень и пропишите ссылки в шаблоне. Через несколько дней проверьте диагностику в Вебмастере и отчёт в Search Console.

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

Источники

• Фавиконка — Справка Яндекс Вебмастера — Яндекс
• Как показывать значок сайта в результатах поиска — Google
• Не предоставляет действительный значок Apple Touch — Chrome for Developers — Google
• Добавьте манифест веб-приложения — Google, web.dev