Что такое Favicon и как установить

Так ли прост favicon, как кажется, на первый взгляд? Давайте разбираться.

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

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

Любое изыскание должно быть последовательным, и в данном случае составление списка браузеров и платформ — хорошее начало. К сожалению, придётся проигнорировать браузеры без нормальной страницы поддержки и не пользующиеся популярностью, которую можно проверить в сервисах. https://radar.yandex.ru/browsers и https://www.w3schools.com/browsers/.

После сопоставления всего со всем получился список в алфавитном порядке:

Ещё есть возможность добавлять закладки на экран «домой» или «пуск» в Android, iOS и Windows, поэтому и они будут фигурировать.

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

Crome Firefox IE Edge Opera Safari Яндекс Android iOS Windows
Разрешения
16 × 16 + + + + +
24 × 24 + + + + +
32 × 32 + + + + +
36 × 36 +
48 × 48* + + + + + +
56 × 56 +
57 × 57 + +
60 × 60 + +
64 × 64 + + + + +
70 × 70 +
72 × 72 + +
76 × 76 + +
96 × 96 + + + + +
114 × 114
120 × 120 + + + +
128 × 128 + + + + + +
144 × 144 + + +
150 × 150 +
152 × 152 + +
167 × 167 + +
180 × 180 + +
192 × 192 +
248 × 120 +
248 × 248 +
250 x 120
256 × 256 + + + + +
270 × 270 +
300 x 85 +
310 × 150 +
310 × 310 +
512 × 512 +
558 × 270 +
558 × 558 +
Форматы
ICO + + + + + +
PNG + + + + + + + + +
GIF + + + + + +
JPG + + + + + +
SVG + +
Атрибуты
apple-touch-icon +
icon + + + + +
manifest +
msapplication-square<w>x<h>logo +
msapplication-tileimage +

В общем, получается несколько групп которые следует прокомментировать подробнее.

Chrome, Edge, Firefox, IE и Opera

Актуальные версии Chrome, Edge, Firefox, IE, Opera и Яндекс.Браузера нормально работают по стандарту и некоторые моменты мне показались любопытными:

  • Некогда для нормальной работы favicon в IE рекомендовалось добавлять атрибут rel="shortcut icon", но судя по результатам тестирования теперь достаточно стандартного rel="icon";
  • FireFox единственный поддерживает SVG фавиконки, но отдаёт предпочтение растровым форматам;
  • Все браузеры нормально масштабируют, даже 256 × 256 px;
  • В документациях рекомендуется использовать формат PNG с атрибутами sizes="...", но браузеры за исключением FireFox отдают предпочтение ICO.

Любопытные факты, но как же сделать favicon, на каких форматах и разрешениях остановиться?

Форматы

В любой непонятной ситуации (например, favicon не указан в коде) браузер ищет в корневом каталоге favicon.ico, поэтом его наличие обязательно. Формат PNG фигурирует во всех примерах из документации, что можно считать негласной рекомендацией. Как бы ни был SVG желанным, поддерживается он только FireFox. В общем, выбор за ICO и PNG, всё прочее можно игнорировать.

Атрибуты

Несмотря на то, что актуальные Edge и IE реагируют на атрибут "icon", отказываться от "shortcut icon" не нужно. Во-первых, у некоторых посетителей могут быть устаревшие браузеры, а во-вторых, добавить одно слово не трудно.

В качестве MIME типа для ICO можно использовать image/vnd.microsoft.icon или image/x-icon. Я остановился на image/vnd.microsoft.icon, т. к. он вроде как более официальный, хотя история с регистрацией мутная. Для формата PNG вариант один — image/png.

Размеры

При выборе размеров favicon лучше не впадать в крайности. Хотя разброс разрешений приличный, но даже для PPI ≈ 200 будет достаточно 64 × 64 рх. Следовательно, можно остановиться на значениях 16 × 16, 32 × 32, 64 × 64 пикселей и проигнорировать промежуточные 24 × 24, 48 × 48.

Пример

Как правило этого будет достаточно:

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="shortcut icon" type="image/png" sizes="16x16" href="favicon/png-16.png">
<link rel="shortcut icon" type="image/png" sizes="32x32" href="favicon/png-32.png">
<link rel="shortcut icon" type="image/png" sizes="64x64" href="favicon/png-64.png">

Файл favicon.ico должен содержать изображения аналогичных размеров, но можно пойти дальше, вплоть до 256 × 256 px.

Safari и iOS

По всей видимости в Apple сочли стандартные фавиконки недостаточно amazing для своих устройств и изобрели сразу два велосипеда.

Safari и экран «Домой» в iOS

При создании закладки в Safari или её выносе на экран «Домой» создаётся иконка. По умолчанию она содержит первую букву домена, но может и картинку. У экранов разных устройств PPI отличается, поэтому по аналогии со стандартной фавиконкой нужны несколько ссылок на картинки соответствующих размеров (все приведены в таблице) и в формате PNG.

<link rel="apple-touch-icon" sizes="<размер изображения>" href="<относительный или абсолютный путь>">

На мой взгляд, старые устройства можно проигнорировать, ограничившись 152 × 152 и 180 × 180 пикселей.

По аналогии с favicon.ico, хотя бы одна картинка должна называться apple-touch-icon.png и размещаться в корневом каталоге. В таком случае иконки будут нормально работать, даже если их явно не указывать.

В итоге в блоке <head>…</head> нужно разместить, например:

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

Значения атрибута sizes="..." должны соответствовать реальным размерам изображений.

Safari в macOS

Хорошо это или плохо, но Safari в macOS вообще не использует растровые фавиконки, вместо них маски в формате SVG. Для добавления маски достаточно SVG изображения, ссылки и метатега:

<link rel="mask-icon" color="#<цвет иконки в формате HEX>" href="<относительный или абсолютный путь>">
<meta name="theme-color" content="#<цвет заливки в формате HEX>">

Из SVG берётся только контур, цвет нужно указывать в метатеге. Вот корректный пример:

<link rel="mask-icon" color="#ffcc00" href="/safari-mask/mask-icon.svg">
<meta name="theme-color" content="#f00000">

Яндекс.Браузер

Вместо стандартной фавиконки, в табло Яндекс.Браузера можно вывести логотип, не превышающий следующих размеров:

  • Длинные горизонтальные —300 × 85 px;
  • Короткие горизонтальные — 250 × 120 px;
  • Квадратные — 120 × 120 px.

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

Манифест

Манифест — это файл в формате JSON содержащий:

{
    "api_version": <Номер версии API, текущая 4>,
    "layout": {
        "logo": "<Абсолютный или относительный путь к картинке>",
        "color": "#<Цвет заливки виджета в формате HEX>"
    }
}

Вот пример корректного заполнения:

{
    "api_version": 4,
    "layout": {
        "logo": "/yandex-tableau.png",
        "color": "#ffcc00"
    }
}

В блоке <head>…</head> необходимо указать ссылку на него, например:

<link rel="yandex-tableau-widget" href="manifest.json">

Имя у файла манифеста может быть любым, например, abyrvalg.json.

Метатеги

В четвёртой версии API табло появилась возможность использовать метатег вместо манифеста:

<meta name="yandex-tableau-widget" content="<Абсолютный или относительный путь к картинке>, color=#<Цвет заливки виджета в формате HEX>, feed=<Необязательная ссылка на feed.json>">

Вот пример корректно заполненного:

<meta name="yandex-tableau-widget" content="logo=yandex-logo.png, color=#ffcc00">

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

Работа табло

По заявлениям разработчиков, Яндекс.Браузер загружает манифест раз в сутки, поэтому всё может заработать не сразу. В тесте https://favicon.sielu.ru/yandex.html логотип заработал через несколько часов и как-то нестабильно, несмотря на то, что используется метатег, а не манифест (теоретически должно срабатывать быстрее). Браузеру виднее, остаётся проявить смирение.

Android

Как и в iOS, в Andoid есть возможность добавлять закладки на главный экран. Иконки для закладок задаются с помощью манифеста. Для задания иконки этого будет достаточно:

{
    "name": "<название>",
    "short_name": "<короткое название>",
    "icons": [
        {
            "src": "<абсолютный или относительный путь>",
            "sizes": "<размер изображения>",
            "type": "<MIME тип>"
        }
    ],
    "theme_color": "<цвет темы в формате HEX>",
    "background_color": "<дефолтный цвет страницы в формате HEX>",
    "display": "<browser|fullscreen|minimal-ui|standalone>"
}

На GitHub встречались утверждения, что на некоторых устройствах, цвет темы и страницы работает только при "display": "standalone". Хотя " browser" кажется более подходящим, но выходит, что "standalone" более предпочтительный. А вот пример корректно заполненного манифеста:

{
    "name": "Favicon test",
    "short_name": "Favicon",
    "icons": [
        {
            "src": "/android-icons/icon-144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/android-icons/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Подключается манифест ссылкой в блоке <head>…</head>:

<link rel="manifest" href="<относительный или абсолютный путь>">

Кстати, манифест используется не только Android, рекомендую почитать спецификацию.

Windows

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

Размеры плиток

Плитки могут быть четырёх размеров и для каждого должно быть соответствующее изображение:

  • Мелкий — 128 × 128 px;
  • Средний — 270 × 270 px;
  • Широкий — 558 × 270 px;
  • Крупный — 558 × 558 px.

Доступные размеры плиток зависят от изображений. Например, нет картинки 558 × 270 px и в Пуске нельзя выбрать широкий размер плитки. При желании от некоторых размеров можно отказаться или наоборот сделать под экраны с разным PPI.

Файл конфигурации

Рекомендованное содержимое файла конфигурации в формате XML:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square128x128logo src="абсолютный или относительный путь"/>
      <square270x270logo src="абсолютный или относительный путь"/>
      <wide558x270logo src="абсолютный или относительный путь"/>
      <square558x558logo src="абсолютный или относительный путь"/>
      <TileColor>цвет плитки в формате HEX</TileColor>
    </tile>
  </msapplication>
</browserconfig>

А вот пример корректного составления:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
    <square128x128logo src="/windows-tiles/tile-128x128.png"/>
    <square270x270logo src="/windows-tiles/tile-270x270.png"/>
    <wide558x270logo src="/windows-tiles/tile-558x270.png"/>
    <square558x558logo src="/windows-tiles/tile-558x558.png"/>
    <TileColor>#ffcc00</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Подключается файл с помощью метатега в блоке <head>…</head>:

<meta name="msapplication-config" content="<абсолютный или относительный путь>">

При этом, от мета-тегов всё равно не уйти, т. к. в них задаются названия.

<meta name="application-name" content="<название>">
<meta name="msapplication-tooltip" content="<расширенное название>">

Пример заполнения метатегов ниже.

Метатеги

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

<meta name="application-name" content="<название>">
<meta name="msapplication-tooltip" content="<расширенное название>">
<meta name="msapplication-TileColor" content="<цвет плитки в формате HEX>">
<meta name="msapplication-tileimage" content="<абсолютный или относительный путь>">
<meta name="msapplication-square<ширина>x<высота>logo" content="<абсолютный или относительный путь>">

Для msapplication-tileimage рекомендуются изображений 144 × 144 px. Вот пример корректно заполненных метатегов:

<meta name="application-name" content="Favicon">
<meta name="msapplication-tooltip" content="Favicon Ultimate Test">
<meta name="msapplication-TileColor" content="#ffcc00">
<meta name="msapplication-tileimage" content="/windows-tiles/tile-default.png">>
<meta name="msapplication-square128x128logo" content="/windows-tiles/tile-128x128.png">
<meta name="msapplication-square270x270logo" content="/windows-tiles/tile-270x270.png">
<meta name="msapplication-wide558x270logo" content="/windows-tiles/tile-558x270.png">
<meta name="msapplication-square558x558logo" content="/windows-tiles/tile-558x558.png">

На мой взгляд как-то неэстетично. Зачем указывать размеры в именах если есть атрибуты sizes="…"? Увы, ничего не поделать.

В итоге как же настроить Favicon?

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

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="shortcut icon" type="image/png" sizes="16x16" href="favicon/png-16.png">
<link rel="shortcut icon" type="image/png" sizes="32x32" href="favicon/png-32.png">
<link rel="shortcut icon" type="image/png" sizes="64x64" href="favicon/png-64.png">

<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

<!-- Safari Mask -->
<link rel="mask-icon" color="#ffcc00" href="/safari-mask/mask-icon.svg">
<meta name="theme-color" content="#f00000">

<!-- Yandex Tableau -->
<meta name="yandex-tableau-widget" content="logo=yandex-logo.png, color=#ffcc00">

<!-- Web Manifest -->
<link rel="manifest" href="manifest.json">

<!-- Windows Tiles -->
<meta name="application-name" content="Фавиконка">
<meta name="msapplication-tooltip" content="Ultimate Favicon">
<meta name="msapplication-tileimage" content="/windows-tiles/tile-default.png">>
<meta name="msapplication-config" content="webconfig.xml">

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

Постскриптум

Честно говоря, изначально не было желания глубоко копаться в этой теме. Да и вообще, не думал, что она может быть актуальной, если бы не проблема с Яндексом. Когда всё было в порядке он сообщал, что фавиконки нет на сайте и это нужно срочно исправить. Проблема решилась внезапно и без моего участия, но деваться уже было некуда.

Ссылки по теме

https://w3c.github.io/manifest/

https://www.w3.org/2005/10/howto-favicon

https://developers.google.com/web/fundamentals/app-install-banners/

https://developers.google.com/web/fundamentals/web-app-manifest/

https://developer.android.com/guide/practices/ui_guidelines/icon_design

https://stackoverflow.com/questions/12768128/android-launcher-icon-size

https://developer.mozilla.org/ru/docs/Web/%D0%9C%D0%B0%D0%BD%D0%B8%D1%84%D0%B5%D1%81%D1%82

https://www.emergeinteractive.com/insights/detail/The-Essentials-of-FavIcons

https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/

https://tech.yandex.ru/browser/tableau/doc/dg/concepts/create-widget-docpage/

https://technet.microsoft.com/en-us/windows/dn255024(v=vs.60)

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/dn455106(v=vs.85)

https://answers.microsoft.com/en-us/edge/forum/all/edge-pinned-sites-live-tiles/7934e54b-b631-4b76-9ddf-ec674a689053

https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon

https://realfavicongenerator.net/favicon_checker

Материалы по теме

Международный день борьбы со злоупотреблением наркотическими средствами и их незаконным оборотом

Международный день борьбы со злоупотреблением наркотическими средствами и их незаконным оборотом

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

Международный день семейных денежных переводов

Международный день семейных денежных переводов

С 2018 года, 16 июня отмечается международный день семейных денежных переводов.

Международный день в поддержку жертв пыток

Международный день в поддержку жертв пыток

Ежегодно с 1997 года, 26 июня отмечается Международный день в поддержку жертв пыток.

Бутерброд с хамоном и шпинатом

Бутерброд с хамоном и шпинатом

Инфразвук

Все с детства знают, что птицы низко летают к дождю, а уж если притихли, то не иначе как к грозе. Всё дело в инфразвуке, мы его не слышим, а вот многие животные вполне.

Синичка слушает инфразвук

Ураганы, штормы и землетрясения являются природными источниками и по мере их приближения возрастает низкочастотный гул. Конечно, в силу своих особенностей мы можем только представить это, например, послушав drone doom.

Как-то жутко, но возможно дело привычки.