Favicon Generator: de complete .ICO-gids (2026)

De favicon, dat kleine 16×16 pixel pictogram naast je tabbladtitel, is een van de meest over het hoofd geziene details op het web. De meeste sites leveren ofwel geen favicon (waardoor een generiek browserpictogram verschijnt, het universele teken van een onafgewerkte site) of leveren een JPEG hernoemd naar .ico (wat niet consistent werkt over browsers).

Deze gids behandelt hoe een goede favicon-implementatie in 2026 eruitziet: de formaten die je nodig hebt, de groottes die ertoe doen, dark mode-ondersteuning en hoe je het correct installeert. Alles lokaal gegenereerd, je logo wordt nooit naar een server geüpload.

Waarom favicons belangrijker zijn dan je denkt

Een favicon doet drie dingen tegelijk:

1. Identificeert je site in browsertabbladen, bladwijzers en geschiedenis.
2. Versterkt merkherkenning wanneer gebruikers meerdere tabbladen open hebben.
3. Signaleert professionaliteit. Sites zonder goede favicons ogen onafgewerkt, zelfs grote merken falen hier soms.

Studies tonen dat gebruikers met 10+ open tabbladen een site identificeren via de favicon voordat ze de titel lezen. Je favicon is vastgoed dat het waard is serieus te nemen.

ICO vs PNG vs SVG

ICO (favicon.ico)

Het oorspronkelijke favicon-formaat, geïntroduceerd door Microsoft in 1999. Zijn superkracht: het is een container. Eén .ico-bestand bevat meerdere PNG-gecodeerde afbeeldingen op verschillende resoluties (typisch 16×16, 32×32, 48×48). De browser/OS kiest de juiste voor de context.

Gebruik het voor: maximale compatibiliteit, vooral Windows-bureaubladsnelkoppelingen en Outlook-e-mailhandtekeningen.

PNG (favicon-32x32.png, favicon-192x192.png, etc.)

Moderne browsers (Chrome, Firefox, Safari, Edge) verkiezen PNG. Scherpere weergave, alphakanaalondersteuning, kleinere bestandsgrootte dan ICO bij gelijke kwaliteit.

Gebruik het voor: moderne browsers, Apple Touch Icons (iOS), Android Chrome PWA-pictogrammen, Windows tile-pictogrammen.

SVG (favicon.svg)

Vectorformaat. Scherp op elke resolutie, ondersteunt CSS- en dark-mode-bewuste vullingen, veel kleiner dan PNG voor eenvoudige pictogrammen.

Gebruik het voor: toekomstbestendig zijn. Moderne browsers (90%+) ondersteunen SVG-favicons. Combineer met PNG-fallback voor oudere browsers.

Beste praktijk: lever alle drie

<!-- Moderne browsers verkiezen dit indien beschikbaar -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback voor moderne browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Legacy/Windows -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS-startscherm -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android PWA + themakleur -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#c59a6d">

Favicon Generator levert exact deze set bestanden plus het snippet, klaar om te deployen.

De formaten die er echt toe doen

Grootte	Bestandsnaam	Gebruikt door
16×16	binnen favicon.ico	Browsertabblad, adresbalk
32×32	favicon-32x32.png + binnen favicon.ico	Browsertabblad high-DPI, taakbalk
48×48	binnen favicon.ico	Windows-bureaubladsnelkoppeling
180×180	apple-touch-icon.png	iOS-startscherm, watchOS
192×192	android-chrome-192x192.png	Android-startscherm
512×512	android-chrome-512x512.png	Android-splash, PWA
150×150	mstile-150x150.png	Windows 10/11 Start-tile
oneindig	favicon.svg	Moderne browsers, retina

Je hebt niet al deze nodig voor een basale site, maar een generator die ze allemaal produceert kost niets extra en maakt je toekomstbestendig.

Dark mode favicons (best practice 2026)

Moderne browsers ondersteunen dark-mode-bewuste favicons via SVG met CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M..."/>
</svg>

De favicon past zich aan het thema van het OS van de gebruiker aan, zwart op licht, wit op donker. Sommige gebruikers (ontwikkelaars, toegankelijkheidsvoorvechters) kijken actief uit naar dit detail.

Best practices voor bronbeeld

Vóór genereren, bereid je bron voor:

1. Vierkant. Minimum 512×512, idealiter 1024×1024. Niet-vierkante bronnen worden bijgesneden of opgevuld.
2. Eenvoudig. Op 16×16 px worden complexe logo’s onleesbare brij. Test door je ogen samen te knijpen op je logo op een 16-pixel raster: kun je het nog herkennen?
3. Hoog contrast. Het pictogram moet leesbaar zijn op elke browsertabbladkleur (licht of donker). Streef intern naar minstens 4.5:1 contrastratio.
4. Transparante achtergrond (PNG/SVG). Effen achtergronden ogen hokjesachtig in browsertabbladstroken die padding hebben.

Als je volledige logo te gedetailleerd is, maak een vereenvoudigd merk voor de favicon, een enkele letter, een pictogram, een abstracte vorm. Veel merken doen dit (Apple’s appel, Twitters vogel, Spotify’s cirkels).

Privacy: waarom lokaal genereren belangrijk is

Het vuile geheim van online favicon-generators: de meeste uploaden je bronlogo naar hun server, genereren de pictogrammen en e-mailen je een link.

Dat betekent dat je niet-uitgegeven merkidentiteit op de hardware van iemand anders staat. Voor een stealth-startup, een klantproject onder NDA of een productlancering is dat onaanvaardbaar.

Het alternatief: lokaal genereren met HTML5 Canvas + WebAssembly voor ICO-codering. DuneTools Favicon Generator doet precies dit, je logo verlaat je browser nooit, generatie duurt enkele honderden milliseconden, je downloadt een ZIP met alle 12 bestandsvarianten plus het HTML-snippet.

Deployment-checklist

1. Plaats alle gegenereerde bestanden in de root van je site (/favicon.ico, /favicon.svg, etc.). De meeste browsers kijken hier automatisch.
2. Voeg de <link>- en <meta>-tags van de generator toe binnen <head>.
3. Voeg <link rel="manifest" href="/site.webmanifest"> toe en maak site.webmanifest met de pictogramdefinities (de generator maakt het voor je).
4. Test op Chrome, Safari, Firefox-tabblad. Hard verversen (Cmd+Shift+R of Ctrl+F5), favicons cachen agressief.
5. Voeg toe aan iPhone-startscherm (Safari → Delen → Voeg toe aan startscherm), verifieer dat het apple-touch-icon verschijnt.
6. Test in dark mode (systeem → wissel thema), verifieer dat SVG zich aanpast.

Veelgemaakte fouten

1. Een JPEG hernoemen naar .ico. ICO heeft zijn eigen formaat. Hernoemen converteert niet. Gebruik een generator.
2. Alleen één 16×16 PNG. Ziet er prima uit in tabbladen, vreselijk overal anders (taakbalk, mobiel startscherm, PWA-splash).
3. Apple Touch Icon vergeten. Wanneer gebruikers je site aan hun iPhone-startscherm toevoegen en je icoon ontbreekt, gebruikt iOS een screenshot. Ziet er afgrijselijk uit.
4. Geen theme-color meta tag. <meta name="theme-color"> toevoegen zorgt dat Chrome/Safari mobile je merkkleur in de adresbalk gebruikt, klein detail, grote impact.
5. Dark mode niet testen. Een logo onzichtbaar op donkere achtergronden is een logo dat ontbreekt in de tabbladen van miljoenen gebruikers.

Praktijkchecklist

Voor lancering:

• favicon.ico gegenereerd (multi-size 16/32/48)
• favicon.svg gegenereerd met dark-mode CSS
• favicon-16x16.png en favicon-32x32.png gegenereerd
• apple-touch-icon.png (180×180) gegenereerd
• android-chrome-192x192.png en 512x512 gegenereerd
• site.webmanifest aangemaakt met pictogramdefinities
• Alle <link>-tags toegevoegd binnen <head>
• <meta name="theme-color"> toegevoegd matchend met merk
• Hard ververst en geverifieerd dat alle formaten correct weergegeven worden
• Toegevoegd aan iOS-startscherm, apple-touch-icon geverifieerd
• Dark mode getest, geverifieerd dat SVG zich aanpast

Samenvatting

Een complete favicon-implementatie in 2026 heeft 8-12 bestanden, kost 5 minuten om te genereren met de juiste tool, en verbetert merkbaar de waargenomen professionaliteit van je site. Sla geen formaten over, er is in 2026 geen goede reden om dat te doen, en de kost is één upload naar Favicon Generator.