Favicon-generator: den komplette .ICO-guiden (2026)

Faviconen, den lille 16×16-pikselikonet ved siden av faneoverskriften din, er en av de mest oversette detaljene på nettet. De fleste sider leverer enten ingen favicon (viser et generisk nettleserikon, det universelle tegnet på en uferdig side) eller leverer en JPEG omdøpt til .ico (som ikke fungerer konsekvent på tvers av nettlesere).

Denne guiden dekker hvordan en korrekt favicon-implementasjon i 2026 ser ut: formatene du trenger, størrelsene som betyr noe, støtte for mørk modus og hvordan du installerer den korrekt. Alt genereres lokalt, logoen din lastes aldri opp til en server.

Hvorfor faviconer betyr mer enn du tror

En favicon gjør tre ting samtidig:

1. Identifiserer siden din i nettleserfaner, bokmerker og historikk.
2. Øker merkegjenkjenning når brukere har flere faner åpne.
3. Signaliserer profesjonalitet. Sider uten ordentlige faviconer ser uferdige ut, selv store merker svikter noen ganger på dette.

Studier viser at brukere med 10+ åpne faner identifiserer en side via favicon før de leser tittelen. Faviconen din er eiendomsplass verdt å ta seriøst.

ICO vs PNG vs SVG

ICO (favicon.ico)

Det opprinnelige favicon-formatet, introdusert av Microsoft i 1999. Dets superkraft: det er en beholder. En enkelt .ico-fil rommer flere PNG-kodede bilder ved ulike oppløsninger (vanligvis 16×16, 32×32, 48×48). Nettleseren/operativsystemet velger riktig en for konteksten.

Bruk det for: maksimal kompatibilitet, særlig Windows skrivebordssnarveier og Outlook e-postsignaturer.

PNG (favicon-32x32.png, favicon-192x192.png, etc.)

Moderne nettlesere (Chrome, Firefox, Safari, Edge) foretrekker PNG. Skarpere rendering, alfakanalstøtte, mindre filstørrelse enn ICO ved likeverdig kvalitet.

Bruk det for: moderne nettlesere, Apple Touch Icons (iOS), Android Chrome PWA-ikoner, Windows-flisikoner.

SVG (favicon.svg)

Vektorformat. Skarpt ved hvilken som helst oppløsning, støtter CSS og fyllinger som er bevisste mørk modus, mye mindre enn PNG for enkle ikoner.

Bruk det for: fremtidssikring. Moderne nettlesere (90 %+) støtter SVG-faviconer. Par med PNG-fallback for eldre nettlesere.

Beste praksis: lever alle tre

<!-- Moderne nettlesere foretrekker dette hvis tilgjengelig -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Moderne nettlesere fallback -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Eldre/Windows -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS hjemskjerm -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android PWA + temafarge -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#c59a6d">

Favicon-generator leverer eksakt dette settet med filer pluss snutten, klar for distribusjon.

Størrelsene som faktisk betyr noe

Størrelse	Filnavn	Brukes av
16×16	inne i favicon.ico	Nettleserfane, adressefelt
32×32	favicon-32x32.png + inne i favicon.ico	Nettleserfane høy-DPI, oppgavelinje
48×48	inne i favicon.ico	Windows skrivebordssnarvei
180×180	apple-touch-icon.png	iOS hjemskjerm, watchOS
192×192	android-chrome-192x192.png	Android hjemskjerm
512×512	android-chrome-512x512.png	Android oppstartsskjerm, PWA
150×150	mstile-150x150.png	Windows 10/11 Start-flis
uendelig	favicon.svg	Moderne nettlesere, retina

Du trenger ikke alle disse for en grunnleggende side, men en generator som produserer dem alle koster ingenting ekstra og fremtidssikrer deg.

Faviconer for mørk modus (beste praksis 2026)

Moderne nettlesere støtter faviconer som er bevisste mørk modus via SVG med CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M..."/>
</svg>

Faviconen tilpasser seg brukerens operativsystemtema, svart på lys, hvit på mørk. Noen brukere (utviklere, tilgjengelighetsforkjempere) leter aktivt etter denne detaljen.

Beste praksis for kildebilder

Før du genererer, forbered kilden din:

1. Kvadratisk. Minimum 512×512, ideelt 1024×1024. Ikke-kvadratiske kilder beskjæres eller fylles.
2. Enkel. Ved 16×16 px blir komplekse logoer uleselig grøt. Test ved å mysse mot logoen din på et 16-pikselraster: kan du fortsatt kjenne den igjen?
3. Høy kontrast. Ikonet må være lesbart mot hvilken som helst nettleserfanefarge (lys eller mørk). Sikt på minst 4,5:1 kontrastforhold internt.
4. Gjennomsiktig bakgrunn (PNG/SVG). Solide bakgrunner ser kantete ut i nettleserfaneremser som har innfyll.

Hvis hele logoen din er for detaljert, lag et forenklet symbol for faviconen, en enkelt bokstav, et ikon, en abstrakt form. Mange merker gjør dette (Apples eple, Twitters fugl, Spotifys sirkler).

Personvern: hvorfor lokal generering betyr noe

Den skitne hemmeligheten med online favicon-generatorer: de fleste laster opp kildelogoen din til serveren sin, genererer ikonene og sender deg en lenke på e-post.

Det innebærer at din upubliserte merkeidentitet sitter på noen andres maskinvare. For en stealth-startup, et klientprosjekt under taushetserklæring eller en produktlansering er det uakseptabelt.

Alternativet: generer lokalt med HTML5 Canvas + WebAssembly for ICO-koding. DuneTools Favicon-generator gjør nøyaktig dette, logoen din forlater aldri nettleseren din, generering skjer på noen hundre millisekunder, du laster ned en ZIP med alle 12 filvariantene pluss HTML-snutten.

Distribusjonssjekkliste

1. ✅ Plasser alle genererte filer i roten av siden din (/favicon.ico, /favicon.svg, etc.). De fleste nettlesere leter her automatisk.
2. ✅ Legg til <link>- og <meta>-tagger fra generatoren inne i <head>.
3. ✅ Legg til <link rel="manifest" href="/site.webmanifest"> og opprett site.webmanifest med ikondefinisjonene (generatoren oppretter det for deg).
4. ✅ Test på Chrome, Safari, Firefox-fane. Hard-oppdater (Cmd+Shift+R eller Ctrl+F5), faviconer caches aggressivt.
5. ✅ Legg til på iPhone hjemskjerm (Safari → Del → Legg til på hjemskjerm), verifiser at apple-touch-icon vises.
6. ✅ Test i mørk modus (system → bytt tema), verifiser at SVG tilpasser seg.

Vanlige feil

1. Å bytte navn på en JPEG til .ico. ICO har sitt eget format. Å bytte navn konverterer ikke. Bruk en generator.
2. Bare en 16×16 PNG. Ser bra ut i faner, fryktelig overalt ellers (oppgavelinje, mobil hjemskjerm, PWA-oppstartsskjerm).
3. Å glemme Apple Touch Icon. Når brukere legger til siden din på iPhone hjemskjerm og ikonet ditt mangler bruker iOS et skjermbilde. Ser fryktelig ut.
4. Ingen theme-color meta-tagg. Å legge til <meta name="theme-color"> får Chrome/Safari mobil til å bruke merkefargen din i adressefeltet, liten detalj, stor effekt.
5. Ikke teste mørk modus. En logo usynlig på mørke bakgrunner er en logo som mangler fra millioner av brukeres faner.

Reell sjekkliste

Før du lanserer:

• Generert favicon.ico (multistørrelse 16/32/48)
• Generert favicon.svg med CSS for mørk modus
• Generert favicon-16x16.png og favicon-32x32.png
• Generert apple-touch-icon.png (180×180)
• Generert android-chrome-192x192.png og 512x512
• Opprettet site.webmanifest med ikondefinisjoner
• Lagt til alle <link>-tagger inne i <head>
• Lagt til <meta name="theme-color"> som matcher merket
• Hard-oppdatert og verifisert at alle størrelser vises korrekt
• Lagt til på iOS hjemskjerm, verifisert apple-touch-icon
• Testet mørk modus, verifisert at SVG tilpasser seg

Oppsummering

En komplett favicon-implementasjon i 2026 har 8-12 filer, tar 5 minutter å generere med riktig verktøy og forbedrer merkbart den oppfattede profesjonaliteten på siden din. Hopp ikke over noen formater, det er ingen god grunn til det i 2026, og kostnaden er en opplasting til Favicon-generator.