SVG favicon

Вы все еще не используете svg для favicon? Самое время исправить эту ошибку

2020-04-23 dr.Brain

время чтения 3 мин.

В настоящее время просто необходимо использовать svg для favicon. Этот формат поддерживается всеми современными браузерами.

Кроме того, даже применяя формат svg для favicon своих сайтов, весьма вероятно, Вам не нужны все эти ссылки, параметры и атрибуты, которые Вы, не задумываясь, копируете из проекта в проект. Давайте определимся с тем абсолютным минимумом, который нужен для корректной работы svg favicon в разлиных браузерах.

Icon

Размер favicon в формате svg не имеет значения. Атрибут type=”image/svg+xml” не является необходимым:

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

Mask icon

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

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

Touch icon

Иконка, которая будет появляться на вкладке браузера или в списке избранного, для iOS устройств, также несколько отличается. Размер картинки может быть только 180x180 пикселей, а атрибут size не нужен:

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

Манифест

manifest.json содержит информацию о веб-приложении или сайте. Без него просто нельзя корректно пройти тестирование сайта в Lighthouse. Ссылки на иконки в этом файле используются в операционной системе Android и браузере Chrome. Максимальный размер изображения составляет 512x512 пикселей.

{
    "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 больше не применяется.

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

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

Dark mode

Наконец, пара слов про dark mode. Возможность менять цвет картинки с помощью CSS - одно из огромных преимуществ формата svg. С помощью media prefers-color-scheme можно устанавливать подходящий цвет favicon для светлой и темной цветовых схем браузеров. К сожалению, этот метод не будет работать с mask-icon, так как в данном случае цвет определяется атрибутом HTML-тега link, но 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>

Результат

А это финальная версия HTML-разметки для svg favicon. Этот фрагмент нужно добавить в <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 “Are you using SVG favicons yet? A guide for modern browsers”.