Содержание
Что такое 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 несколько:
- Повышение узнаваемости сайта и компании. Уникальный, запоминающийся значок позволяет пользователю быстрее найти ваш сайт среди множества вкладок, открытых в браузере, или среди сайтов в поисковой выдаче.
- Рост посещаемости сайта из поисковых систем (SEO). За счет яркого, броского значка, отображающегося напротив вашего сайта в поисковой выдаче, большее количество пользователей будут обращать внимание именно на ваш сайт, а не на соседей по выдаче, и кликать на него.
- Повышение CTR в контекстной рекламе на поиске. Идея та же: благодаря привлекающему внимание значку больше пользователей кликают именно по вашему объявлению. Вы получаете больше переходов на сайт, растет CTR объявлений, снижается стоимость перехода.
- Имидж. Само по себе отсутствие favicon или наличие стандартной картинки от CMS-системы показывает, что компания не сильно следит за сайтом, или же ее подрядчик по техподдержке/продвижению сайта недобросовестно исполняет свои функции.
Apple Touch Icons
В Apple iOS есть функция добавления иконки сайта на экран. В этом случае ваш сайт будет отображаться на рабочем столе наряду с остальными мобильными приложениями, а иконкой для сайта послужит как раз apple touch icon.
Рекомендуемые размеры Apple Touch icon (px)
Устройство | App Icon | AppStore Icon | Spotlight | Settings |
---|---|---|---|---|
iPhone +6+, 6S+, 7+, 8+, X | 180×180 | 1024×1024 | 120×120 | 87×87 |
iPhone4, 4S, 5, 5C, 5S, 6, 6SE, 6S, 7, 8 | 120×120 | 1024×1024 | 80×80 | 58×58 |
Old iPhones1st, 2nd, 3rd Generation | 57×57 | 1024×1024 | 29×29 | 29×29 |
iPad Pro | 167×167 | 1024×1024 | 120×120 | 58×58 |
Retina iPadsMini 2 & 3, Air, 3 & 4 | 152×152 | 1024×1024 | 80×80 | 58×58 |
Old iPads1, 2, Mini 1 | 76×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