Et Favicon-sett som fungerer overalt i 2026
Seks størrelser, én .ico, ett manifest — alt du faktisk trenger for å levere et favicon som ser riktig ut i alle nettlesere, iOS hjemmeskjerm og Windows oppgavelinje i 2026.
Favicons virker trivielle. Lever én og hundre kanttilfeller dukker opp: iOS hjemmeskjerm-ikonet er uklart, Android Chrome-fanen har feil farge, Windows-pinner viser et uskarpt 16×16. Denne guiden kuttet gjennom støyen og dekker nøyaktig hva du trenger i 2026 — ikke mer, ikke mindre.
Det minimale levedyktige settet
Seks eiendeler dekker hver flate som vil vise nettstedets ikon:
favicon.ico— multi-størrelsescontainer med 16×16, 32×32, 48×48 inni (eldre nettlesere, Windows Explorer, festede faner).favicon-16x16.png,favicon-32x32.png— moderne nettleserfaner.apple-touch-icon.png(180×180) — iOS hjemmeskjerm, Safari leseliste.android-chrome-192x192.png,android-chrome-512x512.png— Android hjemmeskjerm, PWA-installasjonsprompter.site.webmanifest— PWA-konfigurasjonen som peker til Android-ikonene og definerer temafarge.
Det er alt. Alt annet (Safari festet tab SVG, gamle Apple touch-varianter, Windows flisbilder) er legacy. Moderne nettlesere faller tilbake elegant til 192 eller 512 PNG.
Hvorfor .ico fortsatt leveres i 2026
En .ico-fil er en binær container som kan inneholde flere PNG-bilder i ulike størrelser. Når en nettleser spør om /favicon.ico (som noen fortsatt gjør som standard), får den alle tre størrelser i én forespørsel. Rendereren velger den som passer best for den gjeldende flaten — en 48×48 for Windows Explorer, en 16×16 for en nettleserfane.
En PNG omdøpt til .ico inneholder bare én størrelse. Det fungerer stort sett fordi nettlesere er tilgivende, men Windows Explorer og noen e-postklienter vil enten gjengive den uskarpt eller nekter å vise den. Lever en ekte .ico hvis du vil ha konsistens.
Hva site.webmanifest gjør
Når en bruker legger til nettstedet ditt på Android-hjemmeskjermen eller installerer det som en PWA, leser nettleseren site.webmanifest for å vite hvordan den installerte appen skal se ut. Det definerer:
name/short_name— etiketten under ikonet.icons— hvilke PNG-er som skal brukes på hvilken størrelse.theme_color— farge på statuslinjen når appen er åpen.background_color— bakgrunn for sprøytskjerm under oppstart.display— vanligvisstandaloneslik at appen åpnes uten nettlesergrensesnitt.
Uten et manifest faller Android tilbake til apple-touch-icon og viser nettstedet ditt i et nettleservindu. Med ett ser det ut som en innfødt app.
HTML-kodebiten
Hver fil går i nettrooten din. Hvert nettsted trenger denne blokken 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 for 16×16
Din vakre detaljerte logo dør ved 16 piksler. Reglene for å lage et favicon som leses klart på den størrelsen:
- En form. En sirkel, en firkant eller et sterkt monogram. Unngå sammensatte former.
- Høy kontrast. Forgrunn og bakgrunn må være minst WCAG AA separert. Subtile gradienter forsvinner.
- Trygg margin. La 10–20% polstring. Nettlesere legger ofte til en egen 1px kant.
- Tekst? En enkelt fet bokstav fungerer bedre enn et helt ord ved 16px.
aukimi Favicon Generator produserer alle seks filer og HTML-kodebiten fra ett bilde eller en bokstav på under 30 sekunder. Den genererer en ekte multi-størrelse .ico (per Microsoft ICONDIR-spesifikasjonen), ikke en omdøpt PNG. Last opp, velg størrelsetallene dine, last ned en zip-mindre pakke, lim inn kodebiten — ferdig.
Vanlige feil
- Serving
.icofra CDN uten cache-headers. Nettlesere cacher favicons aggressivt. Bruk en versjonert URL (?v=2) for å tvinge en oppfrisking etter en redesign. - Ulike ikoner per underdomene. En enkelt
favicon.icopå toppnivået er vanligvis hva brukerne forventer — ikke fragmenter identiteten din. - Glemmer
theme-colormeta. Mobil Chrome farger nettleserkromen for å samsvare med denne verdien. Å hoppe over det etterlater deg med standard grå.
Et godt favicon er kjedelig på den beste måten — brukere legger merke til når det mangler eller er galt, aldri når det er riktig. Få de seks filene levert og fortsett.
Likte du denne artikkelen?
Relaterte Artikler
Den kreative stacken kollapset nettopp: En uke med AI-verktøy, slutten av april 2026
Mellom 27. april og 4. mai 2026 krysset Adobe, Luma, Novi, fal, Figma, Canva, HeyGen og Anthropic samme terskelen på åtte dager. Her er hva som ble lansert, hva det betyr, og hvor det etterlater nettleserbaserte kreative suiter som prøver å konsolidere det hele.
AI-musikk og SFX i 2026: Hva som faktisk fungerer i indie-spilllyd
For tre år siden betydde indie-spilllyd enten lisensering av royalty-frie biblioteker (billig, generisk, alle spill høres like ut) eller ansettelse av en komponist (bra, dyrt). I 2026 genererer AI musikk som blir utgitt. Her er hvilke verktøy som fungerer — og hvor en menneskelig komponist fortsatt vinner.
AI-mesh-generering i 2026: Hva som faktisk leveres i spill-pipelines
Image-to-3D gikk fra «uvirkelig demo» til «leveres i indie-prosjekter» på atten måneder. Her er hva Tripo, Meshy, Rodin og Hyper3D faktisk gjør i produksjon — og hvor 3D-kunstneren fortsatt slår modellen hver gang.