Favicon

det lille bildet en nettleser viser ved siden av en side

Hva det er

Ikonet et nettsted utpeker som sitt eget, heter en favicon, og nettleseren setter det i fanen, i adresselinjen, ved siden av et bokmerke og i historikken. Ordet er en forkortelse for «favorites icon», etter bokmerkemenyen Favorites i Internet Explorer, den første nettleseren som gikk og lette etter et slikt ikon. Det kalles også nettstedsikon eller faneikon, og på engelsk heter flertallet favicons. I HTML deklareres det med et link-element der rel har verdien icon. Eldre HTML-kode skriver shortcut icon, en skrivemåte standarden fortsatt godtar av historiske grunner.

En side kan deklarere flere ikoner samtidig, hvert med en type, en sizes-verdi og en valgfri media-spørring, og nettleseren velger det som passer stedet den tegner. Størrelsene oppgis i enhetspiksler, så 32x32 betyr trettito fysiske punkter, og nøkkelordet any er satt av til et skalerbart format som SVG. Når to kandidater passer like godt, vinner den som er deklarert sist. Deklarerer siden ingen ikoner i det hele tatt, kan en nettleser som henter den over HTTP eller HTTPS, likevel spørre etter /favicon.ico i roten av verten. Det er en vane fra slutten av 1990-tallet, og HTML-standarden skriver den nå ned som tillatt oppførsel.

Filen .ico bak den vanen er en beholder og ikke ett enkelt bilde. Én fil kan romme flere punktgrafikkbilder i ulike størrelser, og nettleseren tar den rammen som passer. Den registrerte medietypen er image/vnd.microsoft.icon. I dag er PNG og SVG de vanlige alternativene, og i prinsippet er ethvert format nettleseren kan dekode, tillatt: en av sidene på dette nettstedet deklarerer en WebP.

Favicon er det minste medlemmet av en familie som lett flyter sammen. Apples ikon for hjemskjermen, apple-touch-icon, er en egen PNG som iOS leter etter under sitt eget navn. En installert webapp henter som regel ikonene sine fra web app-manifestet, bl.a. en «maskable» variant, tegnet med en trygg margin slik at plattformen kan beskjære den til en sirkel eller et avrundet kvadrat. Det store bildet en chatteapp viser når noen limer inn en lenke, er et delingsbilde. Det settes med helt andre tagger, og ingen nettleser bruker det i en fane.

Hvorfor det er viktig

Spørsmålet et team faktisk må ta stilling til, er hvor mange ikonfiler som skal publiseres, hvilken kilde de lages fra, og hvem som holder dem i takt. Det ser ut som en designdetalj. I praksis er det en liten bit infrastruktur som berører hver plattform nettstedet dukker opp på.

Gjenkjenning er den delen en kjøper ser først. Med seksten CSS-piksler i en rad på tjue faner er favicon den eneste delen av merkevaren en leser ser på mens vedkommende jobber et annet sted, og et generisk sidesymbol på den plassen ser ut som et nettsted ingen gjorde ferdig. Det samme ikonet merker bokmerket, oppføringen i historikken og, hos flere søkemotorer, selve søketreffet.

Kostnad og korrekthet er den delen en utvikler ser. Hver flate har sin egen konvensjon: en ICO eller PNG for fanen, en PNG på 180 piksler for Apples hjemskjerm, et sett kvadratiske PNG-filer oppført i manifestet for installasjoner, og en mørk fanelinje der et mørkt merke forsvinner. Snarveien er en favicon-generator som skriver tretti filer og en blokk med HTML-kode til å lime inn. Det virker, men innlimt kode bærer med seg innlimte påstander, og en sizes-verdi som beskriver noen andres filer, er feil fra første dag.

Caching er den delen ingen planlegger for. Nettlesere beholder ikoner langt lenger enn sider, og standarden krever uttrykkelig ikke at de henter et ikon på nytt når listen over deklarerte ikoner endres. Et profilskifte når derfor tilbakevendende besøkende når nettleseren bestemmer det, ikke når nettstedet gjør det. Gjetningen i roten har også en pris: hvert første besøk spør etter /favicon.ico, så et nettsted uten en slik fil skriver en 404 inn i loggene for hver ny leser, og et nettsted bak en innlogging kan svare på gjetningen med en forespørsel om passord.

Hvilket format, da? En SVG er én liten fil som skalerer til hvilken som helst størrelse og kan bytte farger med prefers-color-scheme. En detaljert tegning klarer seg derimot bedre som punktgrafikk, med ICO-filen beholdt for programvare som ikke leser noe annet. De fleste nettsteder trenger både en favicon og et apple-touch-ikon, fordi hver plattform bare leser sitt eget.

Slik ser det ut i praksis

Ikonene på dette nettstedet kommer fra tegninger og ikke fra en generator. Den visuelle identiteten ble bygd fra to håndlagde tegninger, og skript lager alt som avledes av dem: favicon-settet i de nødvendige størrelsene, touch-ikonene og oppstartsbildene i hver enhetsstørrelse. Genereringen er en oppgave hvem som helst kan kjøre. Sjekken for utdaterte ressurser sammenligner commitdatoen til hver avledet ressurs med kildens og feiler når en avledet fil ble committet først, og avledede filer redigeres aldri for hånd. Siden sier selv hva det koster: en hard avhengighet av verktøykjeden.

Kolofonen nevner verktøyene bak den kjeden: Python, som styrer ImageMagick og genererer ikonsettet fra én enkelt tegning av merket.

Nettstedets egne maler viser valgene som fulgte. Hver side deklarerer en PNG på 180 piksler og en ICO med tre rammer på 16, 32 og 48 piksler. Merket i fanen var en gang et kraftig tannhjul, ut fra teorien om at en enkel silhuett klarer seg bedre på seksten piksler enn en detaljert tegning. Vist side om side over en lys og en mørk fanelinje holdt den detaljerte tegningen, og tannhjulet gjorde det ikke, så fanen viser nå en rastergjengivelse av hjernen, tegningen som er selskapets merke. Manifestet oppgir de samme to filene i roten, og ikonsettet i det leses fra disken, fra mappene generatoren skriver til, med hver størrelse hentet fra filnavnet, så en ny størrelse dukker opp i listen uten at noen skriver den inn.

Hvor det går galt

Det gamle ikonet overlever et profilskifte. Nettstedet publiserer en ny fil under samme navn, og tilbakevendende besøkende ser det gamle merket i ukevis, fordi nettleseren har sin egen kopi og ikke skylder siden noen oppdatering. Publiser det nye ikonet under et nytt filnavn, oppdater link-elementene, og behandle /favicon.ico i roten som en reserve som endres sist.

De oppgitte størrelsene beskriver en annen fil. HTML-kode kopiert fra et eksempel oppgir størrelser filen aldri har hatt, og nettleseren velger en kandidat ut fra en falsk påstand og skalerer feil ramme. Manifestet på dette nettstedet sa en gang at ICO-filen hadde sju rammer, mens generatoren skrev tre, og det oppførte en SVG med tre pikselstørrelser, noe en vektorfil ikke har. Skriv sizes ut fra selve filen, eller avled verdien fra det generatoren lager.

En gjettet sti gir noe annet enn et ikon. iOS spør etter /apple-touch-icon.png i roten av en vert når en side ikke deklarerer noe Apple-ikon, og nettlesere gjør det samme med /favicon.ico. På en vert der ukjente stier faller gjennom til en annen applikasjon, får gjetningen en omdirigering, en innloggingsside eller, på en av dette nettstedets sider som serveres fra en annen vert, en 401. Å deklarere ikonet uttrykkelig gjør gjetningen om til en forespørsel etter en fil som finnes.

Merket forsvinner på en mørk fanelinje. En svart logo på gjennomsiktig bakgrunn blir borte når nettleseren tegner fanene sine i mørkegrått. Vis ikonet over både en lys og en mørk fanelinje før du velger det, og gi en SVG-favicon en prefers-color-scheme-regel eller punktgrafikken en egen bakgrunn.

Detaljene flyter ut til grøt på seksten piksler. En hel logo med ordmerke, skalert ned til plassen i en fane, blir en flekk. Test den virkelige størrelsen i en virkelig fane i stedet for designfilen forstørret 800 %, og velg den delen av merket som fortsatt kan leses der.

Les mer

Ordliste