Et sort logo på gennemsigtig baggrund ser perfekt ud i en lys fane og forsvinder i en mørk. ICO-formatet kan ikke tilpasse sig, men det kan et SVG-favicon: det indeholder en CSS-regel, som skifter farver efter browserens tema.
Problemet: én fil, to baggrunde
Nu hvor browsere følger systemtemaet, kan fanelinjen være næsten hvid hos én besøgende og næsten sort hos en anden på samme side. Et ensfarvet favicon tegnet til den ene bliver ulæseligt hos den anden.
Mange websites omgår problemet ved at give ikonet en ugennemsigtig, farvet baggrund. Det virker, men ikonet bliver til en tung klods, mens store brands holder sig til et fritstående symbol.
Den rigtige løsning er at lade browseren vælge. Det kan lade sig gøre uden JavaScript og uden registrering af tema på serveren.
Sådan fungerer den tilpasningsdygtige SVG
En SVG-fil er et dokument frem for et fladt billede: den kan indeholde et style-tag og dermed medieforespørgsler. En indlejret regel med prefers-color-scheme: dark ændrer kurvernes udfyldningsfarve, når browseren bruger et mørkt tema.
I praksis angiver SVG-filen en standardfarve til det lyse tema og derefter en regel, der erstatter farven i mørk tilstand. Browseren vælger den rigtige ved visning og opdaterer straks fanen, hvis den besøgende skifter tema.
Mekanismen rækker længere end blot at invertere farver: du kan vise en helt anden tegning, eksempelvis et fritstående symbol i lys tilstand og et udfyldt emblem i mørk tilstand.
Angiv SVG sammen med .ico
Angiv SVG med link rel="icon" type="image/svg+xml" href="/favicon.svg". Browsere, der forstår formatet, foretrækker det frem for alt andet, mens øvrige browsere falder tilbage på favicon.ico i roden.
Du behøver derfor ikke fjerne noget: de to filer lever side om side og dækker hinandens klienter. Det er progressiv forbedring anvendt på et ikon på 32 pixels.
Én vigtig begrænsning: en SVG til favicon skal være selvstændig. En ekstern skrifttype, et eksternt billede eller et script indlæses ikke i denne sammenhæng. Tekst skal omdannes til kurver.
Hvad mørk tilstand ikke omfatter
Den mørke variant gælder faviconet i computerens browser. Den påvirker hverken Apple Touch-ikonet, som er en fast, ugennemsigtig PNG, eller webmanifestets ikoner, som Android viser på sin egen baggrund.
Understøttelsen er heller ikke universel: Chromium-baserede browsere og Firefox læser den tilpasningsdygtige SVG, mens Safari afhænger af versionen. Det er i orden, fordi browseren automatisk falder tilbage på .ico.
Design derfor dit lyse ikon som standardversionen, som alle besøgende kan se, og betragt den mørke variant som en forbedring til browsere, der kan læse den.
Primære kilder
Ofte stillede spørgsmål
Kan favicon.ico håndtere mørk tilstand?
Nej. ICO-formatet gemmer faste rasterbilleder uden kendskab til temaer. Kun SVG kan indeholde en medieforespørgsel, og derfor indeholder det moderne sæt begge formater.
Skal man bruge to SVG-filer, en lys og en mørk?
Nej, én fil er nok. Begge varianter ligger i samme SVG, adskilt af medieforespørgslen prefers-color-scheme, så du undgår en ekstra anmodning og kode til temaregistrering.
Hvordan tester man visningen i mørkt tema?
Skift operativsystemets tema, og genindlæs fanen. I generatoren vises de lyse og mørke faner side om side, så du slipper for at skifte frem og tilbage.