Favicon

det lille billede en browser viser ved en side

Hvad det er

Et favicon er det ikon, et websted udpeger som sit eget, så browseren kan sætte det i fanen, i adresselinjen, ud for et bogmærke og i historikken. Navnet er en sammentrækning af det engelske »favorites icon«, efter bogmærkemenuen i Internet Explorer, som var den første browser, der ledte efter et. I bestemt form hedder det faviconet, i flertal favicons, og i daglig tale siges også faneikon. I HTML erklæres det med et link-element, hvis rel er icon; ældre markup skriver shortcut icon, og den stavemåde godtager standarden stadig af historiske grunde.

En side kan erklære flere på én gang, hver med en type, en sizes-værdi og eventuelt en media-forespørgsel, og browseren vælger det, der passer til det sted, den tegner. Størrelserne angives i enhedspixel, så 32x32 betyder 32 fysiske punkter, og nøgleordet any er forbeholdt et skalerbart format som SVG. Står to kandidater lige, vinder den, der er erklæret sidst. Erklærer siden slet intet ikon, må en browser, der har hentet den over HTTP eller HTTPS, alligevel spørge efter /favicon.ico i roden af værten: en vane fra slutningen af 1990’erne, som HTML-standarden i dag skriver ned som tilladt adfærd.

.ico-filen bag den vane er en beholder og ikke ét enkelt billede. Én fil kan rumme flere bitmaps i forskellige størrelser, og browseren tager den ramme, der passer; den registrerede medietype er image/vnd.microsoft.icon. I dag er PNG og SVG de almindelige alternativer, og i princippet er ethvert format, browseren kan afkode, tilladt: en af dette websteds egne sider erklærer et WebP.

Faviconet er det mindste medlem af en familie, som er let at blande sammen. Apples ikon til hjemmeskærmen, apple-touch-icon, er en separat PNG, som iOS leder efter under sit eget navn. En installeret webapp henter som regel sine ikoner fra web app-manifestet, inklusive en »maskable« variant, der er tegnet med en sikker margen, så platformen kan beskære den til en cirkel eller en afrundet firkant. Det store billede, en chatapp viser, når nogen indsætter et link, er et delingsbillede, som sættes af helt anden markup, og som ingen browser bruger i en fane.

Hvorfor det betyder noget

Den beslutning, et team reelt står over for, er, hvor mange ikonfiler der skal udgives, ud fra hvilken kilde, og hvem der holder dem i takt. Det ligner en designdetalje. I praksis er det et lille stykke infrastruktur, der berører hver platform, sitet optræder på.

Genkendelse er den del, en køber ser først. Ved 16 CSS-pixel i en række på tyve faner er faviconet det eneste stykke af brandet, man kigger på, mens opmærksomheden er et andet sted, og et generisk sidesymbol på den plads ligner et websted, ingen gjorde færdigt. Det samme ikon markerer bogmærket, posten i historikken og hos flere søgemaskiner selve søgeresultatet.

Pris og korrekthed er den del, en udvikler ser. Hver flade har sin egen konvention: en ICO eller PNG til fanen, en PNG på 180 pixel til Apples hjemmeskærm, et sæt kvadratiske PNG’er i manifestet til installation og en mørk fanebjælke, hvor et mørkt mærke forsvinder. Den hurtige vej er en favicongenerator, der skriver tredive filer og en klump markup, man sætter ind. Det virker, men indsat markup bærer indsatte påstande, og en sizes-værdi, der beskriver en andens filer, er forkert fra første dag.

Cachen er den del, ingen planlægger. Browsere gemmer ikoner langt længere end sider, og standarden siger udtrykkeligt, at de ikke er forpligtet til at opdatere et ikon, når listen over erklærede ikoner ændrer sig. Et nyt logo når derfor tilbagevendende besøgende efter browserens tidsplan og ikke sitets. Gættet på roden har sin egen pris: hvert første besøg spørger efter /favicon.ico, så et websted uden den fil skriver en 404 i loggen for hver ny læser, og et websted bag et login kan finde på at svare gættet med en dialog, der beder om adgangskode.

Hvilket format så? En SVG er én lille fil, der skalerer til enhver størrelse og kan skifte farver med prefers-color-scheme. En detaljeret tegning klarer sig til gengæld bedre som raster, med ICO-filen bevaret til software, der kun læser den. De fleste websteder har brug for både et favicon og et apple-touch-ikon, fordi hver platform læser sit eget og lader det andet ligge.

Sådan ser det ud i praksis

Dette websteds ikoner kommer fra tegninger og ikke fra en generator. Den visuelle identitet blev bygget ud fra to håndlavede tegninger, og skripter frembringer alt, der afledes af dem, herunder favicon-sættet i de krævede størrelser og berøringsikonerne. Frembringelsen er en opgave, enhver kan køre. Et forældelsestjek sammenligner ændringstidspunktet for hvert afledt aktiv med kildens og fejler, når en afledt fil er ældre, og afledte filer redigeres aldrig i hånden. Siden nævner selv prisen: en hård afhængighed af værktøjskæden.

Kolofonen nævner værktøjerne bag den rørledning: Python, der styrer ImageMagick og genererer ikonsættet ud fra én tegning af mærket.

Sitets egne skabeloner viser de valg, der fulgte. Hver side erklærer en PNG på 180 pixel og en ICO med tre rammer på 16, 32 og 48 pixel. Fanemærket var engang et fedt tandhjul, ud fra teorien om, at en enkel silhuet klarer sig bedre ved 16 pixel end en detaljeret tegning. Vist side om side over en lys og en mørk fanebjælke holdt den detaljerede tegning, og tandhjulet gjorde ikke, så fanen viser nu en rastergengivelse af hjernen, det mærke, sitet bruger overalt. Manifestet lister de samme to rodfiler, og dets ikonsæt læses fra disken i de mapper, generatoren skriver til, med hver størrelse aflæst af filnavnet, så en ny størrelse dukker op i listen, uden at nogen taster den ind.

Hvor det går galt

Det gamle ikon overlever et nyt logo. Sitet udgiver en ny fil under det samme navn, og tilbagevendende besøgende ser det gamle mærke i ugevis, fordi browseren har sin egen kopi og ikke skylder siden en opdatering. Udgiv det nye ikon under et nyt filnavn, ret link-elementerne, og behandl /favicon.ico i roden som en reserve, der skiftes til sidst.

De erklærede størrelser beskriver en anden fil. Markup kopieret fra et eksempel lister størrelser, filen aldrig har rummet, og browseren vælger en kandidat på et falsk grundlag og skalerer den forkerte ramme. Dette websteds manifest sagde engang, at dets ICO rummede syv rammer, hvor generatoren skrev tre, og listede en SVG med tre pixelstørrelser, som en vektorfil slet ikke har. Skriv sizes ud fra selve filen, eller afled værdien af generatorens output.

Et gættet stinavn svarer med noget andet end et ikon. iOS spørger efter /apple-touch-icon.png i roden af en vært, når en side ikke erklærer et Apple-ikon, og browsere gør det samme med /favicon.ico. På en vært, hvor ukendte stier falder igennem til en anden applikation, får gættet en omdirigering, en loginside eller, på en af dette websteds sider, der serveres fra en anden vært, en 401. Når ikonet erklæres eksplicit, bliver gættet til en forespørgsel efter en fil, der findes.

Mærket forsvinder på en mørk fanebjælke. Et sort logo på gennemsigtig baggrund går i ét med fanerne, når browseren tegner dem i mørkegrå. Vis ikonet over både en lys og en mørk bjælke, før det vælges, og giv et SVG-favicon en regel for prefers-color-scheme eller rasterbilledet sin egen baggrund.

Detaljerne bliver til grød ved 16 pixel. Et helt logo med ordmærke, skaleret ned til en faneplads, bliver en plet. Afprøv den rigtige størrelse i en rigtig fane frem for designfilen i 800 %, og vælg den del af mærket, der stadig kan læses dér.

Læs mere

Ordliste