Использование SVG для Favicon: Практическое Руководство

В настоящее время рекомендуется использовать формат SVG для favicon, поскольку он поддерживается всеми современными браузерами. Однако, даже при использовании SVG, не всегда необходимо включать все возможные параметры и атрибуты. Рассмотрим минимальные требования для корректной работы SVG favicon в различных браузерах.

Содержание

Иконка
Масковая Иконка
Иконка для Тач-устройств
Манифест
Дополнительно
На всякий случай
Темная Тема
Финальная Разметка

Иконка

Размер SVG favicon не имеет значения, а атрибут type="image/svg+xml" не обязателен:

<link rel="icon" href="favicon.svg">

Масковая Иконка

Для браузера Safari требуется немного другой подход. В этом случае используется атрибут mask-icon, который позволяет задать одноцветную иконку на прозрачном фоне. Цвет иконки определяется атрибутом color:

<link rel="mask-icon" href="mask-icon.svg" color="#000000">

Иконка для Тач-устройств

Для устройств на iOS используется специальная иконка, отображаемая на вкладках браузера или в списке избранного. Иконка должна иметь размер 180×180 пикселей, атрибут size не требуется:

<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"
}

Для Chrome на Android важен метатег theme-color, который задает цветовую тему браузера:

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

Дополнительно

Для Windows можно задать отдельную иконку с помощью msapplication-TileImage. Если этого не сделать, используется apple-touch-icon. Атрибут TileColor больше не актуален.

На всякий случай

Для поддержки старых браузеров рекомендуется разместить в корне сайта файл favicon.ico размером 32×32 пикселя. Это обеспечит совместимость с любыми устройствами, даже с устаревшими.

Темная Тема

SVG иконки позволяют изменять цвет с помощью CSS, что является их большим преимуществом. С использованием медиа-запроса prefers-color-scheme можно адаптировать цвет favicon для светлой и темной тем браузеров. Однако этот метод не работает для mask-icon, так как цвет задается в атрибуте HTML-тега link. Если иконка не достаточно контрастная, Safari по умолчанию добавит белый фон.

Пример использования SVG с поддержкой темной темы:

<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>

Финальная Разметка

Вот окончательная HTML-разметка для включения SVG favicon на вашем сайте. Этот код следует разместить внутри <head> вашего HTML-документа. Не забудьте также добавить 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">

Таким образом, минимальный набор настроек и файлов обеспечивает корректное отображение иконок на всех платформах и в любых браузерах.