Фавикон (Favicon) — что это такое

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

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

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

Что такое favicon и откуда появилось название

Слово favicon образовано от английских слов favorite («избранное») и icon («значок»).

Название связано с первоначальным назначением таких иконок. В 1999 году браузер Internet Explorer 5 позволил сайтам использовать файл favicon.ico, который отображался рядом с адресом страницы и в списке избранных сайтов.

Со временем favicon перестал быть только значком для раздела «Избранное». Другие браузеры также начали поддерживать иконки сайтов, а количество мест, где они используются, значительно увеличилось.

Сегодня favicon является стандартным элементом веб-сайта и может отображаться во вкладках браузера, закладках, истории, ярлыках и других элементах операционной системы или браузера.

Где отображается фавикон

Самое привычное место расположения favicon — вкладка браузера. Значок находится рядом с названием открытой страницы.

Однако одна и та же иконка или её специальные версии могут использоваться и в других местах:

• во вкладках браузера;
• в закладках и панели избранного;
• в истории посещений;
• в списке недавно открытых страниц;
• в ярлыках сайта;
• на домашнем экране мобильного устройства;
• в интерфейсах некоторых поисковых систем;
• при установке сайта как веб-приложения.

Конкретное отображение зависит от браузера, операционной системы и настроек сайта.

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

Зачем сайту нужен favicon

Фавикон не влияет непосредственно на функциональность страницы, однако выполняет сразу несколько задач, связанных с восприятием сайта и удобством навигации.

Узнаваемость

Постоянное использование одного визуального символа помогает связать сайт с определённым брендом или сервисом.

Пользователь может запомнить форму и цвет значка и впоследствии быстрее узнавать сайт.

Навигация между вкладками

При работе в браузере пользователь может одновременно держать открытыми десятки страниц. Названия вкладок при этом сокращаются, а иногда практически полностью исчезают.

Favicon помогает визуально найти нужный сайт среди остальных вкладок.

Визуальная идентичность

Фавикон является одним из элементов фирменного стиля наряду с логотипом, цветами, типографикой и другими графическими элементами.

Поэтому при разработке сайта favicon желательно проектировать вместе с остальной визуальной системой.

Завершённость интерфейса

Отсутствие собственного значка может сделать сайт визуально менее проработанным. Вместо фирменной иконки браузер может показать стандартный символ или нейтральный значок документа.

Поэтому favicon обычно рассматривается как небольшой, но обязательный элемент современного сайта.

Каким должен быть хороший favicon

Главная особенность favicon — очень маленький размер отображения.

Изображение, которое хорошо выглядит в логотипе шириной 300 пикселей, может стать совершенно нечитаемым при уменьшении до 16×16 или 32×32 пикселей.

Поэтому хороший favicon обычно обладает несколькими характеристиками.

Простая форма

Чем меньше мелких элементов содержит иконка, тем легче её распознать.

Сложные иллюстрации, тонкие линии и декоративные детали при уменьшении могут сливаться или полностью исчезать.

Хороший контраст

Основной символ должен хорошо отделяться от окружающего пространства.

При проектировании желательно проверить иконку на разных фонах и учитывать, что пользователь может использовать светлую или тёмную тему браузера.

Узнаваемый силуэт

Даже в маленьком размере пользователь должен иметь возможность отличить значок от других.

Для favicon часто используют:

• графический знак логотипа;
• первую букву названия;
• монограмму;
• простой фирменный символ;
• геометрическую форму.

Минимум текста

Полное название компании почти всегда становится нечитаемым при уменьшении.

Поэтому текстовые логотипы обычно упрощают до одной буквы, монограммы или отдельного графического знака.

Favicon не обязательно должен быть просто уменьшенной копией логотипа. Для сложного логотипа часто создаётся отдельная упрощённая версия, адаптированная специально для маленького размера.

Например:

полный логотип → фирменный знак → упрощённый знак → favicon.

Размеры и форматы favicon

Исторически favicon ассоциируется с размером 16×16 пикселей и форматом .ico. Современные сайты могут использовать несколько размеров и форматов иконок для разных устройств и сценариев.

Часто встречаются следующие размеры:

• 16×16 px — небольшое отображение в браузере;
• 32×32 px — более крупный вариант и экраны с высокой плотностью пикселей;
• 48×48 px — дополнительный размер иконки;
• 180×180 px — распространённый размер Apple Touch Icon;
• 192×192 px и 512×512 px — размеры, которые часто используются для иконок веб-приложений.

Для favicon применяются несколько форматов.

ICO

ICO — классический формат favicon. Один ICO-файл может содержать несколько вариантов изображения разных размеров.

Формат появился ещё на ранних этапах развития favicon и до сих пор широко поддерживается браузерами.

PNG

PNG позволяет использовать прозрачность и хорошо подходит для растровых иконок.

Для разных размеров можно подготовить отдельные PNG-файлы.

SVG

SVG — векторный формат, который позволяет сохранять чёткость изображения при изменении размера.

Он особенно удобен для простых геометрических иконок и фирменных знаков. Современные браузеры поддерживают SVG favicon, хотя при разработке сайта могут дополнительно использоваться другие форматы для совместимости и отдельных платформ.

Таким образом, современный сайт может иметь не один файл favicon, а набор связанных иконок для разных устройств и способов отображения.

Как добавить favicon на сайт

Информация о favicon обычно указывается внутри элемента <head> HTML-документа.

Простейший вариант может выглядеть так:

<link rel="icon" href="/favicon.ico">

Для PNG можно дополнительно указать тип и размер изображения:

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

Для SVG:

<link
  rel="icon"
  type="image/svg+xml"
  href="/favicon.svg"
>

На практике набор иконок может быть шире и включать дополнительные файлы для мобильных устройств и веб-приложений.

Например, для устройств Apple может использоваться отдельная иконка:

<link
  rel="apple-touch-icon"
  href="/apple-touch-icon.png"
>

Конкретный набор файлов зависит от требований проекта и устройств, которые необходимо поддерживать.

Типичные ошибки при создании favicon

Одна из самых распространённых ошибок — простое уменьшение сложного логотипа.

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

Есть и другие распространённые проблемы:

• слишком большое количество деталей;
• использование мелкого текста;
• очень тонкие линии;
• недостаточный контраст;
• слишком похожие друг на друга цвета;
• плохая читаемость на светлом или тёмном фоне;
• отсутствие проверки иконки в реальном размере.

Поэтому favicon желательно оценивать не только в увеличенном виде в графическом редакторе.

Иконку необходимо проверить непосредственно в размере 16×16 и 32×32 пикселя, а затем посмотреть, как она выглядит во вкладке реального браузера рядом с другими сайтами.

Favicon и логотип — в чём разница

Фавикон тесно связан с логотипом, но эти элементы выполняют разные задачи.

Если логотип уже состоит из простого узнаваемого символа, его можно использовать в качестве favicon практически без изменений.

Если логотип сложный, для favicon лучше создать специальную адаптированную версию.

Например, у компании может быть горизонтальный логотип:

[символ] Название компании

На сайте он используется полностью, а в favicon остаётся только [символ].

Так сохраняется связь с фирменным стилем, но изображение остаётся различимым даже в очень маленьком размере.