Vier tags, geen twintig

Favicongeneratoren staan erom bekend dat ze dertig bestanden en twintig <link> elementen teruggeven: tegels voor Windows 8, een browserconfig.xml, zes maten apple-touch-icon, iconen voor apparaten die tien jaar geleden uit productie gingen. Elk daarvan is bytes in de <head> van elke pagina die je serveert, voor altijd, voor niets.

Wat huidige browsers werkelijk lezen zijn vier dingen: de .ico voor oude verzoeken en de Windows-taakbalk, één apple-touch-icon van 180px voor het beginscherm van iOS, het webmanifest voor Android en geïnstalleerde webapps, en optioneel een SVG-icoon waar dat ondersteund wordt. Dat is de set die deze pagina levert, en de rest ontbreekt met opzet.

De .ico verpakking, en waarom die hier met de hand geschreven wordt

Een .ico is een header van zes bytes, een mapregel van zestien bytes per afbeelding, en de beelddata achter elkaar geplakt. Sinds Windows Vista mogen die payloads complete PNG-bestanden zijn die letterlijk opgeslagen worden, en dat haalt het ene ongemakkelijke deel van het formaat weg: de oude BMP-variant met zijn ondersteboven rijen en zijn aparte transparantiemasker. De hele schrijver is ongeveer zestig regels, en dat is kleiner dan elke bibliotheek die het doet.

Eén detail pakt iedereen: een afmeting van 256 wordt als 0 opgeslagen, want het veld is één byte en 256 past daar niet in. Deze tool gaat binnen de .ico toch niet hoger dan 64px. De verpakking heeft geen eigen compressie, dus een regel van 256px legt zijn volle PNG-gewicht in een bestand dat bij elke paginalading opgevraagd wordt, en de grote maten horen in aparte PNG's waar het manifest naar kan wijzen.

Bij 16 pixels sterven iconen

Het voorbeeld hierboven toont elke maat op zijn echte pixelafmetingen en niet uitvergroot, want de uitvergrote versie liegt. Een logo met een slogan, een dunne omtrek of drie kleuren van vergelijkbare lichtheid wordt op 16px een grijze vlek, en dat zie je niet in een voorbeeld van 64px. De oplossing is nooit een betere export; het is een simpeler merkteken. Eén vorm, één sterke kleur, geen tekst.

Veelvoorkomende problemen

Het Apple-icoon heeft een zwarte achtergrond. iOS stelt het touch icon samen op zwart in plaats van transparantie te respecteren, dus een transparant logo verdwijnt. Juist daarom wordt die ene maat hier op wit gegenereerd; al het andere houdt zijn alpha.
Android sneed de hoeken eraf. Adaptieve iconen worden gemaskeerd tot een cirkel of een squircle. Het manifest hier markeert het icoon van 512px als maskable, maar je hebt nog steeds ruwweg 20% opvulling binnen de tekening nodig, anders eet het masker die op.
De browser toont nog steeds het oude icoon. Favicons worden agressief bewaard en negeren vaak een gewone herlading. Probeer een privévenster, of hang tijdens het ontwikkelen een query string aan de link.
Er verschijnt helemaal niets. De bestanden moeten op de paden staan die de tags noemen, en voor een favicon betekent dat de root van de site. Een framework dat bestandsnamen van assets hasht breekt /favicon.ico tenzij hij in de statische publieke map staat.

Veelgestelde vragen

Heb ik in 2026 nog favicon.ico nodig?

Ja, en vooral om een saaie reden: browsers vragen /favicon.ico op vanaf de root van de site, of je daar nu om vroeg of niet, dus er geen hebben is een 404 bij elk bezoek. Het is ook wat de Windows-taakbalk en snelkoppelingen op het bureaublad lezen.

Moet ik een SVG-favicon gebruiken?

Als aanvulling, niet als vervanging. Hij is op elke maat scherp en kan met een media query binnen de SVG zelf op donkere modus reageren, en dat is echt prettig. Hij wordt ook niet gelezen door Safari of door de Windows-taakbalk, dus de .ico blijft.

Wordt mijn logo geüpload?

Nee. Elke maat wordt in een Web Worker op je eigen apparaat getekend, de .ico wordt in JavaScript uit die bytes samengesteld, en de ZIP wordt in het geheugen gebouwd. Kijk naar het netwerktabblad terwijl je een set genereert: er vertrekt niets.

Waarom is de ZIP niet gecomprimeerd?

Alles erin is al een PNG, en een PNG deflaten scheelt een fractie van een procent. Het archief gebruikt store-modus, en dat opent elk besturingssysteem gewoon.