Что такое favicon

Favicon – это небольшой значок, отображающийся рядом с названием сайта в окне браузера или в выдаче поисковика. Его использование позволяет повысить узнаваемость сайта и CTR в поисковой выдаче. Но по сути, задача фавиконки – просто быть симпатичной.

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

Сложно? Давайте разберёмся, и начнем со стандартных значков Favicons. Возьмём небольшой файл, называемый файлом favicon.ico. Один ICO-файл содержит один значок. Размер значка может быть любым, но наиболее употребимы квадратные значки со стороной 16, 32 и 48 пикселей. Раньше такой файл .ico содержал несколько сжатых .png-файлов в разных размерах (потому что ico использовали для ярлыков на рабочем столе). Начиная с введения атрибутов размеров в HTML5, нам больше не нужно сжимать .png-файлы в формат .ico (даже если браузеры все еще поддерживают .ico). Фавиконки теперь .png.

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

Если у вас есть готовый favicon.ico, вам нужно загрузить его в корневой каталог вашего сайта. Для загрузки можно использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или изходя из ваших собственных настроек. В таком случае лучше проконсультироваться у поставщика услуг хостинга.

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

Зачем нужен favicon

Целей создания favicon несколько:

  1. Повышение узнаваемости сайта и компании. Уникальный, запоминающийся значок позволяет пользователю быстрее найти ваш сайт среди множества вкладок, открытых в браузере, или среди сайтов в поисковой выдаче.
  2. Рост посещаемости сайта из поисковых систем (SEO). За счет яркого, броского значка, отображающегося напротив вашего сайта в поисковой выдаче, большее количество пользователей будут обращать внимание именно на ваш сайт, а не на соседей по выдаче, и кликать на него.
  3. Повышение CTR в контекстной рекламе на поиске. Идея та же: благодаря привлекающему внимание значку больше пользователей кликают именно по вашему объявлению. Вы получаете больше переходов на сайт, растет CTR объявлений, снижается стоимость перехода.
  4. Имидж. Само по себе отсутствие favicon или наличие стандартной картинки от CMS-системы показывает, что компания не сильно следит за сайтом, или же ее подрядчик по техподдержке/продвижению сайта недобросовестно исполняет свои функции.

Apple Touch Icons

В Apple iOS есть функция добавления иконки сайта на экран. В этом случае ваш сайт будет отображаться на рабочем столе наряду с остальными мобильными приложениями, а иконкой для сайта послужит как раз apple touch icon.

Рекомендуемые размеры Apple Touch icon (px)

УстройствоApp IconAppStore IconSpotlightSettings
iPhone +6+, 6S+, 7+, 8+, X180×1801024×1024 120×120 87×87
iPhone4, 4S, 5, 5C, 5S, 6, 6SE, 6S, 7, 8120×120 1024×1024 80×80 58×58
Old iPhones1st, 2nd, 3rd Generation57×57 1024×1024 29×29 29×29
iPad Pro167×167 1024×1024 120×120 58×58
Retina iPadsMini 2 & 3, Air, 3 & 4152×152 1024×1024 80×80 58×58
Old iPads1, 2, Mini 176×76 1024×1024 40×40 29×29

Как создать favicon самостоятельно

В интернете есть множество сервисов, позволяющих создать favicon онлайн. Приведем примеры нескольких, проверенных нами:

favicon-generator.org

Генерирует favicon для Web, Android, Microsoft, и iOS (iPhone and iPad) из загруженного изображения.

favicon.cc

Еще один хороший генератор фавиконок онлайн.

realfavicongenerator.net

Позволяет проверить все версии favicon на сайте. На сайте есть генератор favicon.

Favicon Cheker

Как проверить фавиконку во всех популярных браузерах сразу? Сервис покажет вашу фавиконку сразу в Chrome, Firefox, Safari, включая родные тёмные темы.

Logo Crunch

Большинство генераторов favicon просто делают масштабирование, что приводит к размытым контурам. В идеале нужно создать отдельный логотип для каждого разрешения. Сrunch делает этот процесс намного проще. Он работает с изображениями, градиентами и сложными текстурированными фонами.

Иллюстрация: CHRIS GANNON