En søgning på “faviconstørrelse” giver stadig tjeklister med femten filer fra 2014. I praksis dækker seks størrelser nu browserfaner, søgeresultater, iOS, Android og PWA'er. Her får du dem og forklaringen på hvorfor.
De størrelser, du faktisk har brug for
Hver række svarer til en dokumenteret anvendelse i den foreslåede pakke. Tabellen prioriterer et lille sæt, der fungerer på tværs af systemer, frem for en samling historiske varianter.
| Fil | Mål | Anvendelse |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Faner, bogmærker, ældre browsere, crawlere |
| favicon.svg | vektor, kvadratisk | Moderne browsere, skarpt i alle størrelser, understøtter mørk tilstand |
| favicon-96x96.png | 96×96 | Google-søgeresultater på mobil |
| apple-touch-icon.png | 180×180 | Hjemmeskærm på iOS og iPadOS, uden gennemsigtighed |
| web-app-manifest-192x192.png | 192×192 | Android-hjemmeskærm, angivet i webmanifestet |
| web-app-manifest-512x512.png | 512×512 | PWA-startskærm, “maskable”-versionen |
Derfor ligger 16, 32 og 48 i samme .ico
ICO er et containerformat: én fil kan rumme flere billeder, og browseren vælger det, der passer til visningen. Det er præcis det, du ønsker, fordi den nødvendige størrelse afhænger af sammenhængen.
16×16 bruges til en fane på en almindelig skærm. 32×32 giver en variant til skærme med høj pixeltæthed og andre browsergrænseflader. 48×48 fuldender containeren og følger også Googles dokumenterede regel om multipla af 48 for favicons i søgeresultater.
Den hyppigste fejl er en .ico, der kun indeholder 16×16: på en Retina-skærm forstørres ikonet og ser konstant sløret ud.
180×180 til iOS, 192 og 512 til Android
iOS læser ikke webmanifestet for at finde hjemmeskærmens ikon: det leder efter et apple-touch-icon-tag. Én størrelse på 180×180 er nok og dækker alle nyere iPhones og iPads. Systemet nedskalerer selv billedet til ældre enheder.
Android bruger i stedet webmanifestet. To poster er nok: 192×192 til hjemmeskærmens ikon og 512×512 til startskærmen, når websitet installeres som app. 512-versionen bør angives med purpose “maskable”, hvilket betyder, at tegningen tåler beskæring til en cirkel eller en firkant med afrundede hjørner.
For et maskérbart ikon skal du holde det vigtigste inden for de centrale 80%. Alt udenfor kan blive beskåret afhængigt af telefonproducenten.
Hvilket kildebillede skal du begynde med?
Det bedste udgangspunkt er en SVG: den kan skaleres tabsfrit til alle ovenstående størrelser. Ellers skal du bruge en kvadratisk PNG på mindst 512×512 pixels, så selv Androids startikon dannes ved nedskalering og aldrig ved forstørrelse.
Et vandret logo med tekst fungerer ikke ved 16×16: i den størrelse bliver et ord til tre pixels utydelig grød. Brug symbolet alene, eller begynd med et eller to bogstaver på en kontrastfuld baggrund.
Kontrollér til sidst kontrasten på både lyse og mørke baggrunde: et sort logo forsvinder i en fane med mørkt tema. Det er netop det, SVG-faviconets mørke variant løser.
Størrelser, du ikke længere har brug for
Ældre generatorer laver stadig filer til historiske integrationer, eksempelvis Windows-fliser med mstile-150x150.png og browserconfig.xml. Tilføj dem kun, når din oversigt over understøttede systemer udtrykkeligt omfatter disse grænseflader.
Den lange serie apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 og 152x152 stammer fra en tid, hvor iOS ikke kunne ændre størrelsen. Ét billede på 180×180 erstatter dem alle.
Når du fjerner overflødige angivelser, bliver dit repository og din HTML enklere. Kontrollér dine målgruppers browsere og platforme, før du fjerner en eksisterende integration.
Primære kilder
Ofte stillede spørgsmål
Har man stadig brug for en favicon.ico?
Ja, men kun i websitets rod. Moderne browsere foretrækker SVG, men mange crawlere, aggregatorer og mailprogrammer henter stadig /favicon.ico uden at læse din HTML. Filen fylder få kilobytes: behold den.
Hvilken faviconstørrelse bruger Google i søgeresultater?
Google beder om et ikon med en sidelængde, der er et multiplum af 48 pixels, og viser det typisk i 48×48. En PNG på 96×96 eller en SVG dækker nemt behovet. Ikonet skal kunne crawles og må ikke blokeres af robots.txt.
Kan mit favicon være rektangulært?
Teknisk ja, visuelt nej. Alle visningssammenhænge afsætter et kvadrat: et rektangulært billede bliver enten forvrænget eller centreret med tomme kanter. Begynd altid med et kvadrat, og læg luft omkring symbolet efter behov.