Фавикон — иконка сайта¶

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

¶История

Фавикон был впервые введён компанией Microsoft в 1996 году для браузера Internet Explorer 3. Первоначально файл размещался по адресу /favicon.ico в корне домена, и браузер запрашивал его автоматически. Стандарт не был формально закреплён в спецификациях HTML, поэтому долгое время поддержка фавиконов зависела от конкретных браузеров.

В 2003 году консорциум W3C опубликовал рекомендацию, описывающую механизм <link rel="icon"> в HTML, что позволило размещать иконки произвольного формата (PNG, GIF, SVG) и задавать их размеры и тип MIME. Постепенно формат ICO остался преимущественно для старых браузеров, а PNG стал основным для новых.

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

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

Фавикон подключается к веб-странице несколькими способами:

• По умолчанию — браузер запрашивает файл /favicon.ico в корне сайта, если специальные инструкции отсутствуют.
• Через тег <link> — в разделе <head> HTML-документа размещается инструкция вида <link rel="icon" type="image/png" href="/favicon.png">. Поддерживаются атрибуты sizes, type и media.
• Через веб-манифест — в PWA (прогрессивных веб-приложениях) иконки задаются в файле manifest.json в разделе icons.

¶Форматы

¶Размеры

Классический размер фавикона — 16×16 пикселей. Для панелей закладок и высокоточных дисплеев используются размеры 32×32, 48×48, 64×64 и выше. Для iOS-устройств создаются иконки размером 180×180 (Apple Touch Icon), для Android — 192×192 и 512×512 (в манифесте PWA).

¶Применение

Фавикон используется в нескольких контекстах:

• Вкладки браузера — иконка отображается слева от заголовка вкладки.
• Закладки — фавикон помогает визуально отличить закладку одного сайта от другого.
• История браузера — иконка появляется рядом с записями в истории посещений.
• Поисковая выдача — Google и другие поисковые системы могут отображать фавикон рядом с результатом поиска.
• Мобильные устройства — иконка используется на рабочем столе при добавлении сайта в «домашний экран».
• Интерфейсы приложений — RSS-ридеры, агрегаторы новостей и почтовые клиенты показывают фавикон рядом с источником.

¶Создание фавиконов

Для создания фавиконов используются графические редакторы (Adobe Photoshop, GIMP, Figma) или специализированные онлайн-генераторы, которые преобразуют исходное изображение в набор иконок нужных размеров и форматов. При проектировании учитывается, что на размере 16×16 пикселей мелкие детали изображения не читаются, поэтому для фавиконов выбирают простые, узнаваемые символы и высокий контраст.

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

• По данным ряда исследований, более 40% пользователей используют закладки и вкладки с фавиконами для навигации по интернету.
• Некоторые крупные компании меняют фавикон в рамках ребрендинга, что вызывает широкое обсуждение среди пользователей.
• Отсутствие фавикона приводит к запросу несуществующего файла /favicon.ico, что создаёт лишнюю нагрузку на сервер и записывается в логи ошибок 404.

¶Источники

• Спецификация HTML Living Standard, раздел «Link types» (WHATWG)
• Рекомендация W3C «HTML 4.01 Specification», 1999
• Документация Mozilla Developer Network (MDN) по элементу <link>
• RFC 4329: Registration of Media Types for favicons