Welke favicon-formaten heb je nodig in 2026? De ideale set

In 2026 ziet de ideale favicon-set er zo uit: een favicon.ico met afbeeldingen van 16, 32 en 48 px, een PNG van 96x96 (voor Google Zoeken), een optionele SVG-favicon, een apple-touch-icon.png van 180x180 en PNG's van 192x192 en 512x512 (plus een maskable 512) die in een web app manifest worden gedeclareerd. Windows-tegels en oudere Apple-formaten heb je alleen nodig als je zeer oude apparaten moet ondersteunen. Hieronder lees je waarom, met een formatentabel, kant-en-klare HTML en veelgemaakte fouten die je kunt vermijden.

Het favicon-landschap was vroeger een rommeltje: elke browser en elk besturingssysteem vroeg om een eigen formaat, wat leidde tot de beruchte <head>-blokken van 20 regels. Tegenwoordig is het meeste daarvan achterhaald. Moderne browsers schalen één goed icoon, iOS wil één formaat en Android leest het manifest. Dit artikel scheidt wat echt nodig is van wat alleen leuk is om te hebben.

Het korte antwoord: de ideale set favicon-bestanden

• favicon.ico (16, 32, 48 px in één bestand) in de hoofdmap van je site. Browsers, feedreaders en veel tools vragen nog steeds automatisch /favicon.ico op.
• favicon.svg (optioneel maar aanbevolen) voor scherpe weergave op elk formaat en ondersteuning voor de donkere modus.
• PNG 16x16, 32x32 en 96x96 als expliciete fallbacks. De versie van 96 px helpt bij Google Zoeken, dat een veelvoud van 48 px vereist.
• apple-touch-icon.png van 180x180, ondoorzichtig, zonder transparantie.
• PNG van 192x192 en 512x512 in manifest.json, plus een maskable icoon van 512x512 voor Android.
• theme-color meta-tag voor het inkleuren van de browser-UI op mobiel.
• Windows-tegels (70, 150, 310 px) met browserconfig.xml alleen voor oudere Windows-versies en vastgepinde sites in IE11.

Tabel met favicon-formaten: doel, bestandsnamen en prioriteit

Gebruik deze tabel als checklist. "Vereist" betekent dat een gewone site er kapot of onaf uitziet zonder; "Aanbevolen" betekent een duidelijke kwaliteitswinst; "Optioneel" betekent specifiek of verouderd gebruik.

favicon.ico: 16, 32 en 48 px in één bestand

Een ICO-bestand is een container met meerdere bitmaps. Een goede favicon.ico bevat afbeeldingen van 16x16, 32x32 en 48x48, zodat de browser of het besturingssysteem de beste match kan kiezen. Plaats het in de hoofdmap van je domein (https://example.com/favicon.ico). Zelfs als je HTML ergens anders naartoe verwijst, vragen veel crawlers, RSS-readers en oudere browsers nog steeds precies die URL op. Door het bestand te hebben voorkom je 404-ruis in je logs.

Hernoem niet zomaar een PNG naar .ico. De meeste browsers tolereren dat, maar sommige tools weigeren het en je mist het voordeel van meerdere resoluties. Exporteer een echt ICO-bestand.

PNG-favicons: 16, 32 en 96 px

Met PNG-links met expliciete sizes kan de browser de beste bitmap kiezen zonder het ICO-bestand te hoeven uitlezen. In de praktijk dekt 32x32 tabs met hoge resolutie, en is 16x16 tegenwoordig bijna overbodig. Het formaat 96x96 is het toevoegen waard, omdat Google Zoeken favicons naast resultaten toont en een vierkant icoon vereist waarvan het formaat een veelvoud van 48 px is (48x48, 96x96, 144x144 enzovoort). Een bestand van 96 px geeft Google een scherpere bron dan een van 48 px wanneer het verkleint voor mobiele resultaten.

Ontwerptip: op 16 px verdwijnen fijne details. Gebruik een gedurfde, eenvoudige vorm, hoog contrast en weinig of geen tekst. Je kunt je icoon aanpassen en bekijken in de MakeFav-editor voordat je het exporteert.

SVG-favicon en donkere modus

Een SVG-favicon is één klein bestand dat op elke schermdichtheid scherp blijft. Op Chromium gebaseerde browsers en Firefox ondersteunen het. De ondersteuning in Safari was historisch beperkt, dus vertrouw nooit alleen op SVG: houd de ICO- en PNG-fallbacks aan.

Het grootste voordeel is thematisering. Omdat een SVG CSS kan bevatten, kun je het icoon aanpassen aan het kleurenschema van de gebruiker met 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>

Houd er rekening mee dat de mediaquery het thema van de browser of het besturingssysteem weergeeft, en dat is wat de tabbalk gebruikt. Het volgt niet een thema-schakelaar op je eigen website.

Een bekende eigenaardigheid: als zowel een ICO als een SVG is opgenomen, kiest Chrome soms de ICO. Als je de ICO declareert met sizes="32x32" en de SVG daarna vermeldt, geeft Chrome de voorkeur aan de SVG, zoals in de code hieronder te zien is.

Apple touch icon: 180x180 en de oudere formaten

Wanneer een gebruiker je site toevoegt aan het beginscherm van iOS of iPadOS, gebruikt Safari de apple-touch-icon. Tegenwoordig volstaat één PNG van 180x180 px: iOS schaalt die omlaag voor oudere apparaten en iPads. Noem het apple-touch-icon.png en zet het in de hoofdmap; iOS zoekt zelfs standaard naar dat bestand als er geen link-tag is.

Regels voor het Apple-icoon:

• Geen transparantie. iOS vult transparante pixels met zwart, waardoor een transparant logo vaak een zwarte vlek wordt. Voeg een effen achtergrondkleur toe.
• Geen afgeronde hoeken. iOS past zijn eigen afgeronde masker toe. Lever een volledig vierkant aan.
• Houd belangrijke inhoud uit de buurt van de uiterste randen, omdat de hoeken worden afgeknipt.

Wanneer heb je de oudere formaten (57, 72, 76, 114, 120, 144, 152, 167) nodig? Alleen als je iOS 6 of ouder ondersteunt, of exacte pixelcontrole per apparaat wilt voor de iPad Pro (167 px) en iPad (152 px). Voor vrijwel elke site in 2026 volstaat het bestand van 180x180. De maximale-compatibiliteitsopzet hieronder bevat er een paar voor de volledigheid.

Android- en PWA-iconen: 192, 512 en maskable

Chrome op Android en andere PWA-compatibele browsers lezen iconen uit het web app manifest, niet uit <link rel="icon">. Voor installeerbaarheid heb je minstens een PNG van 192x192 en een van 512x512 nodig. Het icoon van 192 px wordt gebruikt op het beginscherm en in de app-starter; het icoon van 512 px verschijnt op opstartschermen en in installatiedialogen.

Maskable iconen en de veilige zone

Adaptieve iconen van Android kunnen, afhankelijk van het apparaat, worden bijgesneden tot een cirkel, squircle of andere vorm. Een maskable icoon is ontworpen om veilig te worden bijgesneden: de belangrijke inhoud moet binnen de veilige zone liggen, een gecentreerde cirkel met een diameter van 80% van de afbeelding (straal gelijk aan 40% van de zijde). Voor een bestand van 512x512 betekent dat dat je logo binnen een cirkel met een diameter van ongeveer 410 px moet blijven, en dat de achtergrondkleur tot aan alle vier de randen doorloopt, zodat er na het maskeren geen gaten zichtbaar zijn.

Declareer het maskable icoon als een eigen item met "purpose": "maskable". Vermijd "any maskable" op één bestand: de marge die nodig is voor maskeren ziet er te klein uit wanneer het icoon zonder masker wordt getoond.

Voorbeeld van 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"
    }
  ]
}

Lever het bestand uit als application/manifest+json (of application/json) en link ernaar vanaf elke pagina met <link rel="manifest" href="/manifest.json">. Sommige projecten noemen het site.webmanifest; de naam maakt niet uit, de link wel.

Windows-tegels en browserconfig.xml

Met Windows 8.1 en 10 kunnen gebruikers een site vastpinnen aan het startmenu, en IE11 en de oude Edge lezen tegelafbeeldingen uit browserconfig.xml. De gebruikelijke formaten zijn 70x70 (klein), 150x150 (middel), 310x150 (breed) en 310x310 (groot). Op Chromium gebaseerde Edge gebruikt in plaats daarvan het manifest en gewone favicons, dus dit is een verouderde functie. Neem het alleen op als je doelgroep nog oudere Windows-omgevingen omvat, bijvoorbeeld in zakelijke omgevingen.

<?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: de browser-UI inkleuren

De theme-color meta-tag vertelt mobiele browsers (en sommige desktopbrowsers) welke kleur ze moeten gebruiken voor de adresbalk of titelbalk. Het is geen favicon, maar het hoort bij dezelfde huisstijlset. Je kunt aparte waarden opgeven voor de lichte en donkere modus:

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

Minimale moderne opzet versus maximale compatibiliteit

Minimale moderne opzet (aanbevolen voor de meeste sites)

Vijf bestanden dekken meer dan 99% van het gebruik in de praktijk: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) en de twee manifest-iconen (192 en 512). Voeg de PNG van 96x96 toe als zichtbaarheid in Google Zoeken ertoe doet, en een maskable icoon als je een PWA aanbiedt.

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

Opzet met maximale compatibiliteit

Kies dit wanneer je een breed publiek of een zakelijk publiek bedient, of wanneer je elke mogelijke client wilt afdekken. Het voegt expliciete PNG-formaten, oudere Apple-formaten, Windows-tegels en themakleuren toe.

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

Let op de root-relatieve paden die met / beginnen. Ze werken op elke paginadiepte, en daarmee komen we bij de meest voorkomende fouten.

Veelgemaakte favicon-fouten en hoe je ze oplost

1. Verkeerde paden

Een link zoals href="favicon.ico" wordt relatief aan de huidige URL opgelost, dus het werkt op / maar niet op /blog/post/. Gebruik root-relatieve (/favicon.ico) of absolute URL's. Controleer ook of de bestanden echt bestaan: open elke URL rechtstreeks in de browser en controleer of die HTTP 200 teruggeeft, en niet een doorverwijzing naar een 404-pagina of een inlogmuur.

2. Ontbrekend of onjuist sizes-attribuut

Zonder sizes moeten browsers iconen downloaden om ze te inspecteren, en kunnen ze het verkeerde kiezen. Declareer altijd sizes op PNG-links en zorg dat het overeenkomt met de werkelijke pixelafmetingen. Een bestand dat als 32x32 is gelabeld maar in werkelijkheid 64x64 is, geeft inconsistente resultaten.

3. Agressieve caching

Browsers cachen favicons lange tijd, vaak los van de paginacache. Na een rebranding kan het oude icoon nog dagenlang blijven hangen. Wijzig de bestandsnaam of voeg een versie-querystring toe (/favicon.ico?v=2) en werk de link-tags bij. Een harde herlaadactie ververst het tabicoon vaak niet; de icoon-URL rechtstreeks openen en die herladen meestal wel.

4. Niet-vierkante afbeeldingen

Favicons moeten vierkant zijn. Een rechthoekig logo wordt onvoorspelbaar uitgerekt, bijgesneden of met balken weergegeven. Ontwerp een speciaal vierkant beeldmerk, zoals een initiaal of symbool, in plaats van een breed woordmerk te verkleinen.

5. Transparante Apple touch icons die zwart worden

iOS vult transparantie met zwart. Geef het icoon van 180x180 een ondoorzichtige achtergrond en rond de hoeken niet vooraf af.

6. Maskable iconen zonder veilige zone

Als het logo de randen van een maskable icoon raakt, snijdt Android het af. Houd het binnen de centrale cirkel van 80% en vul het hele canvas met de achtergrondkleur.

7. Iconen blokkeren voor crawlers

Als robots.txt het pad van je favicon verbiedt, kan Google het niet ophalen en toont het een generiek wereldbolicoon in de zoekresultaten. Bedenk ook dat Google de favicon op dezelfde host als de pagina nodig heeft en die maar af en toe ververst, zodat wijzigingen dagen of weken kunnen duren voordat ze zichtbaar zijn.

8. De manifest-link of purposes vergeten

Een manifest dat niet is gelinkt, of dat geen iconen van 192 en 512 px bevat, verhindert de installatiemelding in Chrome. Valideer het in de ontwikkelaarstools van je browser onder het tabblad Application.

Genereer de hele set met één klik

Een dozijn bestanden met de hand maken in een beeldbewerker, daarna omzetten naar ICO en het manifest schrijven, is vervelend en foutgevoelig. MakeFav genereert alle bovenstaande bestanden vanuit één afbeelding, tekst of emoji: een favicon.ico met meerdere formaten, PNG's, SVG, Apple touch icon, PNG's van 192/512, een maskable icoon, Windows-tegels, manifest.json en browserconfig.xml, plus een kant-en-klaar HTML-fragment om te plakken, alles in één ZIP-download. Je kunt achtergrond, marge en vorm verfijnen in de editor, een bestaande site controleren met de favicon-checker en het genereren automatiseren via de ontwikkelaarsbronnen.

Checklist voor implementatie

1. Upload alle bestanden naar de hoofdmap van je site.
2. Plak het HTML-fragment in de <head> van elke pagina (of in je gedeelde layout).
3. Zorg dat de paden root-relatief zijn en HTTP 200 teruggeven.
4. Controleer de lichte en donkere modus, een installatie op het iOS-beginscherm en een Android-installatie.
5. Draai de checker om ontbrekende of niet-overeenkomende formaten op te sporen.
6. Omzeil caches met een versiestring als je een oud icoon hebt vervangen.

Veelgestelde vragen

Heb ik favicon.ico in 2026 nog nodig?

Ja. Hoewel moderne browsers PNG en SVG accepteren, vragen veel crawlers, feedreaders, e-mailclients en oudere browsers nog steeds rechtstreeks /favicon.ico op. Een ICO met meerdere formaten (afbeeldingen van 16, 32 en 48 px) is een klein bestand dat ontbrekende iconen en 404-fouten voorkomt.

Welk formaat moet een favicon hebben voor Google Zoeken?

Google vereist een vierkante favicon waarvan het formaat een veelvoud van 48 px is, minimaal 48x48. Een PNG van 96x96 is een veilige keuze, en een SVG wordt ook ondersteund. Google moet het bestand ook kunnen crawlen, dus blokkeer het niet in robots.txt. Updates kunnen dagen of weken duren voordat ze zichtbaar zijn.

Is 180x180 genoeg voor het Apple touch icon?

Voor vrijwel alle sites wel. iOS en iPadOS schalen een PNG van 180x180 omlaag voor elk huidig apparaat. De oudere formaten (57 tot 152 px) zijn alleen van belang voor zeer oude iOS-versies. Vergeet niet een ondoorzichtige achtergrond te gebruiken, zodat het icoon niet zwart wordt.

Wat is een maskable icoon en heb ik er een nodig?

Een maskable icoon is een PNG van 512x512, ontworpen voor de adaptieve iconvormen van Android. De belangrijke inhoud staat binnen een cirkel met een diameter van 80% in het midden, en de achtergrond vult het hele vierkant. Je hebt het alleen nodig als je een installeerbare PWA aanbiedt, maar het zorgt ervoor dat het icoon er native uitziet in plaats van in een witte cirkel te staan.

Waarom zie ik nog steeds mijn oude favicon nadat ik die heb gewijzigd?

Browsers cachen favicons apart en voor lange tijd. Hernoem het bestand of voeg een versie-querystring toe zoals ?v=2, werk de link-tags bij en open daarna de icoon-URL rechtstreeks en herlaad die. Zoekmachines kunnen er langer over doen om hun eigen kopie te verversen.