En svart logotyp på genomskinlig bakgrund ser perfekt ut i en ljus flik och försvinner i en mörk. ICO-formatet kan inte anpassa sig, men det kan en SVG-favicon: den innehåller en CSS-regel som byter färger efter webbläsarens tema.
Problemet: en fil, två bakgrunder
När webbläsare följer systemtemat kan flikraden vara nästan vit för en besökare och nästan svart för en annan på samma sida. En enfärgad favicon som utformats för den ena blir oläslig för den andra.
Många webbplatser löser det med en ogenomskinlig färgbakgrund bakom ikonen. Det fungerar, men ger en tung färgklump där stora varumärken använder en frilagd symbol.
Lösningen är att låta webbläsaren välja, och det går utan JavaScript eller detektering på servern.
Så fungerar en anpassningsbar SVG
En SVG-fil är ett dokument, inte en platt bild. Den kan innehålla en style-tagg och därmed mediefrågor. En regel med prefers-color-scheme: dark ändrar banornas fyllnadsfärg när webbläsaren använder ett mörkt tema.
I praktiken anger SVG-filen en standardfärg för ljust tema och därefter en regel som ersätter den i mörkt läge. Webbläsaren väljer rätt färg vid rendering och uppdaterar fliken direkt om besökaren byter tema.
Samma mekanism kan göra mer än att invertera färger. Du kan visa ett helt annat motiv, till exempel en frilagd symbol i ljust läge och ett fyllt märke i mörkt läge.
Deklarera SVG tillsammans med .ico
Deklarera SVG med link rel="icon" type="image/svg+xml" href="/favicon.svg". Webbläsare som stöder formatet föredrar det, medan övriga använder favicon.ico i roten som reserv.
Du behöver alltså inte ta bort något: båda filerna finns sida vid sida och täcker olika klienter. Det är progressiv förbättring tillämpad på en ikon på 32 pixlar.
En begränsning: faviconens SVG måste vara fristående. Externa typsnitt, fjärrbilder och skript laddas inte i det här sammanhanget. Text måste omvandlas till banor.
Vad mörkt läge inte omfattar
Den mörka varianten gäller faviconen i datorns webbläsare. Den påverkar varken Apple Touch-ikonen, som är en fast ogenomskinlig PNG, eller webbmanifestets ikoner som Android visar mot sin egen bakgrund.
Stödet är inte heller universellt. Chromium-baserade webbläsare och Firefox läser anpassningsbar SVG, medan Safari ligger efter beroende på version. Det fungerar ändå eftersom .ico-filen används automatiskt som reserv.
Utforma därför den ljusa ikonen som standard, den som alla besökare kan se, och betrakta den mörka varianten som en förbättring för webbläsare som kan läsa den.
Primärkällor
Vanliga frågor
Kan favicon.ico hantera mörkt läge?
Nej. ICO lagrar fasta rasterbilder utan stöd för teman. Bara SVG kan innehålla en mediefråga, och därför ingår båda i den moderna uppsättningen.
Behövs två SVG-filer, en ljus och en mörk?
Nej, en fil räcker. Båda varianterna finns i samma SVG och skiljs åt med mediefrågan prefers-color-scheme. Det undviker både en extra förfrågan och kod för temadetektering.
Hur testar jag visningen i mörkt tema?
Byt operativsystemets tema och ladda sedan om fliken. I generatorn visas ljusa och mörka flikar bredvid varandra, så du slipper växla fram och tillbaka.