Søk etter «favicon-størrelse» gir fortsatt sjekklister med femten filer fra 2014. I praksis dekker seks størrelser nå nettleserfaner, søkeresultater, iOS, Android og PWA-er. Her ser du hvilke, og hvorfor.
Størrelsene du faktisk trenger
Hver rad tilsvarer et dokumentert bruksområde i den foreslåtte pakken. Tabellen prioriterer et lite sett som fungerer på tvers av plattformer, fremfor en samling historiske varianter.
| Fil | Mål | Bruksområde |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Faner, bokmerker, eldre nettlesere og søkeroboter |
| favicon.svg | vektor, kvadratisk | Moderne nettlesere, skarpt i alle størrelser, støtter mørk modus |
| favicon-96x96.png | 96×96 | Google-søkeresultater på mobil |
| apple-touch-icon.png | 180×180 | Startskjerm på iOS og iPadOS, uten gjennomsiktighet |
| web-app-manifest-192x192.png | 192×192 | Android-startskjerm, angitt i webmanifestet |
| web-app-manifest-512x512.png | 512×512 | Oppstartsskjerm for PWA, «maskable»-varianten |
Derfor ligger 16, 32 og 48 i samme .ico-fil
ICO er et beholderformat: én fil kan inneholde flere bilder, og nettleseren velger det som passer til visningen. Det er akkurat det du trenger, fordi ønsket størrelse varierer med bruksområdet.
16×16 brukes i faner på vanlige skjermer. 32×32 gir en variant for skjermer med høy pikseltetthet og andre nettleserflater. 48×48 utfyller beholderen og følger også regelen om multipler av 48 som Google dokumenterer for favicon i søkeresultater.
Den vanligste feilen er å levere en .ico-fil som bare inneholder 16×16. På en Retina-skjerm blir ikonet da oppskalert og ser alltid uskarpt ut.
180×180 for iOS, 192 og 512 for Android
iOS leser ikke webmanifestet for å finne startskjermikonet. Det ser etter et apple-touch-icon-element. Én størrelse er nok: 180×180 dekker alle nyere iPhone- og iPad-modeller. Systemet skalerer selv ned bildet for eldre enheter.
Android bruker i stedet webmanifestet. To oppføringer er nok: 192×192 for startskjermikonet og 512×512 for oppstartsskjermen når nettstedet installeres som en app. 512-varianten bør angis med purpose «maskable», som betyr at den tåler å beskjæres til en sirkel eller et avrundet kvadrat.
For et maskérbart ikon bør det viktigste innholdet holdes innenfor de midterste 80 prosentene. Alt utenfor kan bli beskåret, avhengig av telefonprodusenten.
Hvilket kildebilde bør du bruke?
Det beste utgangspunktet er en SVG. Den kan skaleres uten kvalitetstap til alle størrelsene ovenfor. Ellers bør du bruke en kvadratisk PNG på minst 512×512 piksler, slik at også Android-ikonet for oppstartsskjermen lages ved nedskalering og aldri oppskalering.
En vannrett logo med tekst fungerer ikke ved 16×16. Da blir et helt ord til noen få utydelige piksler. Bruk bare symbolet, eller begynn med én eller to bokstaver på en bakgrunn med god kontrast.
Kontroller til slutt kontrasten på både lys og mørk bakgrunn. En svart logo forsvinner i en fane med mørkt tema. Det er nettopp derfor SVG-faviconet har en mørk variant.
Størrelsene du ikke lenger trenger
Eldre generatorer lager fortsatt filer for historiske integrasjoner, som Windows-fliser med mstile-150x150.png og browserconfig.xml. Legg bare til disse hvis du uttrykkelig skal støtte slike grensesnitt.
Den lange serien apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 og 152x152 stammer fra tiden da iOS ikke kunne endre størrelse. Ett bilde på 180×180 erstatter dem alle.
Når du fjerner deklarasjoner som ikke brukes, blir både kodebasen og HTML-koden enklere. Kontroller hvilke nettlesere og plattformer du skal støtte, før du fjerner en eksisterende integrasjon.
Primærkilder
Vanlige spørsmål
Trenger du fortsatt favicon.ico?
Ja, men bare i nettstedets rotmappe. Moderne nettlesere foretrekker SVG, men mange søkeroboter, aggregatorer og e-postklienter ber fortsatt om /favicon.ico uten å lese HTML-koden. Filen er bare noen få kilobyte, så behold den.
Hvilken favicon-størrelse bruker Google i søkeresultater?
Google ber om et ikon med en sidelengde som er et multiplum av 48 piksler, og viser det vanligvis i 48×48. En PNG på 96×96 eller en SVG dekker dette enkelt. Ikonet må kunne gjennomsøkes og må ikke blokkeres av robots.txt.
Kan faviconet være rektangulært?
Teknisk sett ja, visuelt sett nei. Alle visningsflater setter av et kvadrat. Et rektangulært bilde blir enten forvrengt eller sentrert med tomme felt rundt. Begynn alltid med et kvadrat, og legg til luft rundt symbolet ved behov.