Favicon

25 сентября 2026 · ~14 мин чтения

Favicon

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

История

Всё началось с Microsoft. В марте 1999 года вышел Internet Explorer 5, и в нём появилась новая мелочь: если добавить сайт в «Избранное» (Favorites), рядом с закладкой показывалась иконка сайта. Отсюда и название — favorites icon, сокращённо favicon. Кто конкретно придумал, точно не знаю: в англоязычных источниках встречается имя сотрудника Microsoft Бхарата Шьяма (Bharat Shyam), но проверь это в английской Википедии, статья «Favicon».

Механика у IE5 была максимально простой и, как потом выяснилось, спорной: браузер при добавлении в избранное сам запрашивал файл /favicon.ico в корне сайта. Никакого тега в HTML не требовалось. Формат .ico взяли из Windows: это родной формат иконок программ и ярлыков. Была и побочная польза: по количеству запросов к /favicon.ico в логах сервера владельцы сайтов примерно понимали, сколько людей добавило их в закладки.

Какую проблему решали? В конце 90-х закладки были длинным текстовым списком, а сайты хотели выделяться. Иконка — это брендинг размером 16×16 пикселей.

Вехи дальше:

• Начало 2000-х: другие браузеры (Mozilla, Opera, Safari) подхватили идею, но уже через явный тег <link rel="icon" href="..."> в <head>. Microsoft продвигала вариант rel="shortcut icon". Слово shortcut никогда не было стандартом, но его до сих пор копируют из шаблона в шаблон.
• Вкладки. Когда в середине 2000-х вкладки стали нормой (Firefox, IE7 в 2006-м), фавикон переехал из закладок во вкладку и стал главным способом найти нужную среди двадцати открытых.
• Январь 2008, iOS. Apple добавила «Web Clips» — сохранение сайта на домашний экран iPhone. Для этого понадобилась большая иконка, и появился apple-touch-icon (сейчас рекомендуемый размер 180×180).
• HTML5 (2014 год для W3C Recommendation) узаконил rel="icon" и атрибут sizes, чтобы сайт мог предложить несколько размеров, а браузер выбрал подходящий.
• Web App Manifest (середина 2010-х, Google и PWA): иконки для Android и «устанавливаемых» сайтов теперь описываются в JSON-файле, обычно 192×192 и 512×512.
• SVG-фавиконы. Firefox поддерживает их давно, Chrome — примерно с 2020 года (версия 80). Safari дольше всех держался за растровые форматы и свой mask-icon для закреплённых вкладок.

Сегодня у favicon нет владельца. Это не продукт, а набор договорённостей, частично прописанных в стандарте HTML (WHATWG), частично живущих как обычаи браузеров.

Что это такое

Если отбросить историю, favicon складывается из трёх частей.

Первая — файл. Картинка в одном из форматов:

• ICO: контейнер из мира Windows. Внутри одного .ico может лежать несколько картинок разных размеров (16×16, 32×32, 48×48) — как матрёшка. Изначально внутри были BMP, начиная с Windows Vista можно класть PNG.
• PNG: самый простой вариант, одна картинка одного размера.
• SVG: векторный формат (описание фигур формулами, а не пикселями), одинаково чётко выглядит в любом размере и весит обычно около килобайта.
• GIF, WebP, JPEG: технически возможны, на практике экзотика.

Вторая — способ сообщить, где файл. Либо тег в HTML:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

либо ничего: тогда браузер по старой традиции IE5 сам сходит на /favicon.ico.

Третья — потребители. Фавикон читает не только браузер. Его берут мессенджеры в превью ссылок, поисковики в выдаче (Google показывает фавиконы в мобильной выдаче с 2019 года, Яндекс — давно), агрегаторы закладок, RSS-читалки, менеджеры паролей, даже сканеры безопасности.

Чем отличается от похожих вещей:

• Favicon vs логотип. Логотип — полноценный фирменный знак, часто со словами, горизонтальный, рассчитан на размер от сотни пикселей. Favicon — квадратный знак, который должен читаться в 16×16. Поэтому фавиконом обычно берут только символ из логотипа (букву, фигуру), без текста. Вытянутый логотип в квадрат не влезает.
• Favicon vs apple-touch-icon. Второй — это «фавикон для домашнего экрана»: крупный, без прозрачности (iOS заливает прозрачный фон чёрным или белым), углы скругляет сама система.
• Favicon vs og:image. og:image (протокол Open Graph от Facebook, 2010) — большая картинка-обложка для превью ссылки в соцсетях, обычно 1200×630. Это не иконка, а баннер.
• Favicon vs иконка PWA в манифесте. Манифест нужен, когда сайт притворяется приложением: иконка на рабочем столе Android, заставка при запуске. Манифест дополняет favicon, а не заменяет его.

Аналогии из жизни

Вывеска-значок над дверью магазина. В старых городах над лавками вешали не надписи, а символы: крендель у булочной, ножницы у портного, сапог у сапожника. Прохожий узнавал лавку издали, даже не умея читать. Фавикон делает то же самое среди тридцати вкладок: название уже не помещается, а значок видно.

Где ломается: вывеску вешает сам владелец, и она всегда одна. Фавикон каждый «прохожий» (браузер, мессенджер, поисковик) забирает и перерисовывает сам: один ужмёт до 16 пикселей, другой положит на тёмный фон, третий возьмёт устаревшую копию из своего кэша. У вывески один вид, у фавикона — десяток вариантов, и хозяин сайта контролирует их только частично.

Значок на связке ключей. Чтобы не перебирать одинаковые ключи, на них надевают цветные колпачки: красный от квартиры, синий от гаража. Колпачок ничего не открывает, он помогает найти нужное.

Где ломается: колпачок физически прикреплён к ключу. Фавикон с сайтом связан ссылкой, и связь рвётся: сайт может сменить иконку, а браузер месяцами показывать старую. Или сайт за защитой от ботов вместо картинки отдаёт HTML-страницу с проверкой, и «колпачок» внезапно оказывается пустым.

Эмблема футбольного клуба в турнирной таблице. В приложении с результатами рядом с названием команды стоит крошечный герб. Полная эмблема клуба детализированная, с надписями и годом основания, а в таблице — упрощённый силуэт, иначе в 20 пикселях будет каша.

Где ломается: у клуба есть дизайнеры, которые специально рисуют упрощённую версию. У фавикона часто никто ничего не упрощает: берут большой логотип и сжимают автоматически. Результат — мыльное пятно, где ничего не разобрать. Хорошая аналогия описывает, как должно быть, но не как бывает обычно.

Как это работает

Разберём по шагам, что происходит, когда ты открываешь страницу.

Шаг 1. Браузер загружает HTML и разбирает <head>. Он собирает все <link> с rel="icon", rel="apple-touch-icon" и прочими похожими.

Шаг 2. Выбор кандидата. Если вариантов несколько, браузер выбирает по атрибутам sizes и type. Грубо: для вкладки на обычном экране нужна 16×16, на Retina — 32×32; SVG подходит под всё, если браузер его понимает. Правила выбора у каждого браузера свои, и в спецификации они описаны как рекомендации, а не жёсткий алгоритм. Поэтому в разных браузерах одна и та же страница может показывать разные иконки.

Шаг 3. Фоллбэк (запасной путь). Если тегов нет вообще, браузер делает GET /favicon.ico. Отсюда знаменитые тысячи 404-ошибок в логах nginx у сайтов, которые про фавикон забыли.

Шаг 4. Загрузка и проверка. Браузер скачивает файл и пытается его декодировать. Если вместо картинки пришёл HTML (редирект на страницу логина, заглушка антибот-защиты, страница 404 с кодом 200), иконка не отрисуется, и браузер покажет свою серую «глобус»-заглушку.

Шаг 5. Кэширование. Фавиконы кэшируются агрессивно и отдельно от обычного кэша. В Chrome, например, есть отдельная база Favicons в профиле пользователя. Поэтому смена фавикона — классическая боль: ты поменял файл, а у всех постоянных посетителей недели висит старый. Лечится сменой URL (/favicon.svg?v=2) — тот же приём cache busting, что и для CSS.

Шаг 6. Отрисовка. Браузер масштабирует картинку под место. SVG-фавикон может содержать CSS с @media (prefers-color-scheme: dark) и сам перекрашиваться под тёмную тему — растровый так не умеет.

Отдельная тема — встраивание фавикона прямо в HTML через data URI. Это схема data: (RFC 2397, 1998 год), которая позволяет положить содержимое файла прямо в атрибут:

<img src="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAA..." alt="">

Здесь base64 — способ записать двоичные байты печатными символами (ценой примерно +33% к объёму). И тут есть красивая деталь: любой ICO-файл начинается с байтов 00 00 01 00, а в base64 это всегда превращается в AAABAA. Увидел строку, начинающуюся с AAABAA, — перед тобой иконка Windows. Следующие байты тоже читаются: AAABAAEAEBAA... означает «один образ, ширина 0x10, высота 0x10», то есть 16×16. А если ширина закодирована нулём, это значит 256 пикселей — так ICO обходит то, что под размер отведён всего один байт.

Где встречается в обычной жизни

• Вкладки браузера. Когда у тебя открыто 30 вкладок и названия превратились в «Я...», «Gm...», ты ищешь нужную по цвету значка. Это фавикон.
• Уведомление в значке. Некоторые сайты (почта, мессенджеры в браузере) рисуют на фавиконе красную точку или число непрочитанных. Это JavaScript, который на лету подменяет картинку по <link rel="icon">.
• Сайт на домашнем экране iPhone. «Поделиться → На экран Домой» — и появляется иконка как у приложения. Если сайт не приготовил apple-touch-icon, iOS сделает скриншот страницы или букву на сером фоне.
• Поисковая выдача. Маленькие значки рядом с каждым результатом в Google и Яндексе — это фавиконы сайтов. Google требует, чтобы размер был кратен 48 пикселям, иначе может не показать.
• Превью ссылки в мессенджере. Когда кидаешь ссылку в Telegram, рядом с названием сайта часто стоит его значок — бот мессенджера сходил и забрал его.

Где встречается в IT и бизнесе

• Брендинг и доверие. Сайт с серым глобусом во вкладке выглядит заброшенным. Для лендинга с платным трафиком отсутствующий фавикон — мелкий, но реальный минус к доверию. Нужно, когда: запускаешь любой публичный сайт.
• Витрины партнёров и каталоги. Когда нужно показать список сервисов с иконками (агрегаторы, «где купить», «наши интеграции»), самый дешёвый источник иконки — фавикон сайта. Для этого есть неофициальные сервисы: Google https://www.google.com/s2/favicons?domain=example.com&sz=64 и аналог у DuckDuckGo. Нужно, когда: иконок много, а дизайнера на каждую нет.
• Кибербезопасность и разведка. Поисковик по устройствам Shodan считает хэш фавикона (MurmurHash3 от base64-представления) и позволяет искать все серверы с одинаковой иконкой. Так находят, например, все публично открытые админки одного продукта или фишинговые копии сайта банка. Нужно, когда: ищешь связанные ресурсы по характерному признаку.
• Мониторинг. Запрос к /favicon.ico — лёгкий и почти никогда не требует авторизации, поэтому его иногда используют как простейший health-check (проверку «сайт живой?»). Нужно, когда: нужна дешёвая проверка доступности статики.
• Приватность. В 2021 году исследователи из Университета Иллинойса в Чикаго (Solomos, Kristoff, Kanich, Polakis) показали на конференции NDSS, что через отдельный кэш фавиконов можно построить «суперкуки» — идентификатор, который переживает очистку cookie и режим инкогнито. Браузеры потом это латали. Нужно знать, когда: думаешь о трекинге и о том, что «очистить историю» чистит не всё.

Кто пользуется

Коротко — все. Фавикон есть практически у каждого сайта из верхних миллионов по посещаемости. Точной доли не знаю; оценки, которые попадались, — подавляющее большинство. Поищи отчёт HTTP Archive Web Almanac, там регулярно считают такие вещи.

Интересные случаи:

• Google меняла фавикон несколько раз. Смена на разноцветную «G» в 2015 году широко обсуждалась, а смена иконок Workspace (Gmail, Календарь, Диск) в 2020 году вызвала волну жалоб: все пять иконок стали четырёхцветными, и во вкладках их стало трудно различать. Хорошая иллюстрация того, что фавикон — функциональный элемент, а не только бренд.
• GitHub меняет фавикон вкладки с pull request в зависимости от статуса CI: зелёный, красный, жёлтый. Не открывая вкладку, видишь, упала ли сборка.
• Сервисы-генераторы, например RealFaviconGenerator (realfavicongenerator.net): загружаешь одну картинку и получаешь весь зоопарк размеров и готовый HTML. Им пользуется огромное число веб-разработчиков.
• Tilda, WordPress, Wix и другие конструкторы имеют отдельное поле «загрузить фавикон». Если его не заполнить, часто подставляется иконка самого конструктора — видно, на чём сделан сайт.

Альтернативы и конкуренты

У фавикона нет прямого конкурента — это единственный механизм «значок сайта во вкладке». Зато есть альтернативы для задачи «показать иконку чужого сайта у себя».

• Взять фавикон с сайта (напрямую или через Google s2/favicons).
  Плюс: бесплатно, мгновенно, обычно квадратный и узнаваемый.
  Минус: часто маленький (16–32 px), мыльный на Retina; сервис может закрыть или ограничить доступ; неофициальный Google-эндпоинт не имеет гарантий.
• Официальный логотип из пресс-кита / брендбука.
  Плюс: правильные цвета, векторный, легально.
  Минус: часто горизонтальный с текстом — в квадратную иконку не влезает без переделки; пресс-кит есть далеко не у всех.
• Нарисовать плашку-монограмму (первая буква на фирменном цвете).
  Плюс: ноль внешних зависимостей, единый стиль всех иконок, весит байты.
  Минус: хуже узнаётся, это не настоящий знак бренда.
• Платные API логотипов (Clearbit Logo API был популярен, после покупки Clearbit компанией HubSpot в 2023 году его условия менялись — проверь актуальный статус; есть и другие, например Brandfetch).
  Плюс: логотипы в хорошем разрешении по домену, одним запросом.
  Минус: зависимость от внешнего сервиса, лимиты, возможная платность.

Когда НЕ стоит использовать

• Не встраивай большие иконки через base64 в HTML, который часто меняется, потому что они не кэшируются отдельно: при каждом изменении страницы пользователь перекачивает и картинки, а base64 раздувает их на треть. Встраивание оправдано для нескольких маленьких иконок по 1–3 КБ, где экономия на лишних HTTP-запросах важнее.
• Не делай фавиконом вытянутый логотип с надписью, потому что в 16×16 текст превратится в серую полоску. Лучше отдельный упрощённый знак или буква.
• Не подтягивай чужие фавиконы «на лету» в продакшене с чужого домена, потому что ты ставишь внешний вид своей страницы в зависимость от чужого сервера: он поменяет иконку, упадёт или включит антибот-защиту — и у тебя на странице битая картинка. Надёжнее один раз скачать, проверить и хранить у себя.

Связанные понятия

• ICO — формат-контейнер иконок Windows, где в одном файле лежит несколько размеров.
• Data URI — схема data:, позволяющая встроить содержимое файла прямо в HTML или CSS (RFC 2397).
• Base64 — кодирование двоичных данных печатными символами ASCII с ростом объёма примерно на 33%.
• Web App Manifest — JSON-файл, описывающий сайт как устанавливаемое приложение: имя, иконки, цвета, режим запуска.
• Open Graph — протокол метатегов (og:title, og:image) для красивых превью ссылок в соцсетях и мессенджерах.
• SVG — векторный формат изображений на XML, идеальный для иконок, которые должны быть чёткими в любом размере.

Литература и источники

• Wikipedia, статья «Favicon» (en): https://en.wikipedia.org/wiki/Favicon — история, таблицы поддержки форматов в браузерах.
• Спецификация HTML (WHATWG), раздел про rel="icon": https://html.spec.whatwg.org/multipage/links.html#rel-icon — как браузер должен выбирать иконку.
• MDN Web Docs, «Web app manifests» и «link types»: https://developer.mozilla.org/ — практичная документация с примерами.
• RFC 2397 «The "data" URL scheme» (Larry Masinter, 1998): https://www.rfc-editor.org/rfc/rfc2397 — короткий и читабельный.
• Статья Andrey Sitnik (Evil Martians) «How to Favicon in 2021» (en) — искать в Google по «evilmartians how to favicon». Лучшее практическое руководство о том, какой минимальный набор файлов нужен сегодня.
• Solomos K. et al., «Tales of Favicons and Caches: Persistent Tracking in Modern Browsers», NDSS 2021 (en) — искать по названию, PDF есть на сайте конференции.

Где встретилось у меня

Вчера в проекте сайта по недвижимости собирали блок «партнёрские ресурсы»: нужно было найти иконки нескольких сервисов, скачать их фавиконы и логотипы, встроить часть из них как base64 прямо в шаблон и сделать запасные плашки-монограммы. Один из сайтов за антибот-защитой вместо иконки отдал HTML. Отдельно обсуждали, как вытянутые логотипы поведут себя в квадратной ячейке 26×26 (object-fit: cover против contain).

Краткое резюме

• Favicon — маленькая иконка сайта; придуман Microsoft в IE5 (1999), изначально это был файл /favicon.ico в корне сайта.
• Сегодня это набор файлов: SVG/PNG для вкладок, favicon.ico для совместимости, apple-touch-icon для iPhone, иконки в манифесте для Android.
• Браузер ищет иконку по <link rel="icon">, а если тега нет — сам идёт на /favicon.ico; кэширует долго, поэтому при смене меняй URL.
• Фавикон — квадратный упрощённый знак, а не логотип; вытянутый логотип в него не влезает.
• Скачивая чужие иконки, проверяй, что пришла картинка (file, магические байты), а не HTML-заглушка защиты, и храни у себя, а не тяни с чужого домена.