Favicon - что это? - коротко
Favicon — небольшая иконка сайта, отображаемая в закладках, на вкладках браузера и в списке избранного. Она обычно хранится в файле .ico или .png и задаётся в HTML через тег <link rel="icon" href="…">.
Favicon - что это? - развернуто
Favicon — это небольшая иконка, которая отображается рядом с названием сайта в строке браузера, на вкладках, в списке закладок и в некоторых пользовательских интерфейсах. Размеры обычно ограничиваются 16 × 16 px, 32 × 32 px, 48 × 48 px и 64 × 64 px, а современные браузеры поддерживают даже более крупные варианты для экранов с высокой плотностью пикселей.
Иконка формирует визуальное восприятие бренда, позволяя пользователю мгновенно распознать сайт среди множества открытых вкладок. Это небольшое, но заметное средство укрепления узнаваемости и повышения удобства навигации.
Для внедрения favicon необходимо разместить файл в корневом каталоге сайта и добавить в разметку HTML одну из следующих строк:
<link rel="icon" href="/favicon.ico"><link rel="icon" type="image/png" href="/favicon.png"><link rel="apple-touch-icon" href="/apple-touch-icon.png">— для устройств iOS.
Форматы файлов могут быть .ico, .png, .svg, .gif. Формат .ico остаётся совместимым со всеми версиями браузеров, тогда как .svg обеспечивает масштабируемость без потери качества на современных платформах.
Создание favicon обычно начинается с разработки графического образа в векторном редакторе, после чего изображение экспортируется в требуемые размеры и форматы. Существует множество онлайн‑генераторов, которые автоматически формируют набор файлов и нужные ссылки.
Важно помнить о следующих рекомендациях:
- Использовать простой и читаемый символ, который сохраняет свою форму при уменьшении.
- Придерживаться ограниченной палитры цветов, чтобы иконка выглядела чётко на разных фонах.
- Проверять отображение в популярных браузерах (Chrome, Firefox, Safari, Edge) и на мобильных платформах.
- Обновлять favicon при редизайне сайта, чтобы сохранить согласованность бренда.
Наличие favicon положительно сказывается на пользовательском опыте, ускоряя идентификацию сайта и делая его более профессиональным. Это минимальная, но обязательная часть любой веб‑проектной стратегии.