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

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

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

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

Иконка

Основной иконкой может быть SVG любого размера. Тип type=»image/svg+xml» не нужен.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Mask-icon

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

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

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

Manifest

manifest.json предоставляет информацию о вашем веб-приложения или веб-сайте. Эти строки обязательны для прохождения теста Lighthouse. Иконки со ссылками используются Android и Chrome. Самый большой размер 512 x 512 — единственный, который нужен.

Мета theme-color по-прежнему требуется для цвета браузера Android Chrome.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это все

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

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

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

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

Темный режим

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

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

Результат

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

Автор: Antoine Boulanger

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий