Главная » Статьи » Вы уже используете SVG-фавикон? Руководство для современных браузеров

Вы уже используете SVG-фавикон? Руководство для современных браузеров

Вы уже используете SVG-фавикон? Руководство для современных браузеров

От автора: вы должны использовать SVG-фавикон. Они поддерживаются во всех современных браузерах уже сейчас. Кроме того, вам, вероятно, не нужны все эти ссылки и размеры иконок, которые вы копируете из проекта в проект. Давайте выясним, какой абсолютный минимум нам требуется.

Вы уже используете 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">

Сенсорная иконка

Иконка для устройств iOS, а также иконки избранное, новая вкладка и многое другое. Вам нужен только размер 180 x 180, а атрибут sizes лишний.

<link rel="apple-touch-icon" href="apple-touch-icon.png">

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 по-прежнему требуется для цвета браузера Android Chrome.

<meta name="theme-color" content="#ffffff">

Это все

Вот и все, это все иконки, которые вам нужны для современных браузеров, все остальное не нужно. Можно добавить msapplication-TileImage, если вы хотите иметь другую иконку в плитке Windows , в противном случае используется apple-touch-icon. TileColorНе больше используется.

Все остальное

К сожалению, не все работают в современных браузерах, но это можно легко решить, поместив в корень сайта favicon.ico 32 x 32. Это будет работать везде, даже у вашей бабушки.

Вы уже используете SVG-фавикон? Руководство для современных браузеров

Темный режим

Чтобы закончить, вот совет для темного режима. Одним из преимуществ 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>

Вы уже используете 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">

Автор: Antoine Boulanger

Источник: https://medium.com

Редакция: Команда webformyself.