Et Favicon-sæt, der virker overalt i 2026
Seks størrelser, én .ico, ét manifest — alt hvad du rent faktisk skal bruge for at udbrede et favicon, der ser rigtigt ud på alle browsere, iOS-hjemmeskærm og Windows-proceslinjen i 2026.
Favicons virker trivielle. Udbred én og hundrede edge cases dukker op: iOS-hjemmeskærmsikonet er fuzzy, Android-chrome-fanen har den forkerte farve, Windows-pins viser et uskarpt 16×16. Denne guide skærer gennem støjen og dækker præcis hvad du skal bruge i 2026 — ikke mere, ikke mindre.
Det minimale brugbare sæt
Seks aktiver dækker alle overflader, der vil vise dit sites ikon:
favicon.ico— multi-size-beholder med 16×16, 32×32, 48×48 indeni (legacy-browsere, Windows Explorer, fastgjorte faner).favicon-16x16.png,favicon-32x32.png— moderne browser-faner.apple-touch-icon.png(180×180) — iOS-hjemmeskærm, Safari-læseliste.android-chrome-192x192.png,android-chrome-512x512.png— Android-hjemmeskærm, PWA-installationsprompts.site.webmanifest— PWA-konfigurationen, der peger på Android-ikonerne og definerer temafarven.
Det var det. Alt det andet (Safari fastgjort tab SVG, gamle Apple touch-varianter, Windows-tileafbildninger) er legacy. Moderne browsere falder graciøst tilbage til 192- eller 512-PNG.
Hvorfor .ico stadig udbredes i 2026
En .ico-fil er en binær beholder, der kan indeholde flere PNG-billeder i forskellige størrelser. Når en browser anmoder om /favicon.ico (hvilket nogle stadig gør som standard), får den alle tre størrelser i én anmodning. Rendereren vælger den, der passer bedst til den aktuelle overflade — en 48×48 til Windows Explorer, en 16×16 til en browser-fane.
En PNG omdøbt til .ico indeholder kun én størrelse. Det virker for det meste, fordi browsere er tilgivende, men Windows Explorer og nogle e-mail-klienter vil enten gengive den uskarpt eller nægte at vise den. Udbred en rigtig .ico, hvis du ønsker konsistens.
Hvad site.webmanifest gør
Når en bruger tilføjer dit site til deres Android-hjemmeskærm eller installerer det som en PWA, læser browseren site.webmanifest for at vide, hvordan den installerede app skal se ud. Det definerer:
name/short_name— etiketten under ikonet.icons— hvilke PNG-billeder, der skal bruges i hvilken størrelse.theme_color— statusbjælkens farve, når appen er åben.background_color— spritskrensens baggrund under start.display— normaltstandalone, så appen åbner uden browser-chrome.
Uden et manifest falder Android tilbage til apple-touch-icon og viser dit site i et browservindue. Med et ser det ud som en native app.
HTML-uddraget
Hver fil går i din webrod. Hvert site har brug for denne blok i <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Design til 16×16
Dit smukke detaljerede logo dør på 16 pixels. Reglerne for at lave et favicon, der læses klart ved den størrelse:
- Én form. En cirkel, et kvadrat eller et stærkt monogram. Undgå sammensatte former.
- Høj kontrast. Forgrunden og baggrunden skal være mindst WCAG AA separeret. Subtile gradienter forsvinder.
- Sikker margin. Lad 10–20% padding. Browsere tilføjer ofte en 1px-kant af deres egen.
- Tekst? Et enkelt fedt bogstav virker bedre end et helt ord ved 16px.
aukimi Favicon Generator producerer alle seks filer og HTML-uddraget fra ét billede eller et bogstav på under 30 sekunder. Det genererer en rigtig multi-size .ico (ifølge Microsoft ICONDIR-specifikationen), ikke en omdøbt PNG. Upload, vælg dine størrelser, download en zip-less-pakke, indsæt uddraget — færdig.
Almindelige fejl
- Servering af
.icofra CDN uden cache-headers. Browsere cacher favicons aggressivt. Brug en versioneret URL (?v=2) for at tvinge en refresh efter et redesign. - Forskellige ikoner pr. underdomæne. En enkelt
favicon.icopå apex er normalt hvad brugere forventer — fragment ikke din identitet. - Glemmer
theme-colormeta. Mobile Chrome tinter browserchromet for at matche denne værdi. At springe den over efterlader dig med standard-grå.
Et godt favicon er kedeligt på den bedst mulige måde — brugere bemærker når det mangler eller er forkert, aldrig når det er rigtigt. Få de seks filer udbragt og gå videre.
Kunne du lide denne artikel?
Relaterede Artikler
Det kreative stack kollapsede lige: En uge med AI-værktøjer, sen april 2026
Mellem 27. april og 4. maj 2026 krydsede Adobe, Luma, Novi, fal, Figma, Canva, HeyGen og Anthropic samme tærskel på otte dage. Her er hvad der blev lanceret, hvad det betyder, og hvor det efterlader de browserbaserede kreative suites, der forsøger at konsolidere det hele.
AI-musik og SFX i 2026: Hvad der faktisk virker i indie-gameslyd
For tre år siden betød indie-gameslyd enten licensering af royalty-free biblioteker (billigt, generisk, alle spil lyder ens) eller at ansætte en komponist (godt, dyrt). I 2026 genererer AI musikker, der sendes live. Her er hvilke værktøjer, der leverer — og hvor en menneskelig komponist stadig vinder.
AI Mesh-generering i 2026: Hvad der faktisk bliver leveret i game pipelines
Image-to-3D gik fra "uhyggelig demo" til "skib i indie-projekter" på 18 måneder. Her er hvad Tripo, Meshy, Rodin og Hyper3D faktisk gør i produktion — og hvor 3D-kunstneren stadig slår modellen hver gang.