Favicon: назначение, форматы и создание¶

Favicon (от англ. favorite icon — «значок для избранного») — это небольшое графическое изображение (значок) веб-сайта, которое отображается браузером рядом с заголовком страницы во вкладке, в списке закладок («избранном»), в истории посещений и на плитках «стартового» экрана при добавлении сайта на рабочий стол устройства. Favicon служит элементом визуальной идентификации ресурса, помогая пользователю быстро находить нужную вкладку среди множества открытых и узнавать сайт в закладках.

¶История появления

Концепция favicon появилась в 1999 году, когда компания Microsoft представила браузер Internet Explorer 5.0. Именно в этой версии впервые была реализована поддержка специального файла favicon.ico, который размещался в корневом каталоге сайта. Браузер автоматически запрашивал файл по стандартному адресу /favicon.ico и отображал его в адресной строке и в меню «Избранное».

Позднее поддержку favicon добавили и другие браузеры — Netscape, Opera, Mozilla Firefox. Однако стандартизация формата произошла лишь в 2022 году, когда спецификация WHATWG (организация, развивающая стандарты HTML) включила favicon в состав HTML Living Standard. До этого момента не существовало единого стандарта, и каждый браузер имел собственные правила отображения и поддержки форматов.

¶Технические аспекты

¶Способы подключения

Существует два основных способа подключения favicon к веб-странице:

Автоматический — размещение файла favicon.ico в корневой директории сайта. Браузеры по умолчанию запрашивают этот файл при загрузке любого ресурса, даже если в HTML-коде нет явного указания на него.
Явный — подключение через HTML-тег <link> с атрибутом rel="icon" в разделе <head> страницы. Этот способ позволяет указать произвольное имя файла, использовать другие форматы изображений и задавать несколько значков для разных условий отображения.

Пример кода подключения:

``html <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> ``

¶Форматы изображений

Изначально favicon поддерживал только формат ICO (Windows Icon). С развитием браузеров список поддерживаемых форматов расширился. Современные браузеры поддерживают следующие форматы:

ICO — классический формат, поддерживается всеми браузерами. Может содержать несколько изображений разных размеров в одном файле.
PNG — растровый формат с поддержкой прозрачности. Широко поддерживается всеми современными браузерами.
SVG — векторный формат, позволяющий масштабировать изображение без потери качества. Поддерживается большинством современных браузеров, но имеет ограничения при использовании в закладках.
GIF — анимированный формат, который поддерживается некоторыми браузерами, но не является рекомендованным для favicon.

¶Размеры

Традиционный размер favicon составляет 16×16 пикселей. Однако современные браузеры и операционные системы требуют изображения больших размеров для различных целей:

16×16 — отображение во вкладках браузера;
32×32 — отображение в панели задач Windows и на плитках «Пуск»;
48×48 — отображение в ярлыках Windows;
57×57 — иконка для устройств Apple (iPhone);
60×60 — иконка для iPad;
72×72 — иконка для iPad Retina;
114×114 — иконка для iPhone Retina;
144×144 — иконка для планшетов Android;
180×180 — иконка для устройств Apple с дисплеями Retina;
192×192 — иконка для Progressive Web Apps (PWA).

Для упрощения задачи разработчики часто используют файл ICO, содержащий несколько размеров, либо подключают несколько файлов PNG через тег <link> с атрибутом sizes.

¶Назначение и функции

Основные функции favicon:

Визуальная идентификация — помогает пользователю быстро находить нужный сайт среди десятков открытых вкладок. Исследования показывают, что узнавание сайта по иконке происходит быстрее, чем по текстовому заголовку.
Брендирование — favicon является миниатюрным логотипом сайта, усиливающим узнаваемость бренда. Многие крупные компании используют упрощённые версии своих логотипов в качестве favicon.
Навигация — значок отображается в адресной строке, закладках, истории посещений, что облегчает ориентацию пользователя в веб-пространстве.
Технические функции — в некоторых браузерах favicon используется для отображения статуса сайта (например, значок с замком для защищённых соединений HTTPS).

¶Создание favicon

Процесс создания favicon включает несколько этапов:

Разработка дизайна — создание упрощённого изображения, которое будет читаемо в маленьком размере. Рекомендуется использовать простые формы, яркие цвета и минимальное количество деталей.
Подготовка изображений — создание версий в различных размерах и форматах. Для этого используются графические редакторы (Adobe Photoshop, GIMP, Figma) или специализированные онлайн-сервисы.
Генерация файла — создание файла ICO, содержащего несколько размеров, либо подготовка отдельных PNG-файлов. Существуют онлайн-генераторы, автоматически создающие полный набор favicon из одного изображения.
Подключение к сайту — размещение файлов на сервере и добавление HTML-кода в шаблоны страниц.

¶Особенности использования

¶Favicon для мобильных устройств

Для корректного отображения сайта на мобильных устройствах при добавлении на главный экран необходимо использовать специальные теги для устройств Apple:

``html <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> ``

Для Android-устройств и Progressive Web Apps используются теги с атрибутом rel="manifest" и файл манифеста веб-приложения.

¶Динамические favicon

Некоторые сайты используют динамические favicon, которые меняются в зависимости от контекста. Например, почтовые сервисы отображают счётчик непрочитанных сообщений на значке, а новостные порталы — актуальную температуру или курс валют. Реализуется это через JavaScript, который изменяет содержимое favicon в реальном времени.

¶Кэширование

Браузеры агрессивно кэшируют favicon, что может создавать проблемы при обновлении дизайна сайта. Пользователи могут продолжать видеть старый значок в течение длительного времени. Для решения этой проблемы разработчики изменяют имя файла или добавляют параметр версии в URL.

¶Проблемы и ограничения

Несмотря на широкую поддержку, favicon имеет ряд ограничений:

Отсутствие поддержки в некоторых контекстах — не все браузеры отображают favicon в адресной строке (например, Chrome на десктопе не показывает иконку в адресной строке для обычных сайтов).
Ограничения формата SVG — несмотря на поддержку в современных браузерах, SVG-favicon не отображается в некоторых контекстах, например, в меню закладок.
Проблемы с прозрачностью — в старых версиях Internet Explorer наблюдались проблемы с отображением прозрачных областей в ICO-файлах.
Различия в отображении — разные браузеры и операционные системы могут по-разному обрабатывать одни и те же файлы, что требует тщательного тестирования.

¶Значение для веб-разработки

Favicon является неотъемлемым элементом современного веб-сайта. Отсутствие favicon приводит к отображению стандартного значка браузера (обычно серого глобуса или буквы), что снижает доверие пользователей к ресурсу и ухудшает пользовательский опыт. Наличие качественного favicon считается одним из признаков профессионально разработанного сайта.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →