Фавикон для сайта: размеры, создание и подключение

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

Фавикон (от английского favorite icon) - значок сайта. Простыми словами, это логотип размером с ноготь, по которому человек узнаёт ваш сайт среди десятка открытых вкладок. Фавикон для сайта показывается в нескольких местах:

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

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

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

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

Поисковые системы предъявляют свои требования. Яндекс поддерживает форматы ICO, PNG, GIF и SVG и рекомендует иконку 120 на 120 пикселей. Google просит квадратную картинку стороной не меньше 48 пикселей, лучше кратную 48. Если сделать SVG или PNG 120 на 120 и ICO, требования обоих поисковиков выполнены.

Требования к картинке

• Квадрат, без мелких деталей и текста длиннее одной-двух букв: в 16 пикселях надписи не читаются.
• Контрастный цвет, который виден и на белом, и на тёмном фоне браузера.
• Узнаваемый элемент логотипа или первая буква названия, а не логотип целиком.
• Прозрачный фон для PNG и SVG или сплошная заливка, если знак светлый.

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

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

1. Подготовьте квадратный PNG или SVG 512 на 512 с вашим знаком.
2. Откройте онлайн-генератор, например realfavicongenerator.net или favicon.io.
3. Нажмите кнопку загрузки и выберите картинку.
4. Проверьте превью для браузера, iOS и Android, при необходимости поменяйте фон и отступы.
5. Нажмите кнопку генерации и скачайте архив с файлами.
6. Скопируйте предложенный код для вставки в head.

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

Как создать фавикон SVG

SVG-иконка весит меньше килобайта и чётко выглядит на любом экране. Её можно сделать в Figma, Inkscape или любом векторном редакторе и сохранить как SVG. Внутрь файла можно добавить стиль для тёмной темы:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>circle{fill:#1a73e8}
  @media (prefers-color-scheme:dark){circle{fill:#8ab4f8}}</style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Как подключить фавикон к сайту в HTML

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

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

Файл favicon.ico в корне браузеры и поисковики находят даже без тега, но лучше указать его явно. Пути пишите от корня, начиная с косой черты, иначе на внутренних страницах иконка не найдётся. Проверьте, что адрес example.ru/favicon.ico открывается в браузере и показывает картинку, а не страницу 404.

При замене иконки браузер может ещё долго показывать старую из кеша. Чтобы увидеть новую, откройте сайт в режиме инкогнито или добавьте к адресу файла версию: /favicon.svg?v=2.

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

В CMS и конструкторах код писать не нужно, иконка загружается через настройки.

WordPress

1. Зайдите в админку и откройте "Внешний вид - Настроить".
2. Перейдите в раздел "Свойства сайта".
3. В блоке "Иконка сайта" нажмите "Выбрать иконку сайта" и загрузите квадратную картинку не меньше 512 на 512.
4. Нажмите "Опубликовать". WordPress сам сделает нужные размеры и вставит код.

В блочных темах WordPress пункт может находиться в редакторе сайта, в настройках блока "Логотип сайта" или "Иконка сайта".

Tilda

Как добавить фавикон в Тильде: откройте "Настройки сайта", найдите раздел с иконкой сайта (в разных версиях интерфейса он лежит во вкладке "Ещё" или "Общие"), загрузите картинку и переопубликуйте все страницы. Без переопубликации иконка появится только на новых страницах. Как поменять фавикон в Тильде - так же: загрузить новый файл вместо старого и опубликовать сайт заново.

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

Самая частая жалоба: на сайте иконка есть, а в выдаче Яндекса по-прежнему пустое место или старая картинка. Причины обычно такие:

Проверить, какую иконку видит Яндекс, можно по адресу favicon.yandex.net/favicon/example.ru: подставьте свой домен. Если там старый значок, робот просто ещё не обновил кеш. Убедитесь, что robots.txt не мешает (о правилах подробно в статье про файл robots.txt, проверить свой файл можно в генераторе robots.txt), и что сайт добавлен в Яндекс Вебмастер: как добавить сайт в Яндекс Вебмастер.

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

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

Иногда нужно вытащить фавикон с сайта, например для презентации или каталога ссылок. Проще всего дописать к домену /favicon.ico и сохранить картинку правой кнопкой мыши. Если там пусто, откройте код страницы клавишами Ctrl+U, найдите тег rel="icon" и перейдите по указанному адресу. Помните, что иконка чужого сайта - его товарный знак: для ссылки на этот сайт использовать её можно, а для своего проекта нет.

Фавикон - один из пунктов базовой настройки нового сайта. Остальные шаги после запуска перечислены в статье как создать сайт бесплатно, а проверить всё разом поможет чек-лист бесплатный SEO-аудит сайта.