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

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

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

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

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

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

Chrome 73.0.3683.75 — https://support.google.com/chrome/;
Edge 44.17763.1.0 — https://support.microsoft.com/ru-ru/hub/4337664/microsoft-edge-help;
Firefox 65.0.2 — https://support.mozilla.org/ru/products/firefox;
IE 11.379.17763.0 — https://support.microsoft.com/ru-ru/hub/4230784/internet-explorer-help;
Opera 58.0.3135.107 — https://help.opera.com/ru/latest/;
Safari 12.0 — https://support.apple.com/safari;
Яндекс.Браузер 19.3.0.3022 — https://yandex.ru/support/browser/.

Ещё есть возможность добавлять закладки на экран «домой» или «пуск» в 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">

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

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

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