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

Faviconen, det lille 16×16-pixelikon ved siden af din faneoverskrift, er en af de mest oversete detaljer på nettet. De fleste sider leverer enten ingen favicon (viser et generisk browserikon, det universelle tegn på en ufærdig side) eller leverer en JPEG omdøbt til .ico (som ikke virker konsekvent på tværs af browsere).

Denne guide dækker, hvordan en korrekt favicon-implementering i 2026 ser ud: de formater du har brug for, de størrelser der betyder noget, understøttelse af mørk tilstand og hvordan du installerer den korrekt. Alt genereres lokalt, dit logo uploades aldrig til en server.

Hvorfor faviconer betyder mere end du tror

En favicon gør tre ting samtidigt:

1. Identificerer dit websted i browserfaner, bogmærker og historik.
2. Øger brand-genkendelse, når brugere har flere faner åbne.
3. Signalerer professionalisme. Sider uden ordentlige faviconer ser ufærdige ud, selv store brands fejler nogle gange på dette.

Studier viser, at brugere med 10+ åbne faner identificerer en side via favicon før de læser titlen. Din favicon er ejendomsplads, der er værd at tage seriøst.

ICO vs PNG vs SVG

ICO (favicon.ico)

Det oprindelige favicon-format, introduceret af Microsoft i 1999. Dets superkraft: det er en beholder. En enkelt .ico-fil rummer flere PNG-kodede billeder ved forskellige opløsninger (typisk 16×16, 32×32, 48×48). Browseren/operativsystemet vælger den rigtige til konteksten.

Brug det til: maksimal kompatibilitet, særligt Windows skrivebordsgenveje og Outlook e-mailsignaturer.

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

Moderne browsere (Chrome, Firefox, Safari, Edge) foretrækker PNG. Skarpere rendering, alfakanal-understøttelse, mindre filstørrelse end ICO ved ligeværdig kvalitet.

Brug det til: moderne browsere, Apple Touch Icons (iOS), Android Chrome PWA-ikoner, Windows-fliseikoner.

SVG (favicon.svg)

Vektorformat. Skarpt ved enhver opløsning, understøtter CSS og fyld der er bevidste om mørk tilstand, meget mindre end PNG til simple ikoner.

Brug det til: fremtidssikring. Moderne browsere (90 %+) understøtter SVG-faviconer. Par med PNG-fallback til ældre browsere.

Bedste praksis: lever alle tre

<!-- Moderne browsere foretrækker dette, hvis det er tilgængeligt -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Moderne browser 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">
<!-- Ældre/Windows -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS startskærm -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android PWA + temafarve -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#c59a6d">

Favicon-generator leverer præcis dette sæt af filer plus snippet’en, klar til distribution.

De størrelser, der faktisk betyder noget

Størrelse	Filnavn	Bruges af
16×16	inde i favicon.ico	Browserfane, adressefelt
32×32	favicon-32x32.png + inde i favicon.ico	Browserfane høj-DPI, proceslinje
48×48	inde i favicon.ico	Windows skrivebordsgenvej
180×180	apple-touch-icon.png	iOS startskærm, watchOS
192×192	android-chrome-192x192.png	Android startskærm
512×512	android-chrome-512x512.png	Android opstartsskærm, PWA
150×150	mstile-150x150.png	Windows 10/11 Start-flise
uendelig	favicon.svg	Moderne browsere, retina

Du har ikke brug for alle disse til en grundlæggende side, men en generator, der producerer dem alle, koster intet ekstra og fremtidssikrer dig.

Faviconer til mørk tilstand (bedste praksis 2026)

Moderne browsere understøtter faviconer, der er bevidste om mørk tilstand 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 sig brugerens operativsystemtema, sort på lys, hvid på mørk. Nogle brugere (udviklere, tilgængelighedsfortalere) leder aktivt efter denne detalje.

Bedste praksis for kildebilleder

Før du genererer, forbered din kilde:

1. Kvadratisk. Minimum 512×512, ideelt 1024×1024. Ikke-kvadratiske kilder beskæres eller udfyldes.
2. Enkel. Ved 16×16 px bliver komplekse logoer ulæselig grød. Test ved at knibe øjnene mod dit logo på et 16-pixelraster: kan du stadig genkende det?
3. Høj kontrast. Ikonet skal være læsbart mod enhver browserfanefarve (lys eller mørk). Sigt mod mindst 4,5:1 kontrastforhold internt.
4. Gennemsigtig baggrund (PNG/SVG). Solide baggrunde ser kantede ud i browserfanestrips, der har padding.

Hvis hele dit logo er for detaljeret, lav et forenklet symbol til faviconen, et enkelt bogstav, et ikon, en abstrakt form. Mange brands gør dette (Apples æble, Twitters fugl, Spotifys cirkler).

Privatliv: hvorfor lokal generering betyder noget

Den beskidte hemmelighed ved online favicon-generatorer: de fleste uploader dit kildelogo til deres server, genererer ikonerne og sender dig et link på e-mail.

Det indebærer, at din upublicerede brand-identitet ligger på nogen andens hardware. Til en stealth-startup, et klientprojekt under tavshedspligt eller en produktlancering er det uacceptabelt.

Alternativet: generer lokalt med HTML5 Canvas + WebAssembly til ICO-kodning. DuneTools Favicon-generator gør præcis dette, dit logo forlader aldrig din browser, generering sker på et par hundrede millisekunder, du downloader en ZIP med alle 12 filvarianter plus HTML-snippet’en.

Distributionstjekliste

1. ✅ Placer alle genererede filer i roden af dit websted (/favicon.ico, /favicon.svg, etc.). De fleste browsere leder her automatisk.
2. ✅ Tilføj <link>- og <meta>-tags fra generatoren inde i <head>.
3. ✅ Tilføj <link rel="manifest" href="/site.webmanifest"> og opret site.webmanifest med ikondefinitionerne (generatoren opretter det til dig).
4. ✅ Test på Chrome, Safari, Firefox-fane. Hard-opdater (Cmd+Shift+R eller Ctrl+F5), faviconer caches aggressivt.
5. ✅ Tilføj til iPhone startskærm (Safari → Del → Tilføj til startskærm), verificer at apple-touch-icon vises.
6. ✅ Test i mørk tilstand (system → skift tema), verificer at SVG tilpasser sig.

Almindelige fejl

1. At omdøbe en JPEG til .ico. ICO har sit eget format. At omdøbe konverterer ikke. Brug en generator.
2. Kun en 16×16 PNG. Ser godt ud i faner, frygteligt alle andre steder (proceslinje, mobil startskærm, PWA-opstartsskærm).
3. At glemme Apple Touch Icon. Når brugere tilføjer dit websted til iPhone startskærm og dit ikon mangler, bruger iOS et skærmbillede. Ser frygteligt ud.
4. Ingen theme-color meta-tag. At tilføje <meta name="theme-color"> får Chrome/Safari mobil til at bruge din brand-farve i adressefeltet, lille detalje, stor effekt.
5. Ikke at teste mørk tilstand. Et logo usynligt på mørke baggrunde er et logo, der mangler fra millioner af brugeres faner.

Reel tjekliste

Før du lancerer:

• Genereret favicon.ico (multistørrelse 16/32/48)
• Genereret favicon.svg med CSS til mørk tilstand
• Genereret favicon-16x16.png og favicon-32x32.png
• Genereret apple-touch-icon.png (180×180)
• Genereret android-chrome-192x192.png og 512x512
• Oprettet site.webmanifest med ikondefinitioner
• Tilføjet alle <link>-tags inde i <head>
• Tilføjet <meta name="theme-color">, der matcher brandet
• Hard-opdateret og verificeret, at alle størrelser vises korrekt
• Tilføjet til iOS startskærm, verificeret apple-touch-icon
• Testet mørk tilstand, verificeret at SVG tilpasser sig

Opsummering

En komplet favicon-implementering i 2026 har 8-12 filer, tager 5 minutter at generere med det rigtige værktøj og forbedrer mærkbart den opfattede professionalisme på dit websted. Spring ikke nogen formater over, der er ingen god grund til det i 2026, og omkostningen er en upload til Favicon-generator.