Essentiële favicon-maten: Snelle keuzehulp voor 2025

Het internet staat vol met aanbevelingen voor favicon-maten, variërend van 4 tot meer dan 20 verschillende afmetingen. De meeste websites hebben ze niet allemaal nodig. Deze handleiding maakt een einde aan de ruis en laat je precies zien welke favicon-maten belangrijk zijn voor jouw specifieke project, wat je tijd bespaart en complexiteit vermindert.

De enige 4 favicon-maten die je echt nodig hebt

Na analyse van duizenden websites en gebruikspatronen van apparaten, zijn hier de essentiële favicon-maten die 99% van de gevallen dekken:

1. favicon.ico (Multi-maat container)

Maat: Bevat 16x16 en 32x32 pixels Waarom essentieel: Universele browserondersteuning, automatische detectie Bestandsformaat: ICO Gebruik: Browsertabs, bladwijzers, browsergeschiedenis

2. 180x180 pixels (Apple Touch Icon)

Maat: 180x180 pixels Waarom essentieel: iOS-startscherm, Safari-bladwijzers Bestandsformaat: PNG Gebruik: iPhone/iPad "Voeg toe aan startscherm"

3. 192x192 pixels (Android Chrome)

Maat: 192x192 pixels Waarom essentieel: Android-startscherm, Chrome-snelkoppelingen Bestandsformaat: PNG Gebruik: Android-apparaten, minimale PWA-vereiste

4. 512x512 pixels (PWA & Toekomstbestendig)

Maat: 512x512 pixels Waarom essentieel: Progressive Web Apps, schermen met hoge resolutie Bestandsformaat: PNG Gebruik: PWA-splashschermen, app stores

Snelle implementatiecode

Dit is de minimale HTML die je nodig hebt in je <head>-tag:

<!-- Essentiële favicon-setup - dekt 99% van de apparaten -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

Dat is alles. Deze vier bestanden zorgen voor correcte weergave van je favicon op alle moderne apparaten en browsers.

Wanneer je mogelijk extra maten nodig hebt

Bouw je een Progressive Web App?

Voeg deze toe aan je web manifest:

144x144 - Windows-tegels
384x384 - Tussenliggende PWA-maat

Ondersteuning voor legacy systemen?

Overweeg toe te voegen:

16x16 PNG - Zeer oude browsers
32x32 PNG - Oudere high-DPI schermen
48x48 - Windows-bureaubladsnelkoppelingen

Perfecte dekking gewenst?

De volledige set omvat:

16x16, 32x32, 48x48, 64x64, 96x96, 128x128, 144x144, 152x152, 167x167, 180x180, 192x192, 256x256, 384x384, 512x512

Maar onthoud: elke extra maat voegt complexiteit toe met afnemende opbrengsten.

Beslisschema voor maten

Is je site een PWA?
├─ Ja → Gebruik alle 4 essentiële maten + manifestmaten
└─ Nee → Ga verder
   │
   Is het een eenvoudige website/blog?
   ├─ Ja → Gebruik alleen favicon.ico
   └─ Nee → Ga verder
      │
      Is mobiel verkeer > 50%?
      ├─ Ja → Gebruik alle 4 essentiële maten
      └─ Nee → Gebruik favicon.ico + 192x192

Vergelijking met grote websites

Dit is wat grote websites daadwerkelijk gebruiken:

Website	Aantal maten	Werkelijk gebruikte maten
Google	3	favicon.ico, 192x192, 512x512
Facebook	4	favicon.ico, 180x180, 192x192, 512x512
Amazon	2	favicon.ico, 192x192
Netflix	3	favicon.ico, 192x192, 512x512
GitHub	5	favicon.ico, 180x180, 192x192, 512x512, SVG

Zie je het patroon? Zelfs techgiganten houden het simpel.

Richtlijnen voor bestandsgrootte

Houd je favicons licht voor betere prestaties:

Favicon-maat	Streefgrootte	Maximaal acceptabel
favicon.ico	< 5 KB	15 KB
180x180 PNG	< 3 KB	8 KB
192x192 PNG	< 4 KB	10 KB
512x512 PNG	< 15 KB	30 KB

Veelgemaakte fouten met maten

Fout 1: Alleen grote maten gebruiken

Probleem: 512x512 icoon verkleind naar 16x16 ziet er wazig uit Oplossing: Voeg altijd favicon.ico toe met ingebedde kleine maten

Fout 2: Mobiele maten vergeten

Probleem: Generiek icoon verschijnt wanneer gebruikers opslaan op startscherm Oplossing: Voeg 180x180 (iOS) en 192x192 (Android) toe

Fout 3: Bestandsgrootten over-optimaliseren

Probleem: Zwaar gecomprimeerde iconen zien er korrelig uit Oplossing: Balanceer kwaliteit en bestandsgrootte; favicons worden toch gecachet

Fout 4: Verkeerde afmetingen gebruiken

Probleem: 200x200 of 256x256 in plaats van standaardmaten Oplossing: Houd je aan platformstandaard afmetingen

Snelle testchecklist

Test je favicon-implementatie:

Desktop browsertab - Verschijnt favicon.ico?
Mobiele browser - Is het icoon zichtbaar in mobiel Chrome/Safari?
Voeg toe aan startscherm - Probeer op zowel iOS als Android
Bladwijzertest - Voeg bladwijzer toe en controleer het icoon
Deelpreview - Sommige platforms gebruiken grotere maten voor delen

Formaat vs. maat: Wat is belangrijker?

Maat bepaalt waar je favicon verschijnt Formaat bepaalt compatibiliteit en kwaliteit

Prioriteitsvolgorde:

Zorg eerst dat de maten kloppen
Gebruik ICO voor favicon.ico
Gebruik PNG voor alle andere maten
Overweeg SVG pas nadat de basis werkt

De 5-minuten favicon-setup

Begin met een 512x512 masterafbeelding
Genereer de 4 essentiële maten met een favicon-generator
Voeg de HTML-code toe aan de head van je site
Test op een desktop en een mobiele browser
Lanceer het - denk er niet te lang over na

Maatspecifieke tips

Voor 16x16 en 32x32 (favicon.ico)

Gebruik eenvoudige vormen zonder fijne details
Test zichtbaarheid op werkelijke grootte
Vermijd tekst tenzij het 1-2 tekens zijn

Voor 180x180 (iOS)

Ontwerp met afgeronde hoeken in gedachten (iOS past ze toe)
Gebruik een effen achtergrond (transparantie wordt wit)
Zorg voor goed contrast

Voor 192x192 en 512x512 (Android/PWA)

Ondersteuning voor transparantie bij adaptieve iconen
Test op verschillende Android launcher-achtergronden
Houd belangrijke elementen gecentreerd

Prestatie-impact per maat

Het laden van meerdere favicon-maten heeft minimale impact:

4 essentiële maten: ~25KB totaal, 4 verzoeken
10 uitgebreide maten: ~60KB totaal, 10 verzoeken
20+ maten: ~120KB totaal, vaak onnodig

Favicons worden agressief gecachet, dus de initiële lading is de enige zorg.

Laatste aanbevelingen

Voor 90% van de websites: Gebruik de 4 essentiële maten. Je bent klaar.

Voor PWA's: Voeg 144x144 en 384x384 toe aan de essentiële 4.

Voor maximale compatibiliteit: Gebruik een generatortool om alle maten te maken, maar begrijp dat je optimaliseert voor randgevallen.

Onthoud: Perfecte favicon-dekking op elk mogelijk apparaat en elke browserversie is onmogelijk. Focus op de maten die er toe doen voor je werkelijke gebruikers, implementeer ze correct en ga verder met impactvollere aspecten van je website.

De beste favicon-implementatie is er een die betrouwbaar werkt voor je gebruikers zonder je codebase onnodig complex te maken. Begin met de basis, voeg meer toe alleen wanneer je een specifieke behoefte hebt.

Wil je je favicon testen op verschillende maten? Probeer Favicon.im om direct te bekijken hoe de favicon van een website eruitziet op verschillende afmetingen.