Вы должны использовать фавиконки в формате SVG. Они уже поддерживаются во всех современных браузерах.
Кроме того, вам не понадобятся куча ссылок на фавиконки разных размеров, которые вы копируете из проекта в проект. Давайте посмотрим, какой абсолютный минимум требуется сделать.
Иконка
Основным значком может быть 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-иконка
Фавиконка для устройств iOS, а также для избранного в браузере, для новой вкладки и многое другое. Вам нужен только размер 180 х 180, а атрибут размеров, теперь, будет излишен.
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Манифест
Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Он обязателен для успешного прохождения тестирования в Lighthouse. Указанная фавиконка используется для Android и Chrome. Самый большой размер 512 х 512 является единственным необходимым.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}Значение theme-color для тега meta по-прежнему требуется чтобы указать цвет для браузера Chrome Android.
<meta name="theme-color" content="#ffffff">
Сделано
Вот и все. Это все фавиконки, которые вам нужны для современных браузеров, все остальное не нужно, или не обязательно. Можно добавить msapplication-TileImage, если вы хотите использовать другой значок на “плитках” Windows, по умолчанию будет использован значок apple-touch-icon. TileColor больше не используется.
Остальные браузеры
К сожалению, не все пользователи работают в современных браузерах, но это можно легко решить, добавив файл 32 x 32 favicon.ico в корень вашего сайта. Это будет работать везде, даже у вашей бабушки.
Темный режим
На последок, вот совет для темного режима. Одним из преимуществ фавиконки в формате SVG, является то, что вы можете изменить ее цвет с помощью CSS. При помощи медиа-запроса prefers-color-color цвет вашей фавиконки меняется в зависимости от темного или светлого режима включенного у пользователя. Этот метод не работает с 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">