Регистрация

[Разработка веб-сайтов, CSS, Совершенный код, HTML] Еще не используешь SVG фавиконки? (перевод)

Ответить на тему
Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
17-Апр-2021 15:31
Цитировать


Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах. Кроме того, не нужны все эти ссылки на значки и размеры, которые ты копируешь из проекта в проект. Давайте узнаем, какой абсолютный минимум для этого требуется.
ИконкаГлавная фивиконка может быть SVG любого размера. Тип type="image/svg+xml" не нужен.
<link rel="icon" href="favicon.svg">
Маска-иконкаДля Safari, это слегка иначе. Тебе нужно добавить mask-icon . Это также SVG, но он должен быть одного цвета и расположен на прозрачном фоне. В браузере есть атрибут цвета.
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">
Касательная фавиконка (Touch Icon)Для иконки на IOS девайсах, а также для избранное на странице новой вкладки в браузере. Вам нужен только размер 180 x 180, и атрибут sizes лишний.МанифестФайл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки являются обязательными для прохождения теста Lighthouse.Значок используется Android и Chrome. Нужен только самый большой размер 512 x 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-icon. TileColor больше не используется.Все остальноеК сожалению, не все используют современные браузеры, но это можно легко решить, поместив favicon.ico размером 32 x 32 в корень вашего веб-сайта. Это работает везде, даже у вашей бабушки.
Темный режимВ заключение, вот совет по темному режиму. Одним из преимуществ значка SVG является то, что вы можете изменить цвет с помощью CSS. При использовании медиа-запроса prefers-color-scheme цвет вашего значка меняется в зависимости от темного или светлого режима пользователя. Этот метод не будет работать со 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>

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

 ===========
 Источник:
habr.com
===========
 ===========
 Автор оригинала: Antoine Boulanger
===========Похожие новости: Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_css, #_sovershennyj_kod (Совершенный код), #_html, #_html, #_svg, #_favicon, #_manifest, #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_css, #_sovershennyj_kod (
Совершенный код
), #_html
Профиль  ЛС 
Показать сообщения:     
Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 11:42
Часовой пояс: UTC + 5