А вы уже используете SVG-фавиконки?

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

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

icons

Иконка

Основным значком может быть 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-иконка

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

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

Значение theme-color для тега meta по-прежнему требуется чтобы указать цвет для браузера Chrome Android.

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

Сделано

Вот и все. Это все фавиконки, которые вам нужны для современных браузеров, все остальное не нужно, или не обязательно. Можно добавить msapplication-TileImage, если вы хотите использовать другой значок на “плитках” Windows, по умолчанию будет использован значок apple-touch-iconTileColor больше не используется.

Остальные браузеры

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

icons

Темный режим

На последок, вот совет для темного режима. Одним из преимуществ фавиконки в формате SVG, является то, что вы можете изменить ее цвет с помощью CSS. При помощи медиа-запроса prefers-color-color цвет вашей фавиконки меняется в зависимости от темного или светлого режима включенного у пользователя. Этот метод не работает с 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>
icons

Результат

Вот итоговый результат. Скопируйте это в 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">

0

Автор публикации

не в сети 4 дня

Brama

1 946
Комментарии: 0Публикации: 264Регистрация: 05-12-2019

Оставьте комментарий

Авторизация
*
*



Регистрация
*
*
*
Генерация пароля