От автора: вы должны использовать SVG-фавикон. Они поддерживаются во всех современных браузерах уже сейчас. Кроме того, вам, вероятно, не нужны все эти ссылки и размеры иконок, которые вы копируете из проекта в проект. Давайте выясним, какой абсолютный минимум нам требуется.
Иконка
Основной иконкой может быть SVG любого размера. Тип type=»image/svg+xml» не нужен.
|
1 |
<link rel="icon" href="favicon.svg"> |
Mask-icon
Для Safari все немного по-другому. Вам нужно добавить mask-icon. Это также SVG, но он должен быть создан в одном цвете и размещен на прозрачном фоне. Браузер добавляет цвет атрибута.
|
1 |
<link rel="mask-icon" href="mask-icon.svg" color="#000000"> |
Сенсорная иконка
Иконка для устройств iOS, а также иконки избранное, новая вкладка и многое другое. Вам нужен только размер 180 x 180, а атрибут sizes лишний.
|
1 |
<link rel="apple-touch-icon" href="apple-touch-icon.png"> |
Manifest
manifest.json предоставляет информацию о вашем веб-приложения или веб-сайте. Эти строки обязательны для прохождения теста Lighthouse. Иконки со ссылками используются Android и Chrome. Самый большой размер 512 x 512 — единственный, который нужен.
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "name": "Starter", "short_name": "Starter", "icons": [{ "src": "google-touch-icon.png", "sizes": "512x512" }], "background_color": "#ffffff", "theme_color": "#ffffff", "display": "fullscreen" } |
Мета theme-color по-прежнему требуется для цвета браузера Android Chrome.
|
1 |
<meta name="theme-color" content="#ffffff"> |
Это все
Вот и все, это все иконки, которые вам нужны для современных браузеров, все остальное не нужно. Можно добавить msapplication-TileImage, если вы хотите иметь другую иконку в плитке Windows , в противном случае используется apple-touch-icon. TileColorНе больше используется.
Все остальное
К сожалению, не все работают в современных браузерах, но это можно легко решить, поместив в корень сайта favicon.ico 32 x 32. Это будет работать везде, даже у вашей бабушки.
Темный режим
Чтобы закончить, вот совет для темного режима. Одним из преимуществ SVG-фавикон является то, что вы можете изменить цвет с помощью CSS. Используя медиа-запрос prefers-color-scheme, цвет иконки меняется для темного или светлого режима пользователя. Этот метод не будет работать с mask-icon, так как цвет находится в атрибуте, но Safari добавляет белый фон, если не хватает контраста.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg xmlns="//www.w3.org/2000/svg" width="16" height="16"> <style> path { fill: #000; } @media (prefers-color-scheme: dark) { path { fill: #fff; } } </style> <path fill-rule="evenodd" d="M0 0h16v16H0z"/> </svg> |
Результат
Вот итоговый результат. Скопируйте это в head сайта и не забудьте поместить в корень favicon.ico.
|
1 2 3 4 5 |
<meta name="theme-color" content="#ffffff"> <link rel="icon" href="favicon.svg"> <link rel="mask-icon" href="mask-icon.svg" color="#000000"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="manifest" href="manifest.json"> |
Автор: Antoine Boulanger
Источник: //medium.com
Редакция: Команда webformyself.
