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

Или же в поисковой выдаче того же Яндекса около названия страницы сайта. Эта иконка сайта называется favicon.

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

Для добавления фавикона на сайт нам понадобится сам файл изображения и одна строка кода в хедере сайта.

Создание favicon-а

Требования к файлу изображения:

• Размер изображения 16х16 пикселей или же 32х32.
• Рекомендованный формат изображения ico (favicon.ico). Проблемой данного формата является то, что он не поддерживается в Photoshop, что может затруднить его создание, если Вы работаете с данной программой, но не стоит огорчаться. Все современные браузеры также поддерживают фавиконы форматов gif и png.

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

• «создать favicon сервис» для создания файла фавикона по пикселям или же с любой Вашей картинки.
• «коллекция favicon» для поиска сайтов с тысячами готовых к употреблению картинок на любой цвет и вкус.

Установка фавикона

Для установки фавикона на сайт достаточно добавить одну строку кода внутрь тега head Вашего сайта:

<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">

Разберем подробно эту строку:

• Атрибут type указывает браузеру на то, какой тип изображения будет использован для генерации фавикона. При использовании файла с расширением ico в нем будет находиться запись «image/x-icon», при gif «image/gif», при png «image/png»,
• rel говорит о том, для каких целей будет использовано изображение подгружаемое на сайт данной строкой кода. В нашем случае именно формулировка «shortcut icon» сообщает о том, что это файл, который должен быть использован для генерации фавикона.
• href сообщает путь к файлу. Обычно favicon ложат в корневую директорию сайта (самая первая папка, в которой содержатся все файлы сайта), этот случай и указан в нашем примере. Если же мы хотим положить его к примеру в папку image, то ссылка будет выглядеть следующим образом: «image/favicon.ico»

Часто задаваемые вопросы

• Обязательно ли файл фавикона должен называться «favicon»? Нет, Вы можете задать ему любое название, значение имеет только расширение и формат используемого изображения.
• Я сделал все, как описано в уроке, в атрибуте href указан правильный путь к файлу соответствующему всем требованиям, в чем может быть проблема? В 99% случаев проблема в кеше браузера. Современные браузеры имеют привычку сохранять страницы, которые Вы недавно посещали, в кеш для ускорения загрузки страницы в дальнейшем, потому проблема решается простой очисткой кеша. В оставшемся проценте тег link, используемый нами в данном уроке, помещают за пределы тега head, потому проверьте, что он у вас находится там, где нужно.