Фавикон

Фавикон (favicon) — это небольшая иконка, которая отображается на вкладке браузера рядом с названием страницы или сайта. Данный графический элемент помогает пользователям быстрее идентифицировать веб-ресурс среди множества открытых вкладок или закладок.

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

Примеры фавиконов

Зачем нужен фавикон

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

Зачем нужен фавикон

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

• узнаваемость бренда. Когда у сайта есть уникальный фавикон, пользователи быстрее запоминают его и ассоциируют с брендом;
• легкость навигации. Если у пользователя открыто много вкладок, фавикон помогает ему быстрее найти нужную среди множества других;
• повышение доверия. Сайты без фавиконов часто выглядят незавершенными, что может вызвать недоверие у посетителей. Добавление этого элемента делает ресурс профессиональнее;
• индивидуальность и стиль. Фавикон — это возможность добавить на сайт уникальный элемент, отражающий индивидуальность и подчеркивающий стиль.

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

Чтобы добавить фавикон на сайт, выполните следующие шаги:

1. создайте или выберите иконку. Вы можете создать фавикон самостоятельно в графических редакторах, например Adobe Photoshop или Figma, или воспользоваться онлайн-генераторами. Форматы файла могут быть ICO (поддерживается всеми браузерами), PNG или JPG (если нужно улучшенное качество изображения или поддержка масштабируемости);

2. сохраните файл фавикона. После создания сохраните файл под названием favicon.ico или используйте другой подходящий формат. Поместите файл в корневую папку сайта, например www.yoursite.com/favicon.ico;

3. добавьте код в HTML страницы. Чтобы браузеры могли обнаружить фавикон, необходимо добавить его в заголовок страницы. В HTML-файле это выглядит следующим образом:

Если вы используете другой формат файла, укажите соответствующий тип. Например, для PNG:

4. проверьте работу фавикона. После добавления иконки на сайт обновите страницу и проверьте, отображается ли фавикон в браузере. Иногда может потребоваться очистка кэша, чтобы изменения вступили в силу;

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