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

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

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

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

• браузерных вкладках веб-страниц;
• строчках выдачи по запросам;
• журнале посещений пользователем различных площадок;
• на первой странице браузеров с перечнем часто посещаемых websites;
• разделах браузера «Закладки», «Избранное»;
• качестве ярлычка для прямого открытия программы/веба в мобильных устройствах.

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

Для чего используется фавикон

Назовем несколько причин, которые заставят владельцев онлайн-бизнеса задуматься над установлением фавиконов:

• Помогает быстрее распознавать сайт. Если пользователь открывает много страниц, то во вкладке отображаются только значки;
• Своим присутствием выделяет веб-страницы при выдаче результатов поиска, влияет на кликабельность;
• Повышает степень доверия пользователей, считающих, что к созданию сайта подошли продуманно;
• Позволяет выделиться среди конкурирующих компаний;
• Защищает лог-файлы от ошибок. Если браузер, отправив запрос на favicon.ico, не найдет фавикона, то выдаст 404.

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

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

• С ПК открыть в браузере интересующий сайт, взглянуть на вкладку. Если веб-страничка имеет значок «Пустой листок», значит элемент не установлен.
• Если поисковик выдаст список, где рядом со сниппетом вашего сайта будет иконка с серой планетой, то вам еще предстоит придумать свои опознавательные знаки.
• Для проверки отображения картинок на мобильных телефонах поступайте следующим образом: для iOS – выйдя на ресурс из Safari кликните на кнопки «Поделиться», «Домой», если иконка есть, то она выйдет на экране в виде ярлыка. Для Android алгоритмы действий зависят от выбранного браузера. В Яндексе, например, можно нажать на сайте 3 точки справа вверху, далее кликнуть «Добавить ярлык на телефон».

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

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

Важно, чтобы фавикон правильно отображался на ПК, мобильных гаджетах. Для этого рекомендуется руководствоваться рядом технических требований поисковиков.

Яндекс считает лучшими размерами для фавиконов 120х120, 32х32, 16х16 пикселей. Google – 144х144, 96х96, 48х48.

Что касается форматов, то обе платформы приветствуют ICO, SVG, JPEG, безанимационный GIF.

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

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

Существует большой выбор бесплатных инструментов, которые за короткий промежуток времени помогут получить нужный образец, HTML-код для установки. Вот некоторые из них:

• Perfecto Web – русскоязычный сервис, дающий возможность выбрать требуемый размер в ICO.
• Favicon.io – услуга, делающая фавикон из предоставленной картинки в форматах PNG, ICO.
• PR-CY – русскоязычная платформа ориентирована на отслеживание скорости, посещаемости, других показателей с возможностью генерировать фавиконки для различных гаджетов, браузеров. Предлагаются различные способы загрузки картинок.
• Favicon.ico & App Icon Generator – площадка, которая делает иконки 16х16, создает их пакет для использования в браузерах, Андроид, iOS, приложениях Microsoft.

Если вы решили отойти от готовых решений, то свою творческую натуру можно проявить в графических редакторах, например, Фигма, Adobe Photoshop.

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

Благодаря вышеперечисленным сервисам у вас появилась новый элемент. Осталось поместить код на свой проект, чтобы поисковые боты его увидели.

Установка кода на сайт

Картинку необходимо скачать на ПК. Далее:

• Загрузить ее в корневую папку ресурса. Доступ должен выглядеть https://site.ru/favicon.ico;
• Прописать код. Для этого его копируют, вставляют в HTML-код между <head>…</head>;
• В коде веб-страницы иногда указываются 2 линка на мини-картинку. Это помогает соответствовать техническим правилам разных поисковиков;
• Следующий шаг – загрузка страницы, чтобы убедиться, что фавикон отображается во вкладке.

Проверка отображения фавикона и его редактирование

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

• Сверьте параметры своего элемента с правилами поисковых роботов;
• Проверьте в директории проекта корректность переноса значка;
• Убедитесь, что верно показаны путь, формат;
• Посмотрите, доступен ли фавикон по его прямому линку. В этом поможет сервис «Проверка ответа сервера».

Если картинка во вкладках присутствует, но не видится на страницах поиска, то необходимо выждать 2 недели (стандартный период, предусмотренный поисковыми системами).

Если в кодировании были допущены ошибки, то рекомендуется открыть файл с фавиконом, чтобы внести соответствующие правилам поисковых машин правки.

Заключение

Если хотите, чтобы мини-логотип компании соответствовал вашим ожиданиям, то

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

Автор: Макхост