Фавикон — иконка сайта в браузере¶

Фавикон (favicon, сокращение от англ. favorite icon) — небольшой графический файл, отображаемый в интерфейсе веб-браузера рядом с заголовком вкладки, в адресной строке, в истории посещений, в закладках и в списке открытых вкладок. Стандартная размерность фавикона — 16×16 пикселей, однако современные браузеры и операционные системы поддерживают и другие размеры (32×32, 48×48, 64×64, 180×180 для иконок на устройствах Apple, 192×192 и 512×512 для Android/Chrome). Фавикон служит визуальным маркером сайта, позволяя пользователю быстро идентифицировать вкладку или закладку без чтения текста.

¶История

Практика использования иконок на сайтах восходит к 1995–1996 годам. Первыми фавиконы начали применять поисковые системы и порталы — Yahoo!, Altavista, MSN. В 1996 году компания Microsoft добавила поддержку иконок для закладок в браузере Internet Explorer 3, что сделало формат де-факто стандартом. Изначально файл размещался по фиксированному адресу /favicon.ico в корне домена, без каких-либо объявлений в HTML-разметке.

Официальной спецификацией фавикон долгое время не был: браузеры поддерживали его по соглашению. Стандарт HTML5 и рекомендации консорциума W3C впоследствии закрепили механизм объявления иконки через элемент <link> в секции <head> документа. В 2010-е годы формат эволюционировал: появились манифесты веб-приложений (Web App Manifest), поддержка SVG-иконок, масштабируемые векторные версии.

¶Форматы и размеры

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

• PNG — наиболее распространённый растровый формат с поддержкой прозрачности;
• GIF (простые анимированные или статичные иконки);
• SVG — векторный формат, масштабирующийся под любой размер экрана;
• JPEG — используется редко из-за отсутствия прозрачности.

Рекомендуемые размеры: 16×16 и 32×32 пикселя для вкладок браузера, 48×48 — для десктопных ярлыков, 180×180 — для иконок на экранах устройств Apple (объявляется через apple-touch-icon), 192×192 и 512×512 — для установки сайта как веб-приложения на Android.

¶Размещение в HTML

Стандартный способ объявить фавикон — добавить элемент <link> в секцию <head> HTML-документа:

``html <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> ``

Атрибут rel="icon" указывает на стандартную иконку, rel="apple-touch-icon" — на увеличенную версию для устройств Apple, rel="manifest" — на манифест веб-приложения, где также могут быть перечислены иконки. Если файл не объявлен явно, браузер обращается к /favicon.ico по умолчанию.

¶Роль и значение

Фавикон выполняет несколько функций:

• Идентификация сайта. Визуальный маркер помогает пользователю отличать вкладки друг от друга, особенно при большом их количестве.
• Брендирование. Логотип компании в виде фавикона усиливает узнаваемость бренда в браузере.
• UX-навигация. Наличие иконки в адресной строке, закладках и истории делает интерфейс браузера нагляднее.
• Индикатор безопасности. В некоторых интерфейсах браузера фавикон сопровождает адрес сайта, помогая визуально подтвердить, что открыта нужная страница.

Отсутствие фавикона приводит к ошибке 404 в логах сервера при каждом обращении браузера к /favicon.ico и считается недочётом веб-разработки.

¶Создание

Фавиконы создаются с помощью графических редакторов (Adobe Photoshop, Figma, GIMP, Inkscape) или онлайн-генераторов, которые из одного исходного изображения формируют комплект файлов разных размеров и форматов. При проектировании учитывают: читаемость при маленьком размере, контраст с фоном вкладки (тёмная и светлая темы браузера), поддержку прозрачности.

¶Интересные факты

• Google использует фавикон в поисковой выдаче рядом с адресом сайта — это делает иконку заметным элементом продвижения.
• Анимированные GIF-фавиконы поддерживаются большинством браузеров, хотя в стандартных размерах 16×16 анимация почти незаметна.
• В 2012 году исследование показало, что фавикон повышает доверие пользователей к сайту и улучшает запоминание бренда.

¶Источники

• MDN Web Docs — документация по элементу <link> и иконкам веб-страниц
• W3C — рекомендации по HTML Living Standard
• Google Developers — Web Fundamentals, раздел Progressive Web Apps
• Хабр — статьи о веб-разработке и фавиконах