Что такое фавикон
Понятие «фавикон», или favicon, — это сокращение от слов favorite icon, что в переводе с английского означает «значок для избранного». Такой значок установлен на большинстве сайтов в интернете. Это небольшое изображение, которое помогает зрительно идентифицировать веб-ресурс. Увидеть значок сайта можно:
- На вкладках открытых страниц в браузере
Иконки на вкладках помогают не запутаться в веб-страницах и быстро перейти к нужной
- В результатах поисковой выдачи
Фавикон располагается в левой части результатов поиска перед названием страницы, ссылкой и сниппетом сайта
- В истории посещений ресурсов
В большинстве десктопных браузеров значок сайта можно увидеть сразу после времени посещения страницы
- В «Закладках» или «Избранном» браузера
С помощью фавикона отыскать нужный ресурс среди большого количества избранных вкладок не составит труда
- В виде ярлыка для быстрого доступа к сайту на смартфоне
Чаще всего, если вынести ярлык сайта на рабочее пространство мобильного телефона, появится его фавикон
Обычно фавиконом веб-ресурса выступает логотип компании или сервиса. Но часто его дорабатывают и оптимизируют. Всё потому, что для логотипа обычно берут больше информации — название бренда, текстовый слоган и другие элементы. А значок сайта меньшего размера, он должен хорошо читаться, быть простым и понятным. Поэтому некоторые компании сокращают своё название до первой буквы, добавляют к ней пару графических элементов и оформляют их в иконку.
Для чего используется
Существует несколько причин, почему владельцам сайтов стоит добавить значок.
Фавикон помогает быстро распознать и запомнить веб-ресурс. Когда в браузере открыто много страниц, их названия исчезают и на вкладках остаются только иконки. Если пользователь захочет перейти на другой открытый сайт, он обратит внимание на значки и кликнет по нужному.
Фавикон делает страницу сайта более заметной в поисковой выдаче. Веб-ресурс с уникальной иконкой выглядит привлекательнее в глазах пользователя, чем без неё. Такой сайт сложнее пропустить, поэтому людям будет проще кликнуть именно на него. Подробнее о том, как создать рекламу, которая заинтересует пользователей, можно прочитать в статье «Как составить рекламное объявление, чтобы повысить конверсию кампании».
На первом скриншоте — пример результата выдачи веб-ресурса с фавиконом.
На втором — пример результата выдачи веб-ресурса без фавикона, в этом случае он выглядит неполным и кажется продолжением предыдущего
Веб-ресурс с фавиконом вызывает больше доверия. Такая иконка является частью оформления сайта. Если она присутствует, пользователь может отметить, что владелец ресурса уделил достаточно времени деталям — позаботился о внешней составляющей и удобстве сайта.
В основном фавиконов нет у ресурсов, которые давно заброшены или ещё находятся в разработке. Поэтому лучше выделить время и загрузить фавикон на свой сайт.
Фавикон избавляет от ошибок в лог-файлах ресурса. Лог-файл представляет собой журнал событий, в котором хранятся данные о посещениях и сбоях сайта. Когда браузер отправляет запрос на файл favicon.ico, чтобы обнаружить иконку, и не находит её, возникает ошибка 404.
Как проверить наличие фавикона
Чтобы узнать, есть ли фавикон на веб-ресурсе, пройдите следующие шаги:
1. Откройте сайт с компьютера в браузере и посмотрите на вкладку. Если на открытой странице не установлен значок, появится иконка в виде пустого листа.
На скриншоте — пример сайта без установленного фавикона
2. Найдите свой сайт в поисковой выдаче. Если рядом со сниппетом вы не увидите значок или он будет в форме серой планеты, фавикона на этом ресурсе нет.
3. Добавьте свой веб-ресурс на рабочий стол смартфона. Для этого:
- На iOS. Зайдите на сайт из Safari, выберите кнопки «Поделиться» и «На экран «Домой‟». Веб-ресурс появится на главном экране iPhone. Если на сайте есть фавикон, он отобразится в виде ярлыка.
- На Android. Порядок действий зависит от браузера. Например, в Яндекс Браузере достаточно посетить сайт, нажать на три точки в правом нижнем углу, а затем выбрать кнопку «Добавить ярлык на телефон».
Ещё один способ бесплатно проверить наличие фавикона у веб-ресурса — воспользоваться специализированными сайтами, например ресурсами Favicon checker или SEOptimer. Для этого следует ввести в предложенное окошко 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 для сайта:
- Соответствует техническим характеристикам поисковой системы
- Отличается от значков конкурентов
- Выглядит простым для пользователей
- Не идёт в разрез с фирменным стилем компании
Где можно создать фавикон
Чтобы создать фавикон для сайта онлайн, можно воспользоваться популярными бесплатными инструментами. Они помогут за несколько минут сгенерировать нужный значок и получить полностью готовый 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-код основной страницы веб-ресурса ссылку на путь к иконкам. Между тегами <head> и </head> вставьте:
<link rel="icon" href="полный путь к значку" type="image/формат значка">
Замените «полный путь к значку» на адрес расположения фавикона
То, что вы напишете после type=«, будет зависеть от формата вашего файла. Подробнее о том, какой формат нужно указать, можно прочитать в справке Яндекса в подразделе «Как установить фавиконку».
Если вы сгенерировали значок в одном из онлайн-генераторов, просто скопируйте и вставьте предложенный ими HTML-код.
3. Загрузите страницу и проверьте, отобразилась ли иконка во вкладке браузера. После чего убедитесь, что фавиконка доступна для робота поисковой системы. Пошаговый план, как это сделать, можно найти в справке Яндекса.
Этот способ подойдёт для всех сайтов, которые были разработаны на WordPress, Битрикс и других движках. Если ресурс создан в Тильде, нужно лишь установить фавиконку в настройках в разделе Favicon. Код для размещения фавикона автоматически сгенерируется и отобразится в общем коде сайта.
Что делать, если фавикон не отобразился
Бывают случаи, когда значок не появляется во вкладках. В такой ситуации убедитесь, что корректно его установили:
- Проверьте технические характеристики фавикона, подходит ли он под рекомендации поисковых систем.
- Зайдите в основную папку веб-ресурса и удостоверьтесь, что верно перенесли иконку.
- Откройте HTML-код и посмотрите, правильно ли указаны путь и формат фавикона.
- Проверьте доступность иконки по её прямой ссылке. Для этого воспользуйтесь инструментом «Проверка ответа сервера». Если ответ сервера 200 ОК, значит, всё в порядке.
Если иконка есть во вкладке браузера, но отсутствует в поисковых результатах рядом с вашим веб-ресурсом, подождите две недели. Это стандартный срок от загрузки до появления фавиконки в ПС. Дополнительно можно выяснить, не запрещён ли файл с фавиконом к индексации в robots.txt с помощью директивы Disallow.