Favicons
Website ikoner • Browser tabs • Mobile søgeresultater • Branding
Hurtig definition:
Et favicon er et lille ikon der repræsenterer dit website i browser tabs, bogmærker og mobile søgeresultater - vigtig for branding og genkendelse.
Favicon
Et favicon er et lille ikon, der repræsenterer et website. I de fleste browsere vises favicon til venstre for adressefeltet, når man er inde på en webside. Faviconet bruges også som ikon, når en hjemmeside URL bliver gemt som et bogmærke, i en browser og vises også i Googles mobile søgeresultater, for websider der har et favicon implementeret.
⭐ Moderne virkelighed: Favicons er blevet kritiske for brand recognition og mobile SEO performance
Format
I tidernes morgen var det et krav, at et favicon var formateret i Microsofts .ico format. Samme format som benyttes til Microsoft Windows skrivebordsikoner.
Tidligere skulle et favicon altså altid formateres som .ico og hedde favicon.ico. Efter introduktionen af sizes attributter i HTML5, er det ikke længere nødvendigt at komprimere PNG filer til et .ico format.
Hvor stort skal et favicon være?
Standarddimensionen for et favicon er 16x16px, men den dag i dag, kan også 32x32px og 96x96px benyttes. De bliver blot skaleret til det korrekte format. 32x32px er taskbar shortcut icon størrelsen og 96x96px er desktop shortcurt icon størrelsen, men også dimensionerne for ikoner i Google TV.
Implementering
Benyttes der HTML5 til at definere favicon, er her et par kodeeksempler:
<link rel="icon" type="image/png" href="https://Bondtofte.dk/favicon-16×16.png" sizes="16×16″>
<link rel="icon" type="image/png" href="https://Bondtofte.dk/favicon-32×32.png" sizes="32×32″>Standardimplementering har ikke sizes defineret, men henviser blot til filen, uden at definere filtype, dette skal derfor være i .ico format:
<link rel="icon" href="https://Bondtofte.dk/favicon-32×32.png">Favicon I Googles søgeresultater
Google tester for tiden visning af favicon direkte i søgeresultaterne, hvis man vel og mærke søger på sin mobiltelefon. Det er nemlig kun de mobile søgeresultater, der har favicon med sig ud i søgeresultaterne.
Hvorvidt Google bliver ved med at vise favicons i søgeresultaterne, er usikkert – men da de gør det lige nu, er det værd at bruge tid på, at få udarbejdet et ordentligt favicon, hvis man ikke allerede har det.
Ligesom alt andet der trækkes med ud i søgeresultaterne, kan det påvirke klikraten på dit resultat, versus de andre konkurrenter der også vises på søgeresultatsiden. Et hvert blikfang, der kan adskille dit website fra konkurrenternes, kan gøre en markant forskel.
Moderne favicon best practices og komplette implementering
Komplet favicon implementering 2025
<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<!-- Apple touch icons -->
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<!-- PWA manifest icons -->
<link rel="manifest" href="/site.webmanifest">
<!-- Browser specifikke -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">Anbefalede favicon størrelser
Browser favicons
Apple iOS ikoner
Progressive Web App
Design retningslinjer
Browser kompatibilitet og tekniske considerations
Browser understøttelse
| Browser | ICO | PNG | SVG |
|---|---|---|---|
| Chrome | ✅ Fuld | ✅ Fuld | ✅ Fuld |
| Firefox | ✅ Fuld | ✅ Fuld | ✅ Fra v41 |
| Safari | ✅ Fuld | ✅ Fuld | ⚠️ Begrænset |
| Edge | ✅ Fuld | ✅ Fuld | ✅ Fra v79 |
Performance og loading
Fejlfinding og test værktøjer
Ofte stillede spørgsmål
Hvad betyder Favicon?
Favicon er et lille ikon, der repræsenterer en hjemmeside. Når man befinder sig på en hjemmeside findes favicon ikonet som oftest til venstre for adressefeltet i browseren. Favicon er også det ikon du kan se, når du gemmer en hjemmesides URL som bogmærke og kan ligeledes ses i mobile søgeresultater for hjemmesider, der har favicon installeret.
Hvor stort skal et favicon være?
Som oftest er standarddimensionen for et favicon ikon 16x16px, men findes også i størrelses ordningen 32x32px og 96x96px. Det skalerede 32x32px format er taskbar shortcut ikon størrelsen og 96x96px er desktop ikon størrelsen, som også benyttes som ikoner i Google TV.
Hvordan implementerer man favicon?
Benytter man HTML5 til at definere favicon kan et kodeeksempel se således ud: <link rel="icon" type="image/png" href="https://Bondtofte.dk/favicon-16×16.png" sizes="16×16″> For tiden tester Google visning af favicon i søgeresultaterne ved søgninger på mobiltelefonen. Det er nemlig kun de mobile søgeresultater, der har favicon med i visningen af søgeresultater.
Skal jeg have forskellige favicon størrelser?
Ja, anbefalet! Moderne websites bør have flere størrelser: 16x16px og 32x32px for browser tabs, 180x180px Apple touch icon for iOS enheder, og 192x192px + 512x512px for Progressive Web Apps. Dette sikrer optimal visning på alle enheder og platforme.
Påvirker favicons mit SEO direkte?
Favicons er ikke en direkte ranking faktor, men de påvirker brugeroplevelsen markant. I mobile søgeresultater kan et godt favicon øge klik-procenten med 5-15% ved at gøre dit resultat mere genkendelig og troværdigt sammenlignet med konkurrenter uden favicon.
Hvad er forskellen mellem favicon og Apple touch icon?
Favicon bruges i browser tabs og bogmærker, mens Apple touch icon vises når brugere gemmer dit website på iOS hjemmeskærmen. Apple touch ikoner er typisk 180x180px og bør være optimeret for det kvadratiske iOS ikon-design med afrundede hjørner.
Kan jeg bruge SVG som favicon?
Moderne browsere understøtter SVG favicons, hvilket giver skalérbare ikoner der ser skarpe ud på alle opløsninger. Dog understøtter ældre browsere ikke SVG, så inkluder altid en PNG/ICO fallback for maksimal kompatibilitet.
Hvordan tester jeg at mit favicon virker korrekt?
Test i forskellige browsere, tjek mobile Google søgeresultater, verificer Apple touch icon på iOS enheder, og brug værktøjer som Favicon Checker eller Real Favicon Generator til at validere implementeringen på tværs af alle platforme og enheder.
📐 Størrelse guide
🎨 Design tips
📁 Format understøttelse
ICO
Universal kompatibilitet
PNG
Moderne browsers, bedre kvalitet
SVG
Skalérbar, ikke alle browsers
🛠️ Værktøjer og generatorer
Real Favicon Generator
Komplet favicon suite generator
Favicon.io
Gratis favicon fra tekst/billede
Favicon Checker
Test favicon på alle platforme
PWA Builder
Microsoft PWA icon generator
Relaterede termer
Brug for hjælp med website branding og teknisk implementering?
Fra favicon design og implementering til komplet website branding og teknisk SEO optimering - få professionel hjælp til at skabe et sammenhængende og professionelt online brand.