1. Яндекс Бизнес
  2. Практика
  3. Что такое фавикон и почему он нужен вашему сайту
Рассказываем о бизнесе двадцать четыре на семь
Рассказываем
о бизнесе двадцать четыре на семь
Разными путями Спецпроект
Практика
24 ноября 2023

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

Рассказываем о простых способах создать фавикон.

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

  1. Что такое фавикон
  2. Для чего используется
  3. Как проверить наличие фавикона
  4. Какие технические требования предъявляют поисковики
  5. Где можно создать фавикон
  6. Как добавить фавикон на свой веб-ресурс
  7. Что делать, если фавикон не отобразился

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

Понятие «фавикон», или favicon, — это сокращение от слов favorite icon, что в переводе с английского означает «значок для избранного». Такой значок установлен на большинстве сайтов в интернете. Это небольшое изображение, которое помогает зрительно идентифицировать веб-ресурс. Увидеть значок сайта можно:

  • На вкладках открытых страниц в браузере
Отображение фавикона в браузере
Иконки на вкладках помогают не запутаться в веб-страницах и быстро перейти к нужной
  • В результатах поисковой выдачи
Фавикон сайта в результатах поиска
Фавикон располагается в левой части результатов поиска перед названием страницы, ссылкой и сниппетом сайта
  • В истории посещений ресурсов
Отображение фавикона в истории браузера
В большинстве десктопных браузеров значок сайта можно увидеть сразу после времени посещения страницы
  • В «Закладках» или «Избранном» браузера
Отображение фавикона в Избранном браузера
С помощью фавикона отыскать нужный ресурс среди большого количества избранных вкладок не составит труда
  • В виде ярлыка для быстрого доступа к сайту на смартфоне
Фавикон в качестве ярлыка на смартфоне
Чаще всего, если вынести ярлык сайта на рабочее пространство мобильного телефона, появится его фавикон

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

Для чего используется

Существует несколько причин, почему владельцам сайтов стоит добавить значок.

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

Фавикон делает страницу сайта более заметной в поисковой выдаче. Веб-ресурс с уникальной иконкой выглядит привлекательнее в глазах пользователя, чем без неё. Такой сайт сложнее пропустить, поэтому людям будет проще кликнуть именно на него. Подробнее о том, что такое кликабельность и почему этот показатель так важен для бизнеса, можно прочитать в статье «Что такое CTR: что показывает, как его рассчитать и улучшить».

Поисковая выдача с фавиконами
Сниппет сайта без фавикона

На первом скриншоте — пример результата выдачи веб-ресурса с фавиконом.

На втором скриншоте — пример результата выдачи веб-ресурса без фавикона, в этом случае он выглядит неполным и кажется продолжением предыдущего

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

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

Фавикон избавляет от ошибок в лог-файлах ресурса. Лог-файл представляет собой журнал событий, в котором хранятся данные о посещениях и сбоях сайта. Когда браузер отправляет запрос на файл favicon.ico, чтобы обнаружить иконку, и не находит её, возникает ошибка 404.

Как проверить наличие фавикона

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

1. Откройте сайт с компьютера в браузере и посмотрите на вкладку. Если на открытой странице не установлен значок, появится иконка в виде пустого листа.

Сайт без фавиконки
На скриншоте — пример сайта без установленного фавикона

2. Найдите свой сайт в поисковой выдаче. Если рядом со сниппетом вы не увидите значок или он будет в форме серой планеты, фавикона на этом ресурсе нет.

Поисковая выдача с сайтами без фавиконок
Серая планета может автоматически присваиваться сайту без фавикона браузером

3. Добавьте свой веб-ресурс на рабочий стол смартфона. Для этого:

  • На iOS. Зайдите на сайт из Safari, выберите кнопки «Поделиться» и «На экран «Домой‟». Веб-ресурс появится на главном экране iPhone. Если на сайте есть фавикон, он отобразится в виде ярлыка.
  • На Android. Порядок действий зависит от браузера. Например, в Яндекс Браузере достаточно посетить сайт, нажать на три точки в правом нижнем углу, а затем выбрать кнопку «Добавить ярлык на телефон».

Ещё один способ бесплатно проверить наличие фавикона у веб-ресурса — воспользоваться специализированными сайтами, например ресурсом Favicon checker. Для этого следует ввести в предложенное окошко URL страницы и кликнуть на кнопку Check.

Какие технические требования предъявляют поисковики

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

Размер. Для Яндекса оптимальный размер фавикона — это 120 × 120, 32 × 32 или 16 × 16 px, для Google — 144 × 144, 96 × 96 и 48 × 48 px.

Формат. Для обеих ПС подходящими для иконок будут форматы ICO, SVG, PNG, JPEG и GIF, но без анимации. Яндекс предлагает использовать ещё и BMP.

Подробнее о рекомендациях к иконкам веб-ресурсов можно узнать в справке Яндекса в подразделе «Фавиконка».

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

Favicon Яндекса
На скриншоте — фавикон Яндекса. Он минималистичен, поэтому его легко запомнить

Таким образом, хороший favicon для сайта:

  • Соответствует техническим характеристикам поисковой системы
  • Отличается от значков конкурентов
  • Выглядит простым для пользователей
  • Не идёт в разрез с фирменным стилем компании

Где можно создать фавикон

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

  • Perfecto-web.com — русскоязычный генератор фавиконов, в котором изначально есть возможность установить нужный размер: от 16 × 16 до 144 × 144 px. Значки получаются в формате ICO.
  • Favicon.io — онлайн-сервис, который сделает фавикон из вашей картинки в нескольких размерах и двух форматах — PNG и ICO. Для этого следует загрузить картинку и нажать кнопку Download. Все файлы скачиваются единым архивом.
  • Realfavicongenerator.net — сайт, на который следует добавить исходное изображение размером 260 × 260 px и больше. Далее в настройках вам предложат скруглить края, настроить отступы, добавить цвет на фон, увеличить или уменьшить размер картинки либо оставить всё как есть. На выходе вы получите несколько значков разных размеров.
  • Favicomatic.com — сервис, в котором изначально нужно выбрать размеры будущих фавиконов. Он может сгенерировать значки размером 16 × 16 и 32 × 32 либо в дополнение предложить иконки для популярных операционных систем. Готовый результат можно сохранить на Google Диск прямо с сайта, но перед этим нужно будет авторизоваться.
  • Favicon-generator.org — инструмент, который предлагает сделать значок только в размере 16 × 16 px либо создать пакет фавиконов. Последний включает в себя иконки для браузера, iOS-, Android- и Microsoft-приложений.

Помимо готовых решений, для создания иконки подойдут графические редакторы, такие как Adobe Photoshop, Illustrator, GIMP, Krita, Figma и другие. Перед тем как сохранить значок, выставите корректный размер и выберите допустимый для фавиконок формат файла.

Как добавить фавикон на свой веб-ресурс

Чтобы вставить значок на сайт, потребуется:

  1. Загрузить фавикон на сервер. Для этого следует поместить все иконки в корневой каталог веб-ресурса. Затем сохраните полученный путь к значкам.
  2. Добавить в HTML-код основной страницы веб-ресурса ссылку на путь к иконкам. Между тегами и вставьте:
˂link rel="icon" href="полный путь к значку" type="image/формат значка«˃
Замените «полный путь к значку» на адрес расположения фавикона

То, что вы напишете после type=ʺ, будет зависеть от формата вашего файла. Подробнее о том, какой формат нужно указать, можно прочитать в справке Яндекса в подразделе «Как установить фавиконку».

Если вы сгенерировали значок в одном из онлайн-генераторов, просто скопируйте и вставьте предложенный ими HTML-код.

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

Этот способ подойдёт для всех сайтов, которые были разработаны на WordPress, Битрикс и других движках. Если ресурс создан в Тильде, нужно лишь установить фавиконку в настройках в разделе Favicon. Код для размещения фавикона автоматически сгенерируется и отобразится в общем коде сайта.

Что делать, если фавикон не отобразился

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

  1. Проверьте технические характеристики фавикона, подходит ли он под рекомендации поисковых систем.
  2. Зайдите в основную папку веб-ресурса и удостоверьтесь, что верно перенесли иконку.
  3. Откройте HTML-код и посмотрите, правильно ли указаны путь и формат фавикона.
  4. Проверьте доступность иконки по её прямой ссылке. Для этого воспользуйтесь инструментом «Проверка ответа сервера». Если ответ сервера 200 ОК, значит, всё в порядке.

Если иконка есть во вкладке браузера, но отсутствует в поисковых результатах рядом с вашим веб-ресурсом, подождите две недели. Это стандартный срок от загрузки до появления фавиконки в ПС. Дополнительно можно выяснить, не запрещён ли файл с фавиконом к индексации в robots.txt с помощью директивы Disallow.

Реклама может работать сама — с Рекламной подпиской от Яндекс Бизнеса

Узнать больше
Поделиться:
рассылка для бизнеса раз в две недели
Читать ещё
Смотреть всё
Смотреть всё