Hvilke favicon-størrelser har du brug for i 2026? Det ideelle sæt

I 2026 er det ideelle favicon-sæt: en favicon.ico med billeder på 16, 32 og 48 px, en 96x96 PNG (til Google Søgning), et valgfrit SVG-favicon, en 180x180 apple-touch-icon.png samt 192x192- og 512x512-PNG'er (plus et maskable 512-ikon), der er angivet i et web app manifest. Windows-fliser og ældre Apple-størrelser er kun nødvendige, hvis du skal understøtte meget gamle enheder. Nedenfor forklarer vi hvorfor, med en størrelsestabel, brugsklar HTML og almindelige fejl, du bør undgå.

Favicon-landskabet plejede at være rodet: Hver browser og hvert operativsystem bad om sin egen størrelse, hvilket førte til de berygtede <head>-blokke på 20 linjer. I dag er det meste af det forældet. Moderne browsere skalerer ét godt ikon, iOS vil have én størrelse, og Android læser manifestet. Denne artikel skiller det, der virkelig er nødvendigt, fra det, der blot er rart at have.

Det korte svar: Det ideelle sæt favicon-filer

• favicon.ico (16, 32, 48 px i én fil) i sidens rodmappe. Browsere, feedlæsere og mange værktøjer anmoder stadig automatisk om /favicon.ico.
• favicon.svg (valgfrit, men anbefalet) til knivskarp gengivelse i enhver størrelse og understøttelse af mørk tilstand.
• PNG 16x16, 32x32 og 96x96 som eksplicitte fallbacks. 96 px-versionen hjælper Google Søgning, som kræver et multiplum af 48 px.
• apple-touch-icon.png på 180x180, uigennemsigtigt, uden transparens.
• 192x192 og 512x512 PNG i manifest.json plus et maskable 512x512-ikon til Android.
• theme-color-metatag til at farve browserens brugerflade på mobil.
• Windows-fliser (70, 150, 310 px) med browserconfig.xml kun til ældre Windows og fastgjorte sider i IE11.

Tabel over favicon-størrelser: formål, filnavne og prioritet

Brug denne tabel som tjekliste. "Påkrævet" betyder, at en almindelig side vil se ødelagt eller ufærdig ud uden; "Anbefalet" betyder en tydelig kvalitetsforbedring; "Valgfri" betyder nicheformål eller ældre brug.

favicon.ico: 16, 32 og 48 px i én fil

En ICO-fil er en container, der rummer flere bitmaps. En god favicon.ico indeholder billeder på 16x16, 32x32 og 48x48, så browseren eller operativsystemet kan vælge det nærmeste match. Placér den i roden af dit domæne (https://example.com/favicon.ico). Selv hvis din HTML peger et andet sted hen, anmoder mange crawlere, RSS-læsere og ældre browsere stadig om præcis denne URL, så med filen undgår du 404-støj i dine logfiler.

Omdøb ikke bare en PNG til .ico. De fleste browsere tolererer det, men nogle værktøjer afviser det, og du mister fordelen ved flere opløsninger. Eksportér en rigtig ICO.

PNG-favicons: 16, 32 og 96 px

PNG-links med eksplicit sizes lader browseren vælge det bedste bitmap uden at skulle læse ICO-filen. I praksis dækker 32x32 faner med høj DPI, og 16x16 er i dag næsten overflødig. Størrelsen 96x96 er værd at tilføje, fordi Google Søgning viser favicons ved siden af resultaterne og kræver et kvadratisk ikon, hvis størrelse er et multiplum af 48 px (48x48, 96x96, 144x144 og så videre). En 96 px-fil giver Google en skarpere kilde end en på 48 px, når den nedskaleres til mobilresultater.

Designtip: Ved 16 px forsvinder fine detaljer. Brug en kraftig, enkel form, høj kontrast og lidt eller ingen tekst. Du kan justere og se et eksempel på dit ikon i MakeFav-editoren, før du eksporterer.

SVG-favicon og mørk tilstand

Et SVG-favicon er én lille fil, der forbliver skarp ved enhver skærmtæthed. Chromium-baserede browsere og Firefox understøtter det. Safaris understøttelse har historisk været begrænset, så stol aldrig kun på SVG: Behold ICO- og PNG-fallbacks.

Den største fordel er tematisering. Fordi et SVG kan indeholde CSS, kan du tilpasse ikonet til brugerens farveskema med prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Bemærk, at media query'en afspejler browserens eller OS'ets tema, som er det, fanelinjen bruger. Den følger ikke en temaskifter på din egen hjemmeside.

Én kendt finurlighed: Når både en ICO og et SVG er angivet, kan Chrome vælge ICO'en. Hvis du angiver ICO'en med sizes="32x32" og lister SVG'et bagefter, vælger Chrome SVG'et, som vist i koden nedenfor.

Apple touch-ikon: 180x180 og de ældre størrelser

Når en bruger føjer din side til hjemmeskærmen på iOS eller iPadOS, bruger Safari apple-touch-icon. I dag er én enkelt PNG på 180x180 px nok: iOS skalerer den ned til ældre enheder og iPads. Kald den apple-touch-icon.png og læg den i roden; iOS leder endda efter den fil som standard, hvis der ikke findes noget link-tag.

Regler for Apple-ikonet:

• Ingen transparens. iOS fylder transparente pixels med sort, så et transparent logo bliver ofte til en sort klat. Tilføj en ensfarvet baggrund.
• Ingen afrundede hjørner. iOS anvender sin egen afrundede maske. Levér et helt kvadrat.
• Hold vigtigt indhold væk fra de yderste kanter, da hjørnerne bliver beskåret.

Hvornår har du brug for de ældre størrelser (57, 72, 76, 114, 120, 144, 152, 167)? Kun hvis du understøtter iOS 6 eller ældre, eller ønsker pixelpræcis kontrol pr. enhed for iPad Pro (167 px) og iPad (152 px). For stort set alle sider i 2026 er filen på 180x180 alene fint nok. Opsætningen med maksimal kompatibilitet nedenfor indeholder nogle få for fuldstændighedens skyld.

Android- og PWA-ikoner: 192, 512 og maskable

Chrome på Android og andre PWA-kompatible browsere læser ikoner fra web app manifestet, ikke fra <link rel="icon">. For at kunne installeres skal du som minimum have en 192x192- og en 512x512-PNG. Ikonet på 192 px bruges på hjemmeskærmen og i app-launcheren; ikonet på 512 px vises på splashskærme og i installationsdialoger.

Maskable-ikoner og sikkerhedszonen

Androids adaptive ikoner kan beskæres til en cirkel, squircle eller anden form afhængigt af enheden. Et maskable-ikon er designet til at kunne beskæres sikkert: Det vigtige indhold skal ligge inden for sikkerhedszonen, en centreret cirkel med en diameter på 80 % af billedet (radius svarer til 40 % af siden). For en fil på 512x512 betyder det, at dit logo skal holdes inden for en cirkel på cirka 410 px i diameter, og at baggrundsfarven skal række ud til alle fire kanter, så der ikke vises huller efter maskering.

Angiv maskable-ikonet som sin egen post med "purpose": "maskable". Undgå "any maskable" på én fil: Den margen, der skal bruges til maskering, ser for lille ud, når ikonet vises uden maske.

Eksempel på manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Server filen som application/manifest+json (eller application/json) og link til den fra hver side med <link rel="manifest" href="/manifest.json">. Nogle projekter kalder den site.webmanifest; navnet er ligegyldigt, det er linket, der tæller.

Windows-fliser og browserconfig.xml

Windows 8.1 og 10 lader brugere fastgøre en side til Startmenuen, og IE11 og ældre Edge læser flisebilleder fra browserconfig.xml. De sædvanlige størrelser er 70x70 (lille), 150x150 (mellem), 310x150 (bred) og 310x310 (stor). Chromium-baseret Edge bruger i stedet manifestet og almindelige favicons, så dette er en ældre funktion. Medtag den kun, hvis din målgruppe stadig omfatter ældre Windows-opsætninger, for eksempel i virksomhedsmiljøer.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: farvning af browserens brugerflade

Metatagget theme-color fortæller mobilbrowsere (og nogle desktopbrowsere), hvilken farve der skal bruges til adresselinjen eller titellinjen. Det er ikke et favicon, men det hører til det samme brandingsæt. Du kan angive separate værdier til lys og mørk tilstand:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Minimal moderne opsætning vs. maksimal kompatibilitet

Minimal moderne opsætning (anbefalet til de fleste sider)

Fem filer dækker over 99 % af den virkelige brug: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) og de to manifestikoner (192 og 512). Tilføj PNG'en på 96x96, hvis synlighed i Google Søgning har betydning, og et maskable-ikon, hvis du udgiver en PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Opsætning med maksimal kompatibilitet

Vælg denne, når du betjener en bred målgruppe eller virksomhedsbrugere, eller når du vil have alle tænkelige klienter dækket. Den tilføjer eksplicitte PNG-størrelser, ældre Apple-størrelser, Windows-fliser og temafarver.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Læg mærke til de rodrelative stier, der starter med /. De virker uanset sidens dybde, hvilket bringer os til de mest almindelige fejl.

Almindelige favicon-fejl og hvordan du løser dem

1. Forkerte stier

Et link som href="favicon.ico" opløses relativt til den aktuelle URL, så det virker på /, men fejler på /blog/post/. Brug rodrelative (/favicon.ico) eller absolutte URL'er. Tjek også, at filerne rent faktisk findes: Åbn hver URL direkte i browseren, og sørg for, at den returnerer HTTP 200, ikke en omdirigering til en 404-side eller en login-mur.

2. Manglende eller forkert sizes-attribut

Uden sizes er browsere nødt til at downloade ikoner for at undersøge dem og kan vælge det forkerte. Angiv altid sizes på PNG-links, og sørg for, at det svarer til de reelle pixelmål. En fil mærket 32x32, som i virkeligheden er 64x64, giver inkonsistente resultater.

3. Aggressiv caching

Browsere cacher favicons i lang tid, ofte uafhængigt af sidens cache. Efter en rebranding kan det gamle ikon hænge ved i flere dage. Skift filnavnet eller tilføj en versionsparameter (/favicon.ico?v=2), og opdatér link-tagsene. Hård genindlæsning opdaterer ofte ikke faneikonet; at åbne ikonets URL direkte og genindlæse den gør det som regel.

4. Ikke-kvadratiske billeder

Favicons skal være kvadratiske. Et rektangulært logo bliver strakt, beskåret eller får tilfældige sorte bjælker. Design et dedikeret kvadratisk mærke, f.eks. et initial eller et symbol, i stedet for at skrumpe et bredt ordmærke.

5. Transparente Apple touch-ikoner, der bliver sorte

iOS fylder transparens med sort. Giv ikonet på 180x180 en uigennemsigtig baggrund, og rund ikke hjørnerne på forhånd.

6. Maskable-ikoner uden sikkerhedszone

Hvis logoet rører kanterne af et maskable-ikon, skærer Android det af. Hold det inden for den centrale cirkel på 80 %, og fyld hele lærredet med baggrundsfarven.

7. Blokering af ikoner for crawlere

Hvis robots.txt forbyder din favicon-sti, kan Google ikke hente den og viser et generisk globusikon i søgeresultaterne. Husk også, at Google har brug for favicon'et på samme host som siden og kun opdaterer det en gang imellem, så ændringer kan tage dage eller uger at dukke op.

8. Glemt manifest-link eller purposes

Et manifest, der ikke er linket, eller som mangler ikoner på 192 og 512 px, forhindrer installationsprompten i Chrome. Validér det i din browsers udviklerværktøjer under fanen Application.

Generér hele sættet med ét klik

At lave et dusin filer i hånden i et billedredigeringsprogram, derefter konvertere til ICO og skrive manifestet, er besværligt og fejlbehæftet. MakeFav genererer alle ovenstående filer ud fra ét billede, en tekst eller en emoji: favicon.ico med flere størrelser, PNG'er, SVG, Apple touch-ikon, PNG'er på 192/512, et maskable-ikon, Windows-fliser, manifest.json og browserconfig.xml plus et HTML-uddrag klar til indsættelse, alt sammen i én ZIP-download. Du kan finjustere baggrund, margen og form i editoren, kontrollere en eksisterende side med favicon-checkeren og automatisere genereringen via udviklerressourcerne.

Tjekliste til udrulning

1. Upload alle filer til roden af din side.
2. Indsæt HTML-uddraget i <head> på hver side (eller i dit fælles layout).
3. Sørg for, at stierne er rodrelative og returnerer HTTP 200.
4. Tjek lys og mørk tilstand, en installation på iOS-hjemmeskærmen og en Android-installation.
5. Kør checkeren for at fange manglende eller uoverensstemmende størrelser.
6. Ryd cachen med en versionsstreng, hvis du har udskiftet et gammelt ikon.

Ofte stillede spørgsmål

Har jeg stadig brug for favicon.ico i 2026?

Ja. Selvom moderne browsere accepterer PNG og SVG, anmoder mange crawlere, feedlæsere, mailklienter og ældre browsere stadig direkte om /favicon.ico. En ICO med flere størrelser og billeder på 16, 32 og 48 px er en lille fil, der forhindrer manglende ikoner og 404-fejl.

Hvilken størrelse skal et favicon have til Google Søgning?

Google kræver et kvadratisk favicon, hvis størrelse er et multiplum af 48 px, mindst 48x48. En 96x96 PNG er et sikkert valg, og et SVG understøttes også. Google har også brug for, at filen kan crawles, så bloker den ikke i robots.txt. Opdateringer kan tage dage eller uger at dukke op.

Er 180x180 nok til Apple touch-ikonet?

For næsten alle sider, ja. iOS og iPadOS nedskalerer en 180x180 PNG til alle nuværende enheder. De ældre størrelser (57 til 152 px) har kun betydning for meget gamle iOS-versioner. Husk at bruge en uigennemsigtig baggrund, så ikonet ikke bliver sort.

Hvad er et maskable-ikon, og har jeg brug for et?

Et maskable-ikon er en 512x512 PNG designet til Androids adaptive ikonformer. Det vigtige indhold ligger inden for en cirkel med 80 % diameter i midten, og baggrunden fylder hele kvadratet. Du har kun brug for det, hvis du tilbyder en PWA, der kan installeres, men det får ikonet til at se native ud i stedet for at sidde i en hvid cirkel.

Hvorfor vises mit gamle favicon stadig, efter jeg har ændret det?

Browsere cacher favicons separat og i lang tid. Omdøb filen eller tilføj en versionsparameter som ?v=2, opdatér link-tagsene, og åbn derefter ikonets URL direkte og genindlæs den. Søgemaskiner kan bruge længere tid på at opdatere deres egen kopi.