Een favicon is niet langer één afbeelding. Browsers, telefoons en besturingssystemen pakken elk een ander formaat voor een andere plek — het browsertabblad, een bladwijzer, een iOS-startscherm, een Android-app-switcher. Lever één 32×32-PNG en hij werkt in het tabblad maar oogt wazig wanneer iemand je site op zijn telefoon opslaat. Lever de volledige set en elk oppervlak krijgt een scherp icoon.
Hier lees je precies welke formaten je nodig hebt, wat elk doet, en waarom de lijst eruitziet zoals hij eruitziet.
De formaten die ertoe doen
De meeste sites zijn gedekt door zes PNG-formaten plus een legacy .ico. Hier de referentie:
| Formaat | Bestandstype | Waar het wordt gebruikt |
|---|---|---|
| 16×16 | PNG (in .ico) | Browsertabblad, adresbalk, bladwijzers |
| 32×32 | PNG (in .ico) | Retina-tabbladen, Windows-taakbalksnelkoppelingen |
| 48×48 | PNG | Windows-site-iconen, sommige Android-oppervlakken |
| 180×180 | PNG | iOS-startscherm (apple-touch-icon) |
| 192×192 | PNG | Android-startscherm, PWA-installatie |
| 512×512 | PNG | PWA-splashscreen, appstores, high-DPI |
Het favicon.ico-bestand is een container die de kleine formaten bundelt (meestal 16 en 32, soms 48). Oudere browsers en Windows zoeken het op naam bij je site-root, dus het is nog steeds de moeite waard om te leveren, ook al gebruiken moderne browsers graag PNG's.
Waarom zoveel? Een snelle rondleiding
De reden dat de lijst lang is, is dat het icoon in enorm verschillende fysieke groottes opduikt.
16 en 32 zijn de alledaagse tabbladiconen. 16 is het klassieke formaat; 32 dekt high-DPI ("Retina")-schermen waar 16 zacht zou ogen. Browsers kiezen wat past bij de pixeldichtheid.
48 is een Windows-ding — het wordt gebruikt voor sitesnelkoppelingen en oogt scherper op een paar plekken die 32 niet goed dekt.
180 is Apples apple-touch-icon. Wanneer iemand "Zet op beginscherm" tikt op een iPhone of iPad, gebruikt iOS dit. Krijg het verkeerd en iOS pakt ofwel een verkleind screenshot of toont een kale lettertegel — geen van beide oogt als je merk.
192 en 512 zijn de Progressive Web App-formaten, gedeclareerd in een manifest.webmanifest-bestand. 192 is het Android-startschermicoon; 512 voedt de splashscreen en wordt verkleind voor alles wat het OS verder nodig heeft. Is je site installeerbaar, dan zijn deze twee niet onderhandelbaar.
Heb je groter dan 512 nodig?
Nee. 512×512 is het praktische plafond voor webfavicons — de webmanifest-specificatie en elk groot platform gaan tot daar. Is je bronafbeelding 1024 of groter, dan is dat prima als beginafbeelding (meer detail om vanaf te verkleinen), maar je levert geen 1024-favicon. Alles boven 512 voegt alleen bytes toe die niemand gebruikt.
De ene regel die ertoe doet als je omhoog gaat: begin met een grote, vierkante bron. Een 512×512- of 1024×1024-origineel verkleint schoon naar elk formaat eronder. Begin met een piepkleine afbeelding en de kleine formaten ogen troebel omdat er nooit genoeg detail was om te behouden.
Ontwerp zodat het 16×16 overleeft
Het lastigste formaat is het kleinste. Op 16×16 wordt een gedetailleerd logo een onleesbare vlek. Een paar tips die over sites heen standhouden:
- Vereenvoudig. Een volledig woordmerk leest niet op 16px. Gebruik één letter, een monogram of het meest herkenbare deel van je merk.
- Hou het contrast hoog zodat de vorm leesbaar blijft op zowel lichte als donkere tabbladachtergronden.
- Laat wat marge — een icoon dat alle vier de randen raakt, voelt krap in het tabblad.
- Test het klein. Zoom je browser uit, of kijk gewoon naar het echte tabblad. Kun je in één oogopslag niet zien wat het is, vereenvoudig dan verder.
De hele set genereren
Je bouwt deze niet met de hand. Sleep één vierkante afbeelding in de Favicon Generator en hij produceert de volledige set in één keer — favicon.ico, de 16/32/48/180/192/512-PNG's, een kant-en-klare webmanifest, en het exacte HTML-<head>-fragment om te plakken. Alles draait in je browser: de afbeelding wordt nooit geüpload, en na je eerste bezoek werkt de tool offline.
De HTML waar je mee eindigt
Ter referentie ziet een complete favicon-opzet er ongeveer zo uit in je <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
De generator schrijft dit voor je, zodat je het er direct in kunt plakken. Dek de zes formaten plus de .ico en de manifest, en elke browser, telefoon en OS krijgt het scherpe icoon waar het om vraagt.