Что такое фавикон сайта и зачем он нужен

Фавикон (favorite icon) — это значок страницы/сайта, который используется:

  1. браузерами для отображения во вкладке или закладках слева от названия страницы
  2. Поисковыми системами для формирования сниппетов
  3. Веб приложениями для создания закладок на рабочем столе телефона
фавикон веб приложений

Обычно для формирования фавикона используется логотип бренда

фавикон – логотип бренда

Первая буква названия компании

фавикон из первой буквы названия компании

Несмотря на свою “маленькость” фавикон может сыграть большую роль в узнавании вашего бренда. Давайте пройдемся по местам, где пользователь может увидеть фавикон вашего сайта

Вкладки браузера

Среди множества открытых вкладок фавикон позволяет быстро найти нужный пользователю сайт. Посмотрите на скриншот — Википедию можно найти за доли секунд.

фавикон на вкладках браузера

Обратите внимание, на 2 вкладки с иконками планет — у этих сайтов фавикон отсутствует и Google Chrome автоматически отображает свою заглушку.

Закладки и избранное в браузере

Также рассмотрим еще пару мест, где можно встретить фавиконки сайтов:

Закладки:

фавикон в закладках браузера Яндекс

История браузера:

фавикон в историях браузера Google Chrome

Стартовый экран браузера:

фавикон на стартовом экране Chrome
СТАРТОВЫЙ ЭКРАН CHROME
фавикон на стартовом экране Safari
СТАРТОВЫЙ ЭКРАН В SAFARI

Мобильная выдача Google:

фавикон в мобильной выдаче

Органическая и коммерческая выдача Яндекса:

фавикон в органической выдаче Яндекс

Реклама в поисковой строке:

фавикон в рекламе поисковой строки Яндекс

В итоге мы убедились в том, что фавикон встречается пользователям гораздо чаще, чем можно подумать поэтому к его формированию следует подходить серьезно

Яндекс

Форматы: Яндекс предпочитает SVG, но также поддерживает ICO, BMP, JPEG, PNG, GIF — все без поддержки анимации.

Размеры: если это не SVG, то Яндекс предпочитает 120×120, но может выбрать доступную фавиконку любого размера. Скриншот из Яндекс.Вебмастера, где ПС говорит загрузить svg-файл

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

Также Яндекс рекомендует следующие размеры: 32 × 32, 16 × 16 пикселей.

Google

У Google более обширная информация по требованиям к фавиконке

Форматы: ICO, PNG, GIF, Animated GIFs, JPEG, APNG, SVG

Размеры: соотношение 1:1; размеры, кратные 48 — 48 × 48, 96 × 96, 144 × 144 пикселей и т.д. Не забудьте проверить как выглядит изображение в разрешении 16 × 16 пикселей, так как в результатах поиска Google показывает фавикон в разрешении 18 × 18 px, но из источника берет размеры 16 x 16 пикселей

Требования и размеры Google для фавиконки

либо 32 × 32 пикселя

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

Особые замечания:

  • Файл должен быть доступен для Google-бота, в частности для пользовательского агента Google Favicon — специального агента, который периодически обходит ваш сайт и скачивает фавиконки.

Поддерживаемые форматы иконок в браузерах

Формат фавиконки

Где отображаютется favicon в браузерах:

Браузер Адресная строка Подсказка в адресной строке Панель закладок Закладки Вкладки Ссылка на сайт, перенесенная на рабочий стол
Edge Нет Да Да Да Да Да
Firefox 1.0–12.0: Да > v13: Нет Да Да Да Да Да
Google Chrome Нет Нет Да Да 1.0 Нет
Internet Explorer 7.0 Нет 5.0 5.0 7.0 5.0
Opera 7.0–12.17: Да v14: Нет Нет 7.0 7.0 7.0 7.0
Safari Да Да Нет Да 1.0–8.0: Да 9.0–11.0: Нет 12.0: Опционально Нет

Есть 2 варианта добавления фавиконки на сайт:

1. Добавление ссылок на фавиконки в теге <head>

Пример:

<link rel="shortcut icon" href="/ifav_logo_2x.ico" />

Общие требования/условия добавления фавикона в тег head

  1. Ссылка должна содержать описательный атрибут rel="описательный атрибут". Они бывают следующими:
    1. icon – указывается для большинства браузеров
    1. shortcut icon — указывается для IE. Устарел.
    1. mask-icon – указывается для пользователей с MacOS. Сам файл должен быть черного цвета, в формате SVG. Цвет задается прямо в ссылке через атрибут color. Поддерживается только браузером Safari. Устарел.
    1. apple-touch-icon и apple-touch-icon-precomposed – для устройств на IOS и IpadOS. К этому атрибуту добавляется еще один — size. Рекомендуемые размеры:
Модель устройства Размер apple-touch-icon
iPhone 120×120 или 180×180
iPad Pro 167×167
iPad, iPad mini 152×152

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

для данного атрибута используют файлы в формате PNG

  • В ссылку рекомендуется добавить формат фавиконки type="тип файла". Внутри него объявляется изображение и его формат. Пример:

<link type="image/png" sizes="16x16" rel="icon" href="/favicons/favicon-16x16.png">

Возможные форматы:

  • image/svg+xml — SVG (не поддерживается браузером Safari);
  • image/x-icon или image/vnd.microsoft.icon — ICO;
  • image/gif — GIF;
  • image/jpeg — JPEG;
  • image/png — PNG;
  • image/bmp — BMP.

Для устаревших браузеров типа Internet Explorer рекомендуем указывать favicon формата ICO и размером 32 x 32 px.

Обязательное условие — файл формата ICO должен лежать в корне сайта, чтобы его смогли найти все браузеры

Пример:

<link rel="shortcut icon" type="image/x-icon"  href="/favicon.ico" >

2. Добавление ссылок в файл манифеста (для устройств на android)

Манифест — файл в формате .json, который содержит в себе ссылки на значки. Данный способ используется браузером Chrome на устройствах с системой Android в случае, когда иконка сайта/веб-приложения добавляется на рабочий стол.

Объявляется в head сайта. Пример:

<link rel="manifest" href="/manifest.json">

Общие требования:

Размер: 72х72, 96х96, 144х144, 192х192, 512х512

Формат: PNG

Пример содержимого файла

{
  "name": "Company Name",
  "short_name": "Company",
  "icons": [{
        "src": "images/touch/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "images/touch/apple-touch-icon.png",
        "sizes": "152x152",
        "type": "image/png"
      }],
  "start_url": "/index.html?homescreen=1",
  "display": "standalone",
  "background_color": "#3E4EB8"
}

Где

  • name – имя компании, приложения;
  • short_name — сокращенное имя компании, приложения;
  • icons – список иконок и их расположения. Внутри icons есть 3 значения: scr указывает путь к иконке, sizes — размер иконки и type — тип файла.
  • start_url – страница, которая будет открываться при нажатии на иконку;
  • display – формат, в котором будет отображаться сайт (во весь экран, во вкладке, как отдельное приложение);
  • background_color позволяет указать цвет страницы, который будет отображаться до момента загрузки стилей сайта;
  • theme_color определяет цвет темы по умолчанию для приложения. Иногда влияет на то, как приложение отображается ОС (например, в переключателе задач Android цвет темы окружает приложение).

Полный список свойств сайта есть здесь https://developer.mozilla.org/ru/docs/Web/Manifest, мы же обозначили необходимый минимум.

При создании фавикона учитывайте, что он должен хорошо выглядеть как в разрешении 16x16, так и в 512x512.

Также проверьте отображение иконки на темном и светлом фоне. Для примера, синий логотип сайта теряется на вкладке Google Chrome с примененной синей темой.

отображение фавиконки

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

https://realfavicongenerator.net/

На входе ожидает квадратное изображение. Если изображение не квадратное, то сервис предложит расширить изображение до квадрата прозрачным фоном.

Далее вы можете указать различные опции генерации: начиная от размеров файла, заканчивая цветом плитки в Windows Metro

Создать фавикон онлайн - генераторы favicon

На выходе получаем код, который нужно вставить в head и архив с файлами, загружаемыми в корень сайта:

Код фавикон для добавления на сайт
Код фавикон для добавления

https://favicon.io/

Помимо генерации из готового файла, данный сервис позволяет создать фавикон из текста:

Генератор для создание фавикон из текста

После создания текста вы скачиваете архив файлов, которые нужно разместить в директории сайта:

Файлы фавикон для размещения на сайте

Единственный минус — не генерирует код для head в отличие от предыдущего сервиса.

https://www.favicon-generator.org/

Сервис работает аналогично https://realfavicongenerator.net/, только генерирует бОльшее количество файлов в разных разрешениях.

Проверить отображение фавикона в поисковых системах:

В Яндексе: https://favicon.yandex.net/favicon/webit.ru, где вместо webit.ru нужно подставить адрес вашего сайта.

В Google: https://t1.gstatic.com/faviconV2?client=SOCIAL&type= FAVICON& fallback_opts =TYPE,SIZE,URL&url=https://webit.ru, где вместо https://webit.ru нужно подставить адрес вашего сайта.

Проверить как отображается значок на всех устройствах можно в уже знакомом сервисе
https://realfavicongenerator.net/favicon_checker#. Y16-1exBxUM.

Результат проверки:

Проверка фавикон
  1. Проверьте общую доступность фавикона через сервис https://realfavicongenerator.net/ favicon_checker#.Y16-1exBxUM
  2. Проверьте доступен ли фавикон для индексации роботами. Скопируйте адрес значка и вставьте сюда https://pagespeed.web.dev/ для проверки доступности в Google или https://webmaster.yandex.ru/tools/server-response/ для проверки в Яндекс.
  3. В поисковой выдаче не будут показываться фавиконки порнографического характера, с запрещенной символикой или пропагандой насилия. При наличии такого фавикона он будет заменен схематичной иконкой планеты.
  4. Если при обращении к вашему сайту будет некоторое время показываться заглушка хостинга — Яндекс может взять фавикон заглушки. Но не стоит беспокоиться — если ваш сайт будет корректно работать, то Яндекс через несколько дней заменит фавиконку на корректную.
  5. Значок может не отображаться если изображение будет очень низкого качества или скопировано с другого ресурса.
  6. Проверьте сайт на наличие фильтров со стороны поисковых систем.

Что следует запомнить

Фавикон — это маленький значок сайта, появляющийся возле его названия во вкладках и истории браузера, а также во всех онлайн-интерфейсах. Пользователь, ориентируясь на фавиконку, сумеет быстро найти нужный сайт или приложение. Это поможет повысить узнаваемость и кликабельность ресурса.

Чаще всего для создания фавиконки используются форматы: .ico, .png, .svg.

Для разных локаций необходимы добавлять свои размеры. При этом фавиконка должна хорошо выглядеть в разных разрешениях.

Цветовая гамма иконки должна соответствовать визуальному стилю, которого придерживается компания.

Чтобы быстро создать качественную фавиконку, воспользуйтесь сервисом-генератором.

Сделать иконку при помощи специальных систем несложно — этот процесс будет практически полностью автоматизированным и не потребует лишних усилий.

Готовый фавикон необходимо размещать в теге <head> в корне сайта.

Ошибки отображения помогут найти сервисы-чекеры.

Добавить комментарий

Ваш комментарий будет опубликован после модерации без публичного указания вашего e-mail адреса. Обязательные поля помечены *

Все статьи автора
Читать далее
Внутренняя оптимизация сайта
Определение и важность внутренней оптимизации Внутренняя оптимизация сайта – это набор стратегий и методов, направленных на улучшение видимости и рейтинга ресурса в поисковых результатах. В отличие от внешней оптимизации, которая фокусируется на внешних факторах, таких как ссылки с других сайтов, внутренняя оптимизация касается внутренних аспектов самого сайта. Оптимизация внутренних элементов сайта является основным шагом в…
Читать далее
Что такое поисковые подсказки в «Яндекс» и Google и как в них попасть
Существует несколько способов расширения семантического ядра для веб-ресурса с целью привлечения на него дополнительного трафика. Один из них — это работа с поисковыми подсказками. Используя подсказки, можно вывести свой сайт в топ-10 поисковой выдачи, но главное условие — действовать «белыми» способами. Что такое поисковые подсказки и зачем они нужны Google создал систему, которая предлагает пользователю…
Читать далее
Особенности продвижения сайта в Google в 2023 году
Важность SEO После отключения Google Adwords и ухода компании Google из РФ может показаться, что продвижение в Google лишено смысла. Но если мы взглянем на статистику, то увидим, что доля Google в России составляет 37% или 2,7 млрд посетителей в месяц, что говорит о перспективности данной поисковой системы для вашего сайта. Поэтому пройдемся по основным…
Читать далее
55 % трафика + для проекта UPS-Mag.ru за 5 месяцев
UPS-Mag  - интернет-магазин оптовой и розничной продажи систем бесперебойного питания, аккумуляторов и аксессуаров к ним, пришел к нам с задачей увеличения трафика на раздел «Аккумуляторные батареи». Хорошая видимость в поиске и стабильный трафик - уровень, обеспеченный in-house командой проекта, позволил нам выстроить эффективный процесс сотрудничества. Внедрение доработок команда клиента взяла на себя. За 5 месяцев…
Читать далее
Регулярные выражения для Google Search Console
Google Search Console – прекрасный инструмент для аналитики данных по проекту в поиске. Но есть одна особенность, которая сильно ограничивает в возможностях при работе с инструментом  — просмотреть статистику можно только основываясь на 1000 самых популярных запросов или страниц. Для получения более детальной информации мы рекомендуем использовать GSC в связке с регулярными выражениями. С помощью…