Вы должны использовать favicons в формате SVG. Сейчас они поддерживаются во всех современных браузерах.
Кроме того, вам, вероятно, не понадобятся все эти ссылки на значки и размеры, которые вы копируете из проекта в проект. Давайте узнаем, какой абсолютный минимум требуется.
Icon
Главный значок может быть SVG любого размера. Тип type="image/svg+xml"
не нужен.
<link rel="icon" href="favicon.svg">
Mask icon
Для Safari все немного иначе. Вам нужно добавить mask-icon
. Это тоже SVG, но он должен быть одним цветом и размещен на прозрачном фоне. Браузер добавляет цвет атрибута.
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
Touch icon
Значок для устройств iOS, а также избранное для страницы новой вкладки браузеров и т.д. Вам нужен только размер 180 x 180
, а атрибут sizes
лишний.
Manifest
manifest.json
предоставляет информацию о вашем веб-приложении или вебсайте. Эти строки обязательны для прохождения теста Lighthouse
. Ссылка на значок используется Android
и Chrome
. Нужен только самый большой размер 512 x 512
.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
Мета-тег с theme-color
по-прежнему требуется для браузеров Chrome на Android.
<meta name="theme-color" content="#ffffff">
Готово
Вот и все, это все иконки, которые нужны для современных браузеров, все остальное не нужно. msapplication-TileImage
можно добавить, если вам нужен другой значок в плитках Windows, в противном случае используется иконка apple-touch-icon
. TileColor
больше не используется.
Все остальное
К сожалению, не все используют современные браузеры, НО это можно легко решить, поместив favicon.ico
размером 32 x 32
в корень вашего сайта. Это работает везде, даже у вашей бабушки.
Dark mode
Напоследок совет по темному режиму. Одним из преимуществ значка SVG является то, что вы можете изменить цвет с помощью CSS. Используя медиа-запрос prefers-color-scheme
, цвет вашего значка меняется в зависимости от темного или светлого режима пользователя. Этот метод не будет работать с mask-icon
, так как цвет указан в атрибуте, но Safari добавляет белый фон, если не хватает контраста.
<svg xmlns="http://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 в корне. ✌️
<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">