Ты уже используешь SVG favicons? Руководство для современных браузеров.

32

Вы должны использовать 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">
 

Оригинальная статья