Wat is een Favicon (en welke formaten heb ik nodig)?

Een favicon (kort voor "favorite icon") is het kleine plaatje dat browsers naast je paginatitel tonen in de tab, in de bladwijzerbalk, in de geschiedenis en steeds vaker in zoekmachineresultaten. De naam stamt uit Internet Explorer 5 uit 1999, waar het icoon puur als bladwijzer-identificator diende. Vijfentwintig jaar later werken hetzelfde bestandsformaat en dezelfde HTML-markup nog steeds, maar de rol van de favicon is zo ver uitgebreid voorbij dat oorspronkelijke doel dat "upload gewoon een 16x16 .ico" niet langer het juiste antwoord is.

Waar een favicon vandaag de dag werkelijk voor gebruikt wordt

Moderne browsers en besturingssystemen putten uit de favicon-set voor een breed scala aan contexten, elk met eigen verwachtingen voor formaat en grootte:

• Browsertabs en bladwijzers. Doorgaans gerenderd op 16x16 of 32x32 CSS-pixels, maar op high-DPI schermen haalt de browser een grotere versie en schaalt deze omlaag. Een klein, gepixeld icoon naast een scherpe paginatitel oogt verouderd.
• Zoekresultaten. Google toont favicons naast mobiele zoekresultaten sinds 2019 en op desktop sinds 2023. Het icoon moet minstens 48x48 zijn, veelvouden van 48 worden aanbevolen, en het bestand moet crawlbaar zijn.
• iOS en Android startscherm. Wanneer een gebruiker "toevoegen aan beginscherm" kiest, haalt iOS het apple-touch-icon (180x180), Android haalt iconen uit het web app manifest (doorgaans 192x192 en 512x512). Zonder expliciete declaratie genereren beide platforms een wazige screenshot als fallback.
• Progressive Web Apps. PWAs die als zelfstandige apps geïnstalleerd zijn, vertrouwen op het web app manifest voor iconen in de app-launcher, taakwisselaar en splash screen. Verkeerde formaten hier betekent een installeerbare site die kapot oogt.
• macOS Safari vastgemaakte tabs. Gebruikt een aparte monochrome SVG (mask-icon) voor het uiterlijk van vastgemaakte tabs. Een niche-geval, maar triviaal te ondersteunen.
• Windows tegel vastmaken. Edge en het Windows-startmenu kunnen sites als tegels vastmaken, waarvoor een aparte set msapplication-TileImage-declaraties nodig is.

De pragmatische consequentie: je hebt een kleine set bestanden nodig (doorgaans vier tot zes), niet één .ico, en een handvol HTML link tags om ze te declareren.

Welke bestandsformaten ertoe doen

Drie formaten zijn relevant in 2026, en de dagen dat je ze allemaal tegelijk nodig had zijn voorbij.

• PNG. De juiste standaard. Universeel ondersteund, verliesvrij, transparante achtergronden werken overal. Eén PNG per doelformaat.
• SVG. Wordt door elke moderne browser ondersteund voor favicons. Eén SVG schaalt naar elk formaat en blijft scherp op high-DPI schermen zonder aparte retina-assets. Voorbehoud: SVG-favicons moeten zelfstandig zijn (geen externe verwijzingen, geen externe stylesheets, geen ingebedde fonts) en Safari ondersteunt ze alleen gekoppeld aan een PNG-fallback.
• ICO. Het oude containerformaat dat meerdere formaten in één bestand kan bevatten. Nog steeds nuttig voor één specifiek geval: het verzoek aan /favicon.ico op de root van de site, dat elke browser, RSS-reader en crawler impliciet doet, ook als je er niet naar linkt. Een 404 teruggeven is onschadelijk maar genereert ruis in serverlogs. Een kleine multi-size .ico (16x16, 32x32, 48x48 in één bestand) brengt dat tot zwijgen.

WebP en AVIF, hoewel uitstekend voor content-afbeeldingen, worden niet gebruikt voor favicons omdat browserondersteuning hiervoor inconsistent is. Blijf bij PNG en SVG.

De daadwerkelijke bestandslijst die je nodig hebt in 2026

Een solide, toekomstbestendige favicon-set dekt alle bovenstaande contexten met dit minimum:

• favicon.ico — multi-size (16, 32, 48), op de root van de site
• favicon.svg — schaalbaar, gebruikt door moderne browsers wanneer beschikbaar
• favicon-96x96.png — expliciete raster-fallback in een comfortabel middenformaat
• apple-touch-icon.png — 180x180, geen transparantie (iOS voegt zelf afgeronde hoeken toe)
• web-app-manifest-192x192.png — Android startscherm, PWA-launcher
• web-app-manifest-512x512.png — PWA splash screen, grote tegelcontexten

Dat zijn zes bestanden. Het bijbehorende HTML in <head>:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

En een minimaal site.webmanifest:

{
  "name": "Jouw Sitenaam",
  "short_name": "Site",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Dat dekt browsertabs, bladwijzers, Google-zoekresultaten, iOS-startscherm, Android-startscherm en PWA-installatie. Alles daarbuiten is randgebied.

Ontwerpbeperkingen voor een favicon die daadwerkelijk leesbaar is

Het moeilijkste aan favicon-ontwerp is niet de export, maar iets maken dat leesbaar blijft op 16x16. Een paar vuistregels die consistent goede resultaten opleveren:

• Versimpel meedogenloos. Een volledig logo werkt zelden als 16x16-favicon. Gebruik één dominant element: een letter, een symbool, een abstracte mark. Alles met dunne lijnen of fijne details vervaagt tot pap.
• Sterk contrast. De favicon zit op een licht of donker browser-chrome dat je niet kunt voorspellen. Puur wit op transparant verdwijnt op lichte thema's; puur zwart op transparant verdwijnt op donkere thema's. Gebruik een vlakke achtergrond of ontwerp voor beide modi (een SVG met prefers-color-scheme media queries werkt).
• Vierkante verhouding met veilige marge. Ontwerp op een vierkant canvas maar houd ongeveer 10% padding ten opzichte van de randen aan. Sommige platforms (iOS, Android adaptive icons) snijden of maskeren het icoon, en een ontwerp dat tot de rand doorloopt wordt afgeknipt.
• Test op echte grootte. Een 16x16-icoon bekijken op 200% zoom is misleidend. Render het op 100% naast andere browsertabs om te zien hoe het echt om aandacht concurreert.

WordPress: hoe het Site Icon werkt

WordPress heeft sinds versie 4.3 ingebouwde favicon-ondersteuning. In de admin onder Weergave, Aanpassen, Site-identiteit staat een veld "Site-icoon" dat één vierkante afbeelding accepteert, minimaal 512x512. WordPress genereert en serveert daaruit dan automatisch de verschillende favicon-formaten.

De automatische generatie dekt favicon.ico, apple-touch-icon op 180x180 en de standaard PNG-formaten in de HTML-head. Standaard wordt geen web app manifest gegenereerd, dus PWA-installatie valt terug op het apple-touch-icon. Voor de meeste sites is dat genoeg.

De tekortkomingen van het ingebouwde Site Icon: het kan niet verschillende bestanden per resolutie serveren (geen SVG-ondersteuning voorbij rasterconversie), en het produceert geen manifest met het grotere 512x512-formaat dat PWA-installaties en Android-splash screens prefereren. Voor een site waar je echt om PWA-uitstraling geeft, is het aanvullen van het Site Icon met handmatige <link>-tags via de functions.php van een child theme de schonere route. Plugins zoals RealFaviconGenerator (ook een uitstekende webgebaseerde generator als je handmatig exporteren wilt overslaan) handelen dit van begin tot eind af.

Hoe verifieer je dat je favicon-setup werkt

1. Tab-controle. Open de site in een incognito-venster (om gecachte favicons te vermijden) en bevestig dat het icoon naast de titel verschijnt. Test minstens Chrome, Firefox en Safari.
2. Root-verzoek. Bezoek /favicon.ico direct. Moet een 200 met het icoon teruggeven, geen 404. Veel sites missen dit, zelfs als hun HTML een correcte <link rel="icon"> heeft.
3. iOS startscherm. Tik op een iPhone op de deel-knop in Safari en "Zet op beginscherm". De preview moet je scherpe 180x180-icoon tonen, geen wazige screenshot van de pagina.
4. Google-zoekopdracht. Zoek naar je site op een mobiel apparaat. Het icoon moet naast het resultaat verschijnen. Zo niet, toont Google's URL https://www.google.com/s2/favicons?domain=jouwsite.com wat de crawler momenteel gecached heeft.
5. Lighthouse. De PWA-audit van Lighthouse in Chrome DevTools pakt ontbrekende manifest-entries, verkeerde formaten en andere declaratieproblemen.

Veelvoorkomende problemen en wat ze veroorzaakt

• "Mijn favicon verschijnt niet." Bijna altijd een cache-probleem. Browsers cachen favicons zeer agressief. Wis de favicon-cache (Chrome: bezoek chrome://favicon-cache, Firefox: wis cache en offline data) of test in incognito.
• "Verschijnt op desktop maar niet op mobiel." Doorgaans een ontbrekend apple-touch-icon of een verkeerd manifest-pad. Mobiele browsers prioriteren hun eigen platformspecifieke iconen boven de generieke <link rel="icon">.
• "Google-zoekopdracht toont een generieke globe." Of de favicon is te klein (onder 48x48), of het bestand is niet crawlbaar (geblokkeerd door robots.txt, achter authenticatie, foute content-type), of Google heeft simpelweg nog niet opnieuw gecrawld. Recrawl-latentie voor favicons is vaak weken.
• "Het startschermicoon heeft een witte rand eromheen." Apple-touch-icon afbeeldingen mogen geen transparantie hebben; iOS plat transparante achtergronden niet af naar je themakleur, het laat ze wit. Sla op met een vlakke achtergrond die bij je merk past.
• "Het icoon ziet er vaag uit op retina-schermen." Alleen de kleine favicon.ico wordt geserveerd. Moderne browsers gebruiken de SVG- of 96x96-PNG-versie als je die declareert; controleer of het HTML deze link tags daadwerkelijk bevat.

Wat InspectWP controleert

De favicon-sectie van een InspectWP-rapport verifieert dat een favicon gedeclareerd is in de HTML-head, dat de URL /favicon.ico een geldige respons teruggeeft, en dat een apple-touch-icon is ingesteld voor iOS-startschermondersteuning. Het missen van een van deze is een bevinding met lage ernst, maar het cumulatieve effect op eerste indrukken (zoekresultaten, bladwijzers, mobiel startscherm) is reëel. Een site die overal verzorgd oogt behalve bij de favicon komt onaf over. Het goede nieuws: dit is een eenmalige opzet die, goed gedaan, nooit meer aangeraakt hoeft te worden.