Favicongrootten: Welke je werkelijk nodig hebt in 2025

Zoek naar "favicon size" en je krijgt een muur van tegenstrijdige getallen: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. De meeste van die lijsten zijn tien jaar geleden geschreven en nooit bijgewerkt. In de praktijk heeft een moderne site ongeveer vier bestanden nodig, en je kunt ze allemaal in één keer maken met de faviconsgenerator — deze werkt volledig in je browser, dus je logo verlaat je machine nooit.

Hier staat waar elke grootte werkelijk voor dient, en wat je veilig kunt overslaan.

De grootten die nog steeds belangrijk zijn

16x16 en 32x32 — browsertabbladen en bladwijzers

Dit is de klassieke favicon. 16x16 is wat je ziet in een druk tabblad; 32x32 wordt gebruikt op schermen met hoge DPI, de bladwijzerbalk en enkele adresbaluifaces. Beide worden traditioneel gebundeld in één favicon.ico-bestand, dat meerdere resoluties tegelijk kan bevatten. Windows haalt ook 48x48 uit dezelfde .ico voor snelkoppelingen op het bureaublad, dus het opnemen ervan kost bijna niets.

180x180 — Apple touch-icoon

Wanneer iemand op "Toevoegen aan startscherm" tikt op een iPhone of iPad, zoekt Safari naar apple-touch-icon.png met 180x180. Als deze niet aanwezig is, maakt iOS een schermafbeelding van je pagina en gebruikt die in plaats daarvan, wat er verschrikkelijk uitziet. Deze enkele PNG dekt elk huidig iOS-apparaat omdat het systeem naar behoefte verkleint.

192x192 en 512x512 — Android en PWAs

Android Chrome en installeerbare web-apps lezen pictogrammen uit je site.webmanifest. 192 is het startschermicoon; 512 wordt gebruikt voor het splash-scherm en app-lijsten. Als je ooit wilt dat je site installeerbaar is, heb je beide nodig.

SVG — optioneel maar prettig

Firefox en Chrome ondersteunen beide een SVG-favicon, die bij elke grootte scherp blijft en kan reageren op donkere modus met een mediaquery in het bestand. Het is een extra's, geen vervanging — Safari en oudere browsers willen nog steeds de rasterversies.

Wat je kunt overslaan

64x64, 96x96, 128x128, de hele set Windows-tegeltjesafbeeldingen en het tiental oudere apple-touch-icon-76x76-stijlbestanden. Ze waren nodig voor apparaten die grotendeels verdwenen zijn. Het verzenden van twintig icoonsbestanden maakt je repo opgeblazen en levert je niets meetbaars op.

De HTML

Zet de bestanden in de root van je site en voeg dit toe aan <head>:

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

En in het manifest:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Ontwerpen voor 16 pixels

Het moeilijkste deel is niet de export, maar dat een volledig logo op 16x16 tot moes wordt. Enkele dingen die helpen:

• Gebruik een fragment, niet het hele logo. Één letter, één glyph, één vorm. Woordmerken zijn onleesbaar op tabladzijze.
• Begin vierkant. Als je bron een breed logo is, zet het eerst op een vierkant zodat de generator het niet met lege ruimte letterboxet.
• Houd het contrast hoog. Dunne contouren verdwijnen. Massieve vormen blijven behouden.
• Bepaal de achtergrond. Een transparante PNG past zich aan lichte en donkere browserchromes aan; als je merk donker is, geef het dan in plaats daarvan een vast gekleurde tegel. Je kunt in enkele seconden de achtergrond verwijderen uit een logoschermafbeelding als je alleen een platte JPG hebt.
• Zorg voor het veilige gebied. Android maskeert pictogrammen in cirkels en squircles, dus laat ongeveer 10% opvulling rond de rand van je 512-artwork.

Als je de achtergrond van de favicon afstemmeert op de merkkleur van je site, haalt de afbeelding kleurkiezer de exacte hex uit een bestaande schermafbeelding — handig voor de theme-color metatag ook.

Genereer de hele set tegelijk

Upload niets: zet een vierkante PNG of SVG in de gratis browsergebaseerde faviconsgenerator en deze produceert de .ico, het Apple touch-icoon en de 192/512 PNG's lokaal, in je eigen tabblad. Er wordt niets naar een server verzonden, er is geen inschrijving nodig en geen kopie van je niet-vrijgegeven logo eindigt in iemand anders' opslagbucket.

Zoom dan je browser uit, bekijk het tabblad en stel de enige vraag die belangrijk is: kun je zien wat het is?