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