Hvilke favicon-størrelser trenger du i 2026? Det ideelle settet

I 2026 er det ideelle favicon-settet: en favicon.ico som inneholder bilder på 16, 32 og 48 px, en 96x96 PNG (for Google-søk), en valgfri SVG-favicon, en 180x180 apple-touch-icon.png, og 192x192- og 512x512-PNG-er (pluss et maskable 512-ikon) deklarert i et web app-manifest. Windows-fliser og eldre Apple-størrelser trengs bare hvis du må støtte svært gamle enheter. Alt nedenfor forklarer hvorfor, med en størrelsestabell, ferdig HTML og vanlige feil du bør unngå.

Favicon-landskapet pleide å være rotete: hver nettleser og hvert operativsystem ba om sin egen størrelse, noe som ga de beryktede <head>-blokkene på 20 linjer. I dag er det meste av dette utdatert. Moderne nettlesere skalerer ett godt ikon, iOS vil ha én størrelse, og Android leser manifestet. Denne artikkelen skiller mellom det som faktisk trengs og det som bare er fint å ha.

Kort svar: det ideelle settet med favicon-filer

• favicon.ico (16, 32, 48 px i én fil) i rotmappen til nettstedet. Nettlesere, feedlesere og mange verktøy ber fortsatt automatisk om /favicon.ico.
• favicon.svg (valgfri, men anbefalt) for skarp gjengivelse i alle størrelser og støtte for mørk modus.
• PNG 16x16, 32x32 og 96x96 som eksplisitte reserveløsninger. 96 px-versjonen hjelper i Google-søk, som krever et multiplum av 48 px.
• apple-touch-icon.png på 180x180, ugjennomsiktig, uten transparens.
• 192x192- og 512x512-PNG i manifest.json, pluss et maskable 512x512-ikon for Android.
• theme-color-metatagg for å farge nettleserens grensesnitt på mobil.
• Windows-fliser (70, 150, 310 px) med browserconfig.xml kun for eldre Windows og festede nettsteder i IE11.

Tabell over favicon-størrelser: formål, filnavn og prioritet

Bruk denne tabellen som en sjekkliste. «Påkrevd» betyr at et vanlig nettsted vil se ødelagt eller uferdig ut uten den; «Anbefalt» betyr en tydelig kvalitetsforbedring; «Valgfritt» betyr nisje- eller eldre bruk.

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

En ICO-fil er en beholder som rommer flere bitmaps. En god favicon.ico inneholder bilder på 16x16, 32x32 og 48x48, slik at nettleseren eller operativsystemet kan velge det som passer best. Plasser den i roten av domenet ditt (https://example.com/favicon.ico). Selv om HTML-en din peker et annet sted, ber mange crawlere, RSS-lesere og eldre nettlesere fortsatt om akkurat denne URL-en, så å ha den unngår 404-støy i loggene dine.

Ikke bare gi en PNG-fil filendelsen .ico. De fleste nettlesere tolererer det, men noen verktøy avviser det, og du mister fordelen med flere oppløsninger. Eksporter en ekte ICO.

PNG-favicons: 16, 32 og 96 px

PNG-lenker med eksplisitt sizes lar nettleseren velge det beste bildet uten å måtte lese ICO-filen. I praksis dekker 32x32 faner med høy DPI, og 16x16 er nesten overflødig i dag. Størrelsen 96x96 er verdt å legge til fordi Google-søk viser favicons ved siden av resultatene og krever et kvadratisk ikon med en størrelse som er et multiplum av 48 px (48x48, 96x96, 144x144 og så videre). En 96 px-fil gir Google en skarpere kilde enn en 48 px-fil når den nedskalerer for mobilresultater.

Designtips: ved 16 px forsvinner fine detaljer. Bruk en tydelig, enkel form, høy kontrast og lite eller ingen tekst. Du kan justere og forhåndsvise ikonet i MakeFav-editoren før du eksporterer.

SVG-favicon og mørk modus

En SVG-favicon er én liten fil som forblir skarp på alle skjermtettheter. Chromium-baserte nettlesere og Firefox støtter den. Safaris støtte har historisk vært begrenset, så stol aldri bare på SVG: behold ICO- og PNG-reserveløsningene.

Den største fordelen er tematisering. Siden en SVG kan inneholde CSS, kan du tilpasse ikonet til brukerens fargevalg 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>

Merk at mediespørringen gjenspeiler temaet i nettleseren eller operativsystemet, som er det fanelinjen bruker. Den følger ikke en temabryter på ditt eget nettsted.

Én kjent særegenhet: når både en ICO og en SVG er oppført, kan Chrome velge ICO-filen. Hvis du deklarerer ICO-filen med sizes="32x32" og oppfører SVG-en etterpå, foretrekker Chrome SVG-en, som vist i koden nedenfor.

Apple touch-ikon: 180x180 og de eldre størrelsene

Når en bruker legger nettstedet ditt til på hjemskjermen på iOS eller iPadOS, bruker Safari apple-touch-icon. I dag er én enkelt 180x180 px PNG nok: iOS skalerer den ned for eldre enheter og iPad-er. Gi den navnet apple-touch-icon.png og legg den i roten; iOS leter faktisk etter den filen som standard hvis det ikke finnes noen link-tagg.

Regler for Apple-ikonet:

• Ingen transparens. iOS fyller transparente piksler med svart, så en gjennomsiktig logo blir ofte til en svart klump. Legg til en ensfarget bakgrunn.
• Ingen avrundede hjørner. iOS bruker sin egen avrundede maske. Lever en helt kvadratisk fil.
• Hold viktig innhold unna selve kantene, siden hjørnene beskjæres.

Når trenger du de eldre størrelsene (57, 72, 76, 114, 120, 144, 152, 167)? Bare hvis du støtter iOS 6 eller eldre, eller vil ha eksakt pikselkontroll per enhet for iPad Pro (167 px) og iPad (152 px). For nesten alle nettsteder i 2026 er 180x180-filen alene god nok. Oppsettet med maksimal kompatibilitet nedenfor inkluderer noen for fullstendighetens skyld.

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

Chrome på Android og andre PWA-kompatible nettlesere leser ikoner fra web app-manifestet, ikke fra <link rel="icon">. For at appen skal kunne installeres trenger du minst en 192x192- og en 512x512-PNG. 192 px-ikonet brukes på hjemskjermen og i app-startprogrammet; 512 px-ikonet vises på startskjermer og i installasjonsdialoger.

Maskable-ikoner og sikker sone

Androids adaptive ikoner kan beskjæres til en sirkel, en squircle eller en annen form avhengig av enheten. Et maskable-ikon er designet for å kunne beskjæres trygt: det viktige innholdet må ligge innenfor den sikre sonen, en sentrert sirkel med en diameter på 80 % av bildet (radius tilsvarer 40 % av sidelengden). For en 512x512-fil betyr det at du holder logoen innenfor en sirkel på omtrent 410 px i diameter, og lar bakgrunnsfargen gå helt ut til alle fire kanter slik at det ikke blir hull etter maskering.

Deklarer maskable-ikonet som en egen oppføring med "purpose": "maskable". Unngå "any maskable" på én fil: marginen som trengs for maskering ser for liten ut når ikonet vises uten 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 lenk til den fra hver side med <link rel="manifest" href="/manifest.json">. Noen prosjekter kaller den site.webmanifest; navnet spiller ingen rolle, men lenken gjør det.

Windows-fliser og browserconfig.xml

Windows 8.1 og 10 lar brukere feste et nettsted til startmenyen, og IE11 og eldre Edge leser flisbilder fra browserconfig.xml. De vanlige størrelsene er 70x70 (liten), 150x150 (middels), 310x150 (bred) og 310x310 (stor). Chromium-baserte Edge bruker manifestet og vanlige favicons i stedet, så dette er en eldre funksjon. Ta den bare med hvis målgruppen din fortsatt omfatter eldre Windows-oppsett, for eksempel i bedriftsmiljø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: farge på nettleserens grensesnitt

Metataggen theme-color forteller mobilnettlesere (og noen skrivebordsnettlesere) hvilken farge som skal brukes på adressefeltet eller tittellinjen. Den er ikke en favicon, men hører til samme merkevaresett. Du kan oppgi separate verdier for lys og mørk modus:

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

Minimalt moderne oppsett vs. maksimal kompatibilitet

Minimalt moderne oppsett (anbefalt for de fleste nettsteder)

Fem filer dekker over 99 % av bruken i den virkelige verden: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) og de to manifestikonene (192 og 512). Legg til 96x96-PNG-en hvis synlighet i Google-søk er viktig, og et maskable-ikon hvis du leverer 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">

Oppsett med maksimal kompatibilitet

Velg dette når du har en bred eller bedriftsrettet målgruppe, eller når du vil dekke alle tenkelige klienter. Det legger til eksplisitte PNG-størrelser, eldre Apple-størrelser, Windows-fliser og temafarger.

<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>

Legg merke til de rotrelative stiene som starter med /. De fungerer på alle sidedybder, noe som bringer oss til de vanligste feilene.

Vanlige favicon-feil og hvordan du løser dem

1. Feil stier

En lenke som href="favicon.ico" løses relativt til gjeldende URL, så den fungerer på / men slutter å virke på /blog/post/. Bruk rotrelative (/favicon.ico) eller absolutte URL-er. Sjekk også at filene faktisk finnes: åpne hver URL direkte i nettleseren og kontroller at den returnerer HTTP 200, ikke en omdirigering til en 404-side eller en innloggingsvegg.

2. Manglende eller feil sizes-attributt

Uten sizes må nettlesere laste ned ikonene for å undersøke dem, og de kan velge feil. Deklarer alltid sizes på PNG-lenker, og pass på at verdien stemmer med de faktiske pikseldimensjonene. En fil merket 32x32 som egentlig er 64x64 gir inkonsekvente resultater.

3. Aggressiv hurtigbufring

Nettlesere hurtigbufrer favicons i lang tid, ofte uavhengig av sidens hurtigbuffer. Etter en ny profil kan det gamle ikonet bli hengende i flere dager. Endre filnavnet eller legg til en versjonsstreng (/favicon.ico?v=2) og oppdater link-taggene. Hard omlasting oppdaterer ofte ikke fanikonet; å åpne ikon-URL-en direkte og laste den på nytt gjør det vanligvis.

4. Ikke-kvadratiske bilder

Favicons må være kvadratiske. En rektangulær logo blir strukket, beskåret eller får uforutsigbare svarte kanter. Design et eget kvadratisk merke, for eksempel en forbokstav eller et symbol, i stedet for å krympe en bred logotekst.

5. Transparente Apple touch-ikoner som blir svarte

iOS fyller transparens med svart. Gi 180x180-ikonet en ugjennomsiktig bakgrunn, og ikke avrund hjørnene på forhånd.

6. Maskable-ikoner uten sikker sone

Hvis logoen berører kantene på et maskable-ikon, kutter Android den av. Hold den innenfor den sentrale sirkelen på 80 %, og fyll hele lerretet med bakgrunnsfargen.

7. Blokkering av ikoner for crawlere

Hvis robots.txt nekter tilgang til favicon-stien din, kan ikke Google hente den og vil vise et generisk globusikon i søkeresultatene. Husk også at Google trenger favicon-en på samme vert som siden og bare oppdaterer den av og til, så endringer kan ta dager eller uker å dukke opp.

8. Glemt manifestlenke eller purpose-verdier

Et manifest som ikke er lenket, eller som mangler 192- og 512 px-ikoner, hindrer installeringsforespørselen i Chrome. Valider det i nettleserens utviklerverktøy under Application-fanen.

Generer hele settet med ett klikk

Å lage et dusin filer for hånd i et bilderedigeringsprogram, deretter konvertere til ICO og skrive manifestet, er tungvint og feilutsatt. MakeFav genererer alle filene ovenfor fra ett enkelt bilde, én tekst eller én emoji: favicon.ico med flere størrelser, PNG-er, SVG, Apple touch-ikon, 192/512 PNG-er, et maskable-ikon, Windows-fliser, manifest.json og browserconfig.xml, pluss en ferdig HTML-snutt du kan lime inn, alt i én ZIP-nedlasting. Du kan finjustere bakgrunn, marg og form i editoren, kontrollere et eksisterende nettsted med favicon-sjekkeren og automatisere genereringen via ressursene for utviklere.

Sjekkliste for utrulling

1. Last opp alle filene til roten av nettstedet ditt.
2. Lim HTML-snutten inn i <head> på hver side (eller i den delte layouten).
3. Sørg for at stiene er rotrelative og returnerer HTTP 200.
4. Sjekk lys og mørk modus, en installasjon på hjemskjermen i iOS og en installasjon på Android.
5. Kjør sjekkeren for å fange opp manglende eller feilaktige størrelser.
6. Tøm hurtigbufrene med en versjonsstreng hvis du har byttet ut et gammelt ikon.

Ofte stilte spørsmål

Trenger jeg fortsatt favicon.ico i 2026?

Ja. Selv om moderne nettlesere godtar PNG og SVG, ber mange crawlere, feedlesere, e-postklienter og eldre nettlesere fortsatt direkte om /favicon.ico. En ICO med flere størrelser og bilder på 16, 32 og 48 px er en liten fil som forhindrer manglende ikoner og 404-feil.

Hvilken størrelse bør en favicon ha for Google-søk?

Google krever en kvadratisk favicon med en størrelse som er et multiplum av 48 px, minst 48x48. En 96x96 PNG er et trygt valg, og SVG støttes også. Google krever også at filen kan crawles, så ikke blokker den i robots.txt. Oppdateringer kan ta dager eller uker å dukke opp.

Er 180x180 nok for Apple touch-ikonet?

For nesten alle nettsteder, ja. iOS og iPadOS nedskalerer en 180x180 PNG for alle nåværende enheter. De eldre størrelsene (57 til 152 px) har bare betydning for svært gamle iOS-versjoner. Husk å bruke en ugjennomsiktig bakgrunn slik at ikonet ikke blir svart.

Hva er et maskable-ikon, og trenger jeg et?

Et maskable-ikon er en 512x512 PNG designet for Androids adaptive ikonformer. Det viktige innholdet ligger innenfor en sirkel med 80 % diameter i midten, og bakgrunnen fyller hele kvadratet. Du trenger det bare hvis du tilbyr en installerbar PWA, men det får ikonet til å se naturlig ut i stedet for å sitte i en hvit sirkel.

Hvorfor vises den gamle favicon-en min fortsatt etter at jeg har endret den?

Nettlesere hurtigbufrer favicons separat og i lang tid. Gi filen nytt navn eller legg til en versjonsstreng som ?v=2, oppdater link-taggene, og åpne deretter ikon-URL-en direkte og last den på nytt. Søkemotorer kan bruke lengre tid på å oppdatere sin egen kopi.