Essensielle favicon-størrelser: Rask beslutningsguide for 2025

Internett er fullt av favicon-størrelsesanbefalinger som spenner fra 4 til 20+ ulike dimensjoner. De fleste nettsteder trenger ikke alle. Denne guiden kutter gjennom støyen og viser deg nøyaktig hvilke favicon-størrelser som betyr noe for ditt spesifikke prosjekt, slik at du sparer tid og reduserer kompleksitet.

De eneste 4 favicon-størrelsene du faktisk trenger

Etter å ha analysert tusenvis av nettsteder og bruksmønstre for enheter, her er de essensielle favicon-størrelsene som dekker 99 % av brukstilfellene:

1. favicon.ico (flerstørrelsesbeholder)

Størrelse: Inneholder 16x16 og 32x32 piksler Hvorfor den er essensiell: Universell nettleserstøtte, automatisk gjenkjenning Filformat: ICO Bruk: Nettleserfaner, bokmerker, nettleserhistorikk

2. 180x180 piksler (Apple Touch-ikon)

Størrelse: 180x180 piksler Hvorfor den er essensiell: iOS-hjemmeskjerm, Safari-bokmerker Filformat: PNG Bruk: iPhone/iPad «Legg til på hjemmeskjerm»

3. 192x192 piksler (Android Chrome)

Størrelse: 192x192 piksler Hvorfor den er essensiell: Android-hjemmeskjerm, Chrome-snarveier Filformat: PNG Bruk: Android-enheter, minimumskrav for PWA

4. 512x512 piksler (PWA og fremtidssikring)

Størrelse: 512x512 piksler Hvorfor den er essensiell: Progressive webapplikasjoner, høyoppløselige skjermer Filformat: PNG Bruk: PWA-velkomstskjermer, appbutikker

Rask implementeringskode

Her er den minimale HTML-en du trenger i <head>-taggen din:

<!-- Essensielt favicon-oppsett - dekker 99% av enheter -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

Det er alt. Disse fire filene vil vise faviconet ditt korrekt på tvers av alle moderne enheter og nettlesere.

Når du kan trenge ekstra størrelser

Bygger du en progressiv webapp?

Legg til disse i web-manifestet ditt:

144x144 - Windows-fliser
384x384 - Mellomliggende PWA-størrelse

Støtter du eldre systemer?

Vurder å legge til:

16x16 PNG - Veldig gamle nettlesere
32x32 PNG - Eldre høy-DPI-skjermer
48x48 - Windows skrivebordssnarveier

Vil du ha perfekt dekning?

Det komplette settet inkluderer:

16x16, 32x32, 48x48, 64x64, 96x96, 128x128, 144x144, 152x152, 167x167, 180x180, 192x192, 256x256, 384x384, 512x512

Men husk: hver ekstra størrelse legger til kompleksitet med avtagende avkastning.

Flytdiagram for størrelsesvalg

Er nettstedet ditt en PWA?
├─ Ja → Bruk alle 4 essensielle størrelser + manifeststørrelser
└─ Nei → Fortsett
   │
   Er det et enkelt nettsted/blogg?
   ├─ Ja → Bruk kun favicon.ico
   └─ Nei → Fortsett
      │
      Er mobiltrafikken > 50%?
      ├─ Ja → Bruk alle 4 essensielle størrelser
      └─ Nei → Bruk favicon.ico + 192x192

Sammenligning med store nettsteder

Her er hva store nettsteder faktisk bruker:

Nettsted	Antall størrelser	Faktiske størrelser brukt
Google	3	favicon.ico, 192x192, 512x512
Facebook	4	favicon.ico, 180x180, 192x192, 512x512
Amazon	2	favicon.ico, 192x192
Netflix	3	favicon.ico, 192x192, 512x512
GitHub	5	favicon.ico, 180x180, 192x192, 512x512, SVG

Legg merke til mønsteret? Selv teknologigiganter holder det enkelt.

Retningslinjer for filstørrelse

Hold favicons lette for bedre ytelse:

Favicon-størrelse	Mål-filstørrelse	Maksimalt akseptabelt
favicon.ico	< 5 KB	15 KB
180x180 PNG	< 3 KB	8 KB
192x192 PNG	< 4 KB	10 KB
512x512 PNG	< 15 KB	30 KB

Vanlige størrelsefeil å unngå

Feil 1: Bruke kun store størrelser

Problem: 512x512-ikon nedskalert til 16x16 ser uskarpt ut Løsning: Inkluder alltid favicon.ico med innebygde små størrelser

Feil 2: Glemme mobilstørrelser

Problem: Generisk ikon vises når brukere lagrer til hjemmeskjerm Løsning: Inkluder 180x180 (iOS) og 192x192 (Android)

Feil 3: Overoptimalisering av filstørrelser

Problem: Kraftig komprimerte ikoner ser pikselerte ut Løsning: Balanser kvalitet og filstørrelse; favicons bufres uansett

Feil 4: Bruke feil dimensjoner

Problem: 200x200 eller 256x256 i stedet for standardstørrelser Løsning: Hold deg til plattformstandarddimensjoner

Rask testsjekkliste

Test favicon-implementeringen din:

Nettleserfane på stasjonær - Vises favicon.ico?
Mobilnettleser - Er ikonet synlig i mobil Chrome/Safari?
Legg til på hjemmeskjerm - Prøv på både iOS og Android
Bokmerketest - Legg til bokmerke og sjekk ikonet
Delingsforhåndsvisning - Noen plattformer bruker større størrelser for delinger

Format vs. størrelse: Hva betyr mest?

Størrelse bestemmer hvor faviconet ditt vises Format bestemmer kompatibilitet og kvalitet

Prioritert rekkefølge:

Få størrelsene riktig først
Bruk ICO for favicon.ico
Bruk PNG for alle andre størrelser
Vurder SVG først etter at det grunnleggende fungerer

5-minutters favicon-oppsett

Start med et 512x512 hovedbilde
Generer de 4 essensielle størrelsene ved hjelp av en favicon-generator
Legg til HTML-koden i nettstedets head
Test på én stasjonær og én mobilnettleser
Publiser — ikke overtenk det

Størrelsesspesifikke tips

For 16x16 og 32x32 (favicon.ico)

Bruk enkle former uten fine detaljer
Test synligheten i faktisk størrelse
Unngå tekst med mindre det er 1–2 tegn

For 180x180 (iOS)

Design med avrundede hjørner i tankene (iOS legger dem til)
Bruk heldekkende bakgrunn (gjennomsiktighet blir hvit)
Sørg for god kontrast

For 192x192 og 512x512 (Android/PWA)

Støtt gjennomsiktighet for adaptive ikoner
Test på ulike Android-startskjermbakgrunner
Hold viktige elementer sentrert

Ytelseseffekt per størrelse

Lasting av flere favicon-størrelser har minimal innvirkning:

4 essensielle størrelser: ~25KB totalt, 4 forespørsler
10 omfattende størrelser: ~60KB totalt, 10 forespørsler
20+ størrelser: ~120KB totalt, ofte unødvendig

Favicons bufres aggressivt, så den initielle lastingen er den eneste bekymringen.

Endelige anbefalinger

For 90 % av nettsteder: Bruk de 4 essensielle størrelsene. Du er ferdig.

For PWAer: Legg til 144x144 og 384x384 til de essensielle 4.

For maksimal kompatibilitet: Bruk et generatorverktøy for å lage alle størrelser, men forstå at du optimaliserer for grensetilfeller.

Husk: Perfekt favicon-dekning på tvers av alle tenkelige enheter og nettleserversjoner er umulig. Fokuser på størrelsene som betyr noe for dine faktiske brukere, implementer dem korrekt, og gå videre til mer virkningsfulle aspekter av nettstedet ditt.

Den beste favicon-implementeringen er den som fungerer pålitelig for brukerne dine uten å overkomplisere kodebasen. Start med det essensielle, legg til mer bare når du har et spesifikt behov.

Trenger du å teste faviconet ditt på tvers av ulike størrelser? Prøv Favicon.im for å umiddelbart forhåndsvise hvordan et nettstedsfavicon vises i ulike dimensjoner.