[Перевод] Еще не используешь SVG фавиконки?17.04.2021 18:18

f1ea4a182abcb8532871c9c8d5fbf407.png

Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах (Ну почти во всех).

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

6e46b7d7894782e55a2097bc9cdcb356.png

Иконка

Главная фивиконка может быть SVG любого размера. Тип type="image/svg+xml" не нужен.

Маска-иконка

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

Касательная фавиконка (Touch Icon)

Для иконки на IOS девайсах, а также для избранное на странице новой вкладки в браузере. Вам нужен только размер 180 x 180, и атрибут sizes лишний.

Манифест

Файл 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.

Готово

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

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

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

0ec3bd029fadc140ca571a9a7f2042d6.png

Темный режим

В заключение, вот совет по темному режиму. Одним из преимуществ значка SVG является то, что вы можете изменить цвет с помощью CSS. При использовании медиа-запроса prefers-color-scheme цвет вашего значка меняется в зависимости от темного или светлого режима пользователя. Этот метод не будет работать со mask-icon, так как цвет указан в атрибуте, но Safari добавляет белый фон, если контраста недостаточно.
bf19fc53f25641f5b1ec42be08431c80.png

Результат

Вот окончательный результат. Скопируйте его в  вашего веб-сайта и не забудьте разместить favicon.ico в корне.

© Habrahabr.ru