Een zwart logo op een transparante achtergrond ziet er perfect uit op een licht tabblad, maar verdwijnt op een donker tabblad. Het ICO-formaat kan zich niet aanpassen, een SVG-favicon wel: die bevat een CSS-regel die kleuren wisselt op basis van het browserthema.
Het probleem: één bestand, twee achtergronden
Nu browsers het systeemthema volgen, kan de tabbladbalk voor de ene bezoeker bijna wit zijn en voor een andere bijna zwart, op dezelfde pagina. Een eenkleurige favicon die voor het ene thema is ontworpen, wordt onleesbaar in het andere.
Veel sites omzeilen dit met een ondoorzichtige gekleurde achtergrond. Dat werkt, maar het pictogram wordt een zware vlek, terwijl grote merken juist een vrijstaand symbool gebruiken.
De beste oplossing is de browser laten kiezen. Dat kan zonder JavaScript en zonder detectie op de server.
Hoe de adaptieve SVG werkt
Een SVG-bestand is een document, geen vlakke afbeelding: het kan een style-tag bevatten en dus ook mediaquery's. Een regel prefers-color-scheme: dark verandert de vulkleur van de paden wanneer de browser een donker thema gebruikt.
In de praktijk bevat de SVG een standaardkleur voor het lichte thema en vervolgens een regel die deze in de donkere modus vervangt. De browser past bij de weergave de juiste kleur toe en werkt het tabblad direct bij als de bezoeker van thema wisselt.
Dit mechanisme gaat verder dan kleuren omkeren: je kunt een compleet ander ontwerp tonen, bijvoorbeeld een vrijstaand symbool in de lichte modus en een gevuld embleem in de donkere modus.
De SVG naast de .ico declareren
Declareer de SVG met link rel="icon" type="image/svg+xml" href="/favicon.svg". Browsers die dit ondersteunen, geven er de voorkeur aan. Andere browsers vallen terug op favicon.ico in de hoofdmap.
Je hoeft dus niets te verwijderen: beide bestanden bestaan naast elkaar en bedienen verschillende browsers. Zo pas je progressieve verbetering toe op een pictogram van 32 pixels.
Let wel op: een favicon-SVG moet zelfstandig zijn. Een extern lettertype, een afbeelding op afstand of een script wordt in deze context niet geladen. Tekst moet worden omgezet naar contouren.
Waar de donkere modus niet voor geldt
De donkere variant geldt voor de favicon in desktopbrowsers. Ze heeft geen invloed op het Apple Touch-pictogram, een vaste ondoorzichtige PNG, of op de webmanifestpictogrammen, die Android op zijn eigen achtergrond weergeeft.
De ondersteuning is ook niet universeel: browsers op basis van Chromium en Firefox lezen de adaptieve SVG, terwijl Safari afhankelijk van de versie achterloopt. Dat is geen probleem, omdat automatisch op de .ico wordt teruggevallen.
Ontwerp daarom je lichte pictogram als standaardversie die elke bezoeker kan zien en beschouw de donkere variant als een verfijning voor browsers die deze ondersteunen.
Primaire bronnen
Veelgestelde vragen
Kan favicon.ico omgaan met de donkere modus?
Nee. Het ICO-formaat bevat vaste rasterafbeeldingen en kent geen thema's. Alleen SVG kan een mediaquery bevatten; daarom levert de moderne set beide formaten.
Heb je twee SVG-bestanden nodig, één licht en één donker?
Nee, één bestand volstaat. Beide varianten staan in dezelfde SVG, gescheiden door de mediaquery prefers-color-scheme. Zo zijn geen extra verzoeken of detectiecode nodig.
Hoe test je de weergave in het donkere thema?
Wissel het thema van je besturingssysteem en laad het tabblad opnieuw. In de generator staan de voorbeelden van lichte en donkere tabbladen naast elkaar, zodat je niet steeds hoeft te wisselen.