Так ли прост 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">
Рекомендую скачать пример с фавиконками рекомендуемых размеров и форматов, а также манифестом и файлом конфигурации, т. к. он значительно нагляднее листинга кода.
Постскриптум
Честно говоря, изначально не было желания глубоко копаться в этой теме. Да и вообще, не думал, что она может быть актуальной, если бы не проблема с Яндексом. Когда всё было в порядке он сообщал, что фавиконки нет на сайте и это нужно срочно исправить. Проблема решилась внезапно и без моего участия, но деваться уже было некуда.
Ссылки по теме
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://www.iana.org/assignments/media-types/image/vnd.microsoft.icon