Як застосовувати SVG-favicon?

18.06.20. Час прочитання - 4 хв

Іконки — це один з невіднятних елементів додатків та вебсайтів. SVG-favicon підтримуються у всіх сучасних браузерах. Тож давайте розберемо як їх застосувати у Вашому проєкті.

Іконка

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

Сенсорна іконка

Сенсорною іконкою є іконки для девайсів iOS, іконки для відділу "улюблене", нова вкладка та інші. Для таких іконок атрибут sizes не потрібен, тому що Вам потрібен лише розмір 180 х 180.

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

Manifest

manifest.json надає інформацію про Ваш додаток або вебсайт. Іконки з посиланнями використовуються для 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, як і раніше потрібен для позначення кольору браузера Android Chrome.

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

Це все

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

На жаль, не всі іконки працюють в сучасних браузерах, але це можна з легкістю вирішити, розмістивши в корені сайту favicon.ico 32 x 32. Тоді вони працюватимуть скрізь, навіть у Вашої бабусі.

Темний режим

Темний режим — улюблений для багатьох юзерів, тож ловіть пораду. Однією з переваг SVG-favicon є те, що Ви можете змінити колір за допомогою CSS. Використовуючи media-request 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">

Дізнатися більше інформації про створення вебсайтів та додатків можна на повноцінному курсі FRONT-END.EDUCATION від CURSOR. Ви отримаєте комплексні знання та можливість навчатися в умовах справжньої командної роботи на проєкті.