Фавикон (от англ. favicon, сокращение от favorite icon) — это маленькая иконка, которая ассоциируется с веб-сайтом. Обычно его можно увидеть:
во вкладках браузера рядом с названием страницы,
в закладках / списке «Избранного»,
в истории браузера,
в результатах поиска,
как ярлык на мобильном экране или в списке часто посещаемых сайтов.
Если на сайте нет собственного фавикона, браузер ставит стандартную «заглушку» (например, глобус) — и сайт теряется среди множества вкладок.
Основные задачи фавикона
Узнаваемость бренда Фавикон — это мини-версия вашего бренда. Даже при очень маленьком размере он помогает пользователю сразу узнать, что это за сайт.
Навигация в браузере Когда открыто много вкладок, текст названий может не помещаться — по иконкам ориентироваться проще.
Профессиональный вид Сайт выглядит завершённым: у него есть «лицо» в браузере и в закладках. Без фавикона сайт может казаться недоделанным.
Отличие в поисковой выдаче В некоторых поисковых системах и на мобильных устройствах фавикон показывается рядом с результатом — это добавляет визуальный акцент к ссылке.
Технические нюансы: размеры, форматы и подключение
Размеры и форматы
Классический размер фавикона — 16×16 пикселей, иногда 32×32.
Обычно используют форматы ICO, PNG — в ряде случаев SVG также допустим, но не все браузеры его корректно обрабатывают.
ICO-файл может включать несколько иконок разных размеров — браузер выберет оптимальный вариант.
Подключение к сайту Чтобы браузеры «увидели» фавикон, его нужно корректно прописать в HTML-коде, в секции <head>. Например:
Можно также указывать PNG, SVG и другие типы в зависимости от ситуации.
Если не прописывать, браузеры часто пытаются загрузить файл /favicon.ico автоматически.
Как сделать фавикон: практическая инструкция
Упростите логотип В маленьком размере логотип должен быть легко читаемым. Часто берут одну букву, стилизованный символ или минималистичную версию основного логотипа.
Создайте изображение нужного размера и формата Сделайте версии 16×16, 32×32 и, при необходимости, больше — чтобы быть готовым для разных устройств.
Конвертируйте в формат ICO или нужный формат Существует множество генераторов онлайн, которые из PNG или SVG создают ICO-файл.
Разместите файл на сервере и подключите к сайту Поместите файл в корневую папку сайта или в выбранную директорию, а в коде укажите путь.
Проверьте, отображается ли фавикон Очистите кеш браузера — иногда он «не видит» изменения сразу.