Essentielle favicon-størrelser: Hurtig beslutningsguide til 2025

Internettet er fyldt med anbefalinger til favicon-størrelser, der spænder fra 4 til over 20 forskellige dimensioner. De fleste hjemmesider har ikke brug for dem alle. Denne guide skærer igennem støjen og viser dig præcis hvilke favicon-størrelser der betyder noget for dit specifikke projekt, så du sparer tid og reducerer kompleksitet.

De eneste 4 favicon-størrelser du faktisk behøver

Efter analyse af tusindvis af hjemmesider og enhedsbrugsmønstre er her de essentielle favicon-størrelser, der dækker 99% af alle brugsscenarier:

1. favicon.ico (multi-størrelsesbeholder)

Størrelse: Indeholder 16x16 og 32x32 pixels Hvorfor den er essentiel: Universel browserunderstøttelse, automatisk registrering Filformat: ICO Brug: Browserfaner, bogmærker, browserhistorik

2. 180x180 pixels (Apple Touch Icon)

Størrelse: 180x180 pixels Hvorfor den er essentiel: iOS-startskærm, Safari-bogmærker Filformat: PNG Brug: iPhone/iPad "Føj til startskærm"

3. 192x192 pixels (Android Chrome)

Størrelse: 192x192 pixels Hvorfor den er essentiel: Android-startskærm, Chrome-genveje Filformat: PNG Brug: Android-enheder, PWA-minimumskrav

4. 512x512 pixels (PWA og fremtidssikring)

Størrelse: 512x512 pixels Hvorfor den er essentiel: Progressive Web Apps, højtopløselige skærme Filformat: PNG Brug: PWA-splashskærme, app stores

Hurtig implementeringskode

Her er den minimale HTML, du har brug for i dit <head>-tag:

<!-- Essential favicon setup - covers 99% of devices -->
<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 det. Disse fire filer vil vise dit favicon korrekt på tværs af alle moderne enheder og browsere.

Hvornår du muligvis har brug for yderligere størrelser

Bygger du en Progressive Web App?

Tilføj disse til dit web manifest:

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

Understøtter du ældre systemer?

Overvej at tilføje:

16x16 PNG - Meget gamle browsere
32x32 PNG - Ældre høj-DPI-skærme
48x48 - Windows-skrivebordsgenveje

Ønsker du perfekt dækning?

Det komplette sæt inkluderer:

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

Men husk: hver yderligere størrelse tilføjer kompleksitet med faldende afkast.

Beslutningsdiagram for størrelser

Er din side en PWA?
├─ Ja → Brug alle 4 essentielle størrelser + manifeststørrelser
└─ Nej → Fortsæt
   │
   Er det en simpel hjemmeside/blog?
   ├─ Ja → Brug kun favicon.ico
   └─ Nej → Fortsæt
      │
      Er mobiltrafik > 50%?
      ├─ Ja → Brug alle 4 essentielle størrelser
      └─ Nej → Brug favicon.ico + 192x192

Sammenligning med virkeligheden

Her er hvad store hjemmesider faktisk bruger:

Hjemmeside	Antal størrelser	Faktiske størrelser brugt
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

Læg mærke til mønsteret? Selv tech-giganterne holder det enkelt.

Retningslinjer for filstørrelse

Hold dine favicons lette for bedre ydeevne:

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

Almindelige størrelsesfejl at undgå

Fejl 1: Kun brug af store størrelser

Problem: 512x512-ikon nedskaleret til 16x16 ser sløret ud Løsning: Inkludér altid favicon.ico med indlejrede små størrelser

Fejl 2: Glemmer mobilstørrelser

Problem: Generisk ikon vises, når brugere gemmer til startskærm Løsning: Inkludér 180x180 (iOS) og 192x192 (Android)

Fejl 3: Over-optimering af filstørrelser

Problem: Kraftigt komprimerede ikoner ser pixelerede ud Løsning: Balancér kvalitet og filstørrelse; favicons caches alligevel

Fejl 4: Brug af forkerte dimensioner

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

Hurtig testtjekliste

Test din favicon-implementering:

Desktop-browserfane - Vises favicon.ico?
Mobilbrowser - Er ikonet synligt i mobil Chrome/Safari?
Føj til startskærm - Prøv på både iOS og Android
Bogmærketest - Tilføj bogmærke og tjek ikon
Delingsforhåndsvisning - Nogle platforme bruger større størrelser til delinger

Format vs. størrelse: Hvad betyder mest?

Størrelse bestemmer, hvor dit favicon vises Format bestemmer kompatibilitet og kvalitet

Prioritetsrækkefølge:

Få størrelserne rigtige først
Brug ICO til favicon.ico
Brug PNG til alle andre størrelser
Overvej først SVG, når det grundlæggende fungerer

5-minutters favicon-opsætning

Start med et 512x512 masterbillede
Generér de 4 essentielle størrelser med en favicon-generator
Tilføj HTML-koden til din sides head
Test på én desktop- og én mobilbrowser
Udgiv det — tænk ikke for meget over det

Størrelsesspecifikke tips

Til 16x16 og 32x32 (favicon.ico)

Brug simple former uden fine detaljer
Test synlighed i faktisk størrelse
Undgå tekst, medmindre det er 1-2 tegn

Til 180x180 (iOS)

Design med afrundede hjørner i tankerne (iOS anvender dem)
Brug solid baggrund (gennemsigtighed bliver til hvid)
Sørg for god kontrast

Til 192x192 og 512x512 (Android/PWA)

Understøt gennemsigtighed til adaptive ikoner
Test på forskellige Android-startskærmsbaggrunde
Hold vigtige elementer centreret

Ydeevnepåvirkning efter størrelse

Indlæsning af flere favicon-størrelser har minimal påvirkning:

4 essentielle størrelser: ~25KB total, 4 forespørgsler
10 omfattende størrelser: ~60KB total, 10 forespørgsler
20+ størrelser: ~120KB total, ofte unødvendigt

Favicons caches aggressivt, så den indledende indlæsning er den eneste bekymring.

Afsluttende anbefalinger

Til 90% af hjemmesider: Brug de 4 essentielle størrelser. Du er færdig.

Til PWA'er: Tilføj 144x144 og 384x384 til de essentielle 4.

Til maksimal kompatibilitet: Brug et generatorværktøj til at oprette alle størrelser, men forstå at du optimerer til edge cases.

Husk: Perfekt favicon-dækning på tværs af alle mulige enheder og browserversioner er umuligt. Fokusér på de størrelser, der betyder noget for dine faktiske brugere, implementér dem korrekt, og gå videre til mere virkningsfulde aspekter af din hjemmeside.

Den bedste favicon-implementering er en, der fungerer pålideligt for dine brugere uden at overkomplicere din kodebase. Start med det essentielle, og tilføj mere kun når du har et specifikt behov.

Har du brug for at teste dit favicon på tværs af forskellige størrelser? Prøv Favicon.im for øjeblikkeligt at forhåndsvise, hvordan enhver hjemmesides favicon ser ud i forskellige dimensioner.