En svart logo på gjennomsiktig bakgrunn ser perfekt ut i en lys fane og forsvinner i en mørk. ICO-formatet kan ikke tilpasse seg, men et SVG-favicon kan: det inneholder en CSS-regel som bytter farger etter nettleserens tema.
Problemet: én fil, to bakgrunner
Når nettlesere følger systemtemaet, kan fanelinjen være nesten hvit for én besøkende og nesten svart for en annen på samme side. Et ensfarget favicon utformet for den ene bakgrunnen blir uleselig på den andre.
Mange nettsteder omgår dette ved å gi ikonet en ugjennomsiktig farget bakgrunn. Det fungerer, men ikonet blir en tung fargeflekk, mens store merkevarer holder seg til et frittstående symbol.
Løsningen er å la nettleseren velge. Det er mulig uten JavaScript eller gjenkjenning på serveren.
Slik fungerer en tilpasningsdyktig SVG
En SVG-fil er et dokument, ikke et flatt bilde. Den kan inneholde et style-element og dermed mediespørringer. En prefers-color-scheme: dark-regel i filen endrer fyllfargen til vektorbanene når nettleseren bruker et mørkt tema.
I praksis angir SVG-filen en standardfarge for lyst tema, og deretter en regel som erstatter den i mørk modus. Nettleseren velger riktig farge ved visning og oppdaterer fanen straks den besøkende bytter tema.
Den samme mekanismen kan gjøre mer enn å invertere farger. Du kan vise en helt annen tegning, for eksempel et frittstående symbol i lys modus og et fylt merke i mørk modus.
Angi SVG sammen med .ico
Angi SVG-filen med link rel="icon" type="image/svg+xml" href="/favicon.svg". Nettlesere som støtter den, foretrekker den fremfor andre formater. De andre bruker favicon.ico i rotmappen som reserve.
Du trenger altså ikke å fjerne noe. Begge filene kan eksistere samtidig og dekke ulike klienter. Dette er progressiv forbedring brukt på et ikon på 32 piksler.
Et forbehold: en SVG brukt som favicon må være selvstendig. Eksterne skrifttyper, eksterne bilder og skript lastes ikke inn i denne sammenhengen. Tekst må konverteres til konturer.
Hva mørk modus ikke dekker
Den mørke varianten gjelder faviconet i nettleseren på datamaskiner. Den påvirker ikke Apple Touch-ikonet, som er en fast PNG uten gjennomsiktighet, eller webmanifestikonene, som Android viser på sin egen bakgrunn.
Støtten er heller ikke universell. Chromium-baserte nettlesere og Firefox leser tilpasningsdyktige SVG-filer, mens Safari varierer med versjonen. Det går fint, siden .ico-filen brukes automatisk som reserve.
Utform derfor det lyse ikonet som standardvarianten alle besøkende kan se. Se på den mørke varianten som en forbedring for nettlesere som støtter den.
Primærkilder
Vanlige spørsmål
Kan favicon.ico håndtere mørk modus?
Nei. ICO-formatet lagrer faste rasterbilder uten informasjon om tema. Bare SVG kan inneholde en mediespørring. Derfor inneholder et moderne sett begge formatene.
Trenger du to SVG-filer, én lys og én mørk?
Nei, én fil er nok. Begge variantene ligger i samme SVG og skilles med mediespørringen prefers-color-scheme. Da slipper du en ekstra forespørsel og kode for å oppdage temaet.
Hvordan tester du visningen med mørkt tema?
Bytt tema i operativsystemet og last fanen på nytt. I generatoren vises lyse og mørke faner side om side, slik at du slipper å bytte frem og tilbake.