Favicon для сайта: какой размер нужен, как сделать и подключить

Проверка и генератор favicon онлайн

Проверка. Введите адрес сайта — найдём все link rel="icon", apple-touch-icon, manifest и файл /favicon.ico. Для каждого покажем код ответа, формат, размер в пикселях и в байтах и сверим с требованиями Яндекса.

Генератор. Загрузите картинку в PNG, JPG или SVG — получите favicon.ico с размерами 16, 32 и 48, PNG 32×32, apple-touch-icon 180×180, иконки 192 и 512 для manifest и готовый HTML-код для head. Картинка обрабатывается в браузере и никуда не отправляется. Отдельная страница — проверка favicon.

Что такое favicon и где его видно

Слово — от английского favorites icon, «значок избранного»: когда-то иконку показывали только в закладках. Сейчас она работает везде, где нужно быстро узнать сайт в списке:

Если иконки нет, браузер показывает серый значок-заглушку, а в выдаче рядом с адресом стоит стандартная картинка. Сайт от этого не понижают, но и узнавать его труднее.

Размеры favicon: какой нужен для сайта

Одного размера не хватает: разные места показывают иконку в разном масштабе. Рабочий набор:

Google требует квадратную иконку не меньше 8×8 и рекомендует больше 48×48 пикселей. Совет «размер, кратный 48» вы встретите во многих инструкциях: 48, 96 или 144 пикселя подходят, но в текущей справке Google это рекомендация минимального размера, а не требование кратности.

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

Итог: favicon.ico + PNG + SVG по желанию. JPEG и GIF тоже принимаются, но JPEG не умеет прозрачность, а анимированный GIF Яндекс не покажет — анимация не поддерживается.

Требования Яндекса к фавикону и как он попадает в выдачу

• Сроки. Если робот загрузил иконку, она появится в результатах поиска в течение двух недель. Чтобы ускорить, отправьте главную страницу в Индексирование → Переобход страниц — тогда фавикон обновится в течение трёх дней.
• Несколько иконок. Если ссылка на фавикон прописана несколько раз, робот может выбрать любую. Сервисы Яндекса могут взять и иконку из apple-touch-icon. Поэтому все варианты должны быть одной и той же картинкой.
• Тёмная тема. Яндекс советует картинку, которая одинаково хорошо смотрится на светлом и тёмном фоне.
• Проверка. Загрузил ли робот иконку, видно в Вебмастере в разделе «Диагностика сайта»: если предупреждения о фавиконке нет, файл обработан.

Требования Google к favicon

• Одна иконка на хост: у site.ru и shop.site.ru могут быть свои, у раздела site.ru/blog — нет.
• Ссылка — в head главной страницы: rel="icon", "shortcut icon", "apple-touch-icon" или "apple-touch-icon-precomposed".
• Квадрат 1:1, не меньше 8×8, рекомендуется больше 48×48 пикселей.
• Форматы: BMP, GIF, ICO, PNG, JPEG, PPM, TIFF.
• Googlebot должен иметь доступ к главной, а Googlebot-Image — к файлу иконки.
• Адрес иконки не стоит часто менять. Обновление занимает от нескольких дней до нескольких недель — ускорить можно запросом индексации главной в Search Console.
• Иконка должна представлять бренд. Неприемлемые изображения Google заменяет стандартным значком.

HTML-код favicon для head

Код для набора из генератора выше. Имена файлов могут отличаться — берите их из своего набора:

<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Если есть SVG, добавьте строку с ним. Браузеры, которые понимают SVG, возьмут его, остальные — PNG или ICO:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Файл manifest с иконками для Android:

{
  "name": "Кухни на заказ — Прованс",
  "short_name": "Прованс",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

• Код ставится на все страницы, но поисковикам важна главная — проверьте, что он есть именно там.
• Атрибут type должен соответствовать формату: Яндекс называет неверный type одной из причин, почему иконка не появляется.
• Пути — от корня (/favicon.ico) или полные с https. Ссылка на http-адрес иконки на сайте с https приведёт к редиректу.

Как сделать favicon

1. Возьмите знак, а не логотип целиком. В 16×16 пикселей надпись не прочитать. Подойдёт символ из логотипа, первая буква названия или простая фигура в фирменном цвете.
2. Сделайте квадратную картинку 512×512 или SVG с небольшими полями. Прозрачный фон удобен, но проверьте вид на тёмной теме — тёмный знак на прозрачном фоне там пропадёт.
3. Загрузите её в генератор выше: он нарежет все размеры и выдаст HTML-код.
4. Положите файлы в корень сайта и вставьте код в head. Откройте /favicon.ico в браузере — должен открыться файл, а не страница 404.
5. Проверьте результат в проверке выше: все ли иконки отвечают 200 и подходят под требования Яндекса.

Как добавить favicon на Tilda, WordPress и 1С-Битрикс

Tilda

Настройки сайта → SEO → Редактирование иконок (Favicons) → «Загрузить файл». Tilda принимает ico, png и jpeg, в справке советует квадрат 32×32, в блоге — 48×48. Там же можно загрузить отдельные иконки для светлой и тёмной темы браузера и иконку для главного экрана смартфона. После загрузки переопубликуйте все страницы проекта — иначе на части страниц останется старая иконка.

WordPress

С версии 6.5: Настройки → Общие → Иконка сайта. В более ранних версиях: Внешний вид → Настроить → Свойства сайта → Иконка сайта. Картинка — квадратная, не меньше 512×512 пикселей, лучше PNG. WordPress сам выведет нужные теги в head. Если тема или SEO-плагин добавляют свою иконку, оставьте один источник — иначе в коде будут разные картинки.

1С-Битрикс

Загрузите файлы в корень сайта — через «Контент → Структура сайта» или по FTP — и пропишите теги в header.php шаблона сайта, перед закрывающим тегом head. В готовых решениях из Маркетплейса часто есть своё поле для фавикона в настройках решения — тогда пользуйтесь им, чтобы обновление шаблона не стёрло правку.

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

Новая иконка не видна в браузере

Браузеры кэшируют фавикон очень долго — дольше, чем страницы. Чтобы увидеть новую иконку, откройте адрес иконки напрямую и обновите его, проверьте сайт в окне инкогнито или поменяйте адрес файла: /favicon.ico?v=2 или новое имя. Смена адреса заставит обновиться и браузеры посетителей. Только не меняйте его часто — Google просит держать адрес иконки стабильным.

Иконка — мелочь, которую легко сломать при переезде на https, смене домена или шаблона: повторяйте проверку выше после таких работ. Остальные страницы сайта после тех же работ проверяет СеоГард: он обходит сайт по расписанию и показывает адреса, которые отвечают ошибкой, уходят в редирект или закрыты от индексации.

Чек-лист