Чорний логотип на прозорому фоні ідеально виглядає на світлій вкладці та зникає на темній. Формат ICO не може адаптуватися, але фавікон SVG може: він містить правило CSS, яке змінює кольори залежно від теми браузера.
Проблема: один файл, два фони
Тепер, коли браузери дотримуються системної теми, смужка вкладок може бути майже білою для одного відвідувача та майже чорною для іншого на тій самій сторінці. Монохромний фавікон, намальований для одного, стає нечитабельним для іншого.
Чимало сайтів обходять цю проблему, додаючи до іконки непрозоре кольорове тло. Це працює, але створює важку пляму, тоді як великі бренди часто використовують окремий символ на прозорому тлі.
Правильна відповідь — дозволити браузеру вибирати, і це можливо без JavaScript і виявлення на стороні сервера.
Як працює адаптивний SVG
Файл SVG — це документ, а не плоске зображення: він може містити тег стилю, а отже, і медіа-запити. Розміщення правила prefers-color-scheme: dark перевизначає колір заливки шляхів, коли браузер використовує темну тему.
На практиці SVG оголошує колір за замовчуванням для світлої теми, а потім правило, яке замінює його в темному режимі. Браузер застосовує потрібну під час візуалізації та негайно оновлює вкладку, якщо відвідувач змінює тему.
Той самий механізм йде далі, ніж проста інверсія: ви можете подати зовсім інший малюнок, наприклад, вирізаний символ у світлому режимі та заповнений значок у темному режимі.
Оголошення SVG разом із .ico
Оголосіть SVG за допомогою link rel="icon" type="image/svg+xml" href="/favicon.svg". Браузери, які його підтримують, надають йому перевагу, а решта використовують резервний favicon.ico в корені сайту.
Отже, немає чого видаляти: обидва файли співіснують, кожен охоплює клієнтів іншого. Це прогресивне покращення, застосоване до 32-піксельної піктограми.
Одне застереження: фавікон SVG має бути самодостатнім. Зовнішній шрифт, віддалене зображення чи сценарій не завантажуватимуться в цьому контексті. Текст потрібно перетворити на контури.
На що не поширюється темний режим
Темний варіант стосується фавіконки браузера на робочому столі. Це не впливає ні на Apple Touch icon, який є фіксованим непрозорим PNG, ні на значки вебманіфесту, які Android відображає на власному тлі.
Підтримка також залежить від браузера: браузери на основі Chromium і Firefox читають адаптивний SVG, а Safari може відставати залежно від версії. Це прийнятно, оскільки перехід на резервний .ico відбувається автоматично.
Тому світлий варіант має бути основним — тим, який побачить кожен відвідувач. Темний варіант розглядайте як додаткове поліпшення для браузерів, що його підтримують.
Першоджерела
Поширені запитання
Чи може favicon.ico працювати з темним режимом?
Ні. Формат ICO зберігає фіксовані растрові зображення без поняття теми. Тільки SVG може передавати медіа-запит, тому сучасний набір поставляє обидва.
Вам потрібні два файли SVG, один світлий і один темний?
Ні, достатньо одного файлу. Обидва варіанти містяться в одному SVG, розділеному медіа-запитом prefers-color-scheme, що дозволяє уникнути додаткового запиту та коду виявлення.
Як перевірити рендеринг темної теми?
Змініть тему операційної системи та перезавантажте вкладку. У генераторі світла й темна вкладки показані поруч, тож перемикатися між темами для порівняння не потрібно.