Црни логотип на провидној позадини изгледа одлично на светлој картици, а на тамној нестаје. ICO формат не може да се прилагоди, али SVG фавикон може: садржи CSS правило које мења боје према теми прегледача.
Проблем: једна датотека, две позадине
Пошто прегледачи прате системску тему, трака картица на истој страници може бити скоро бела код једног посетиоца, а скоро црна код другог. Једнобојни фавикон нацртан за једну постаје нечитљив на другој.
Многи сајтови то решавају непрозирном обојеном позадином иконе. Ради, али икона постаје тешка мрља, док велики брендови користе самосталан симбол без позадине.
Право решење је препустити избор прегледачу, а то је могуће без 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 фавикон мора бити самосталан. Спољни фонт, удаљена слика или скрипта неће се учитати у овом контексту. Текст мора бити претворен у контуре.
Шта тамни режим не обухвата
Тамна варијанта важи за фавикон прегледача на рачунару. Не утиче на икону Apple Touch, која је непроменљив непрозиран PNG, ни на иконе веб манифеста, које Android приказује на сопственој позадини.
Ни подршка није универзална: прегледачи засновани на Chromium и Firefox читају прилагодљиви SVG, док Safari заостаје зависно од верзије. То је прихватљиво, јер је прелазак на .ico аутоматски.
Зато дизајнирајте светлу икону као подразумевани приказ који сваки посетилац може видети, а тамну варијанту као побољшање за прегледаче који је разумеју.
Примарни извори
Честа питања
Може ли favicon.ico подржати тамни режим?
Не. ICO чува фиксне растерске слике без појма теме. Само SVG може садржати медијски упит, па савремени пакет испоручује оба.
Да ли су потребне две SVG датотеке, светла и тамна?
Не, довољна је једна. Обе варијанте су у истом SVG документу, раздвојене медијским упитом prefers-color-scheme, чиме се избегавају додатни захтев и код за откривање теме.
Како испробати приказ тамне теме?
Промените тему оперативног система и поново учитајте картицу. У генератору су светли и тамни приказ картице један поред другог, па нема потребе за сталним пребацивањем.