Hoeveel faviconbestanden heb ik eigenlijk nodig?

Veel minder dan het oude advies deed vermoeden. Een SVG-favicon, een PNG-terugval in de juiste maat, een geldige favicon.ico in de root en een Apple-touchpictogram in hoge resolutie dekken de belangrijkste gevallen in browsers en op het Apple-startscherm – geen apart bestand per toestel. Een installeerbare webapp heeft daarnaast manifestpictogrammen nodig, idealiter met een maskeerbare variant.

Heb ik een webapp-manifest nodig?

Een manifest is nuttig wanneer een geïnstalleerde ervaring – een startpictogram, een apart venster in app-stijl – terugkerende gebruikers duidelijk zou helpen. Het levert metadata en pictogramkandidaten, maar het installatiegedrag blijft afhangen van browser en platform. De meeste brochurewebsites kunnen het weglaten, tenzij die geïnstalleerde ervaring echt iets oplevert.

Kunnen verschillende pagina’s verschillende favicons hebben?

Ja, een rel=icon per pagina is legitiem – een eigen pictogram per sectie of categorie kan helpen bij de oriëntatie. Houd eerst een stabiele kernidentiteit aan, en onthoud dat browsers en platforms pictogrammen voor tabbladen, geïnstalleerde apps en het startscherm lang kunnen cachen, met updates die niet op elk systeem gelijk doorkomen – vertrouw dus nooit op een pictogramwissel om iets essentieels over te brengen.

Heeft uw website een complete, herkenbare pictogrammenset?

Hoe klein ze ook zijn, favicons en startschermpictogrammen doen echt werk. Ze zijn het kleine teken in het browsertabblad, het beeldje naast een bladwijzer en het pictogram op het startscherm van een telefoon. Een ontbrekend of wazig exemplaar laat een website onaf aanvoelen; een scherp, consistent exemplaar is stille merkherkenning telkens wanneer iemand terugkomt. De kunst is een kleine, gelaagde set goed op te zetten in plaats van een verwarrend bestand per platform te genereren.

Begin met één sterk, eenvoudig teken

Ontwerp één vierkant pictogram dat herkenbaar blijft wanneer het in een browsertabblad krimpt tot 16 pixels. Dat betekent hoog contrast en heel weinig detail – een logo vol fijne lijntjes wordt op die maat pap. Houd dit kernteken constant, maar pas de uitwerking per context aan: het tabbladpictogram van 16 pixels, het grote touchpictogram en een maskeerbaar app-pictogram stellen elk andere eisen aan detail, witruimte en achtergrond, en één mechanische export past zelden voor alle drie.

Lever een paar formaten, geen tientallen

Verschillende browsers verkiezen verschillende formaten; u geeft kandidaten op en de browser kiest het meest geschikte dat hij ondersteunt (met type, media en sizes als leidraad – bij gelijkwaardige kandidaten wint de laatst opgegeven):

Een SVG-favicon waar ondersteund: resolutie-onafhankelijk en meestal compact – mits het ontwerp gemaakt is om ook klein duidelijk te blijven.
Een PNG met de echte pixelmaat opgegeven, zodat browsers hem tegen de andere kandidaten kunnen afwegen.
Een geldige favicon.ico in de root – echt ICO, idealiter met varianten van 16 en 32 pixels – als de conventionele terugval.
Een Apple-touchpictogram in PNG met hoge resolutie (vierkant, bijv. 180×180, zonder ingebakken afgeronde hoeken – het platform legt zijn eigen masker op) voor startschermbladwijzers op Apple-toestellen; andere platforms gebruiken manifest- of paginapictogrammen.

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/icon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<meta name="theme-color" content="#0b5fff">

sizes="any" markeert de schaalbare SVG en hoort op die regel, niet op de .ico. En controleer of elke URL echt de bedoelde afbeelding teruggeeft met een correcte HTTP-Content-Type – het HTML-attribuut type is een hint, geen reparatie voor een kapot antwoord.

Stel een theme-color in om uw merkkleur te suggereren voor de browserinterface die dat ondersteunt – browsers mogen hem negeren of aanpassen – met lichte en donkere varianten via mediaquery’s waar dat het beeld verbetert:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">

Houd een stabiele identiteit aan, varieer spaarzaam

Een webapp-manifest levert app-metadata en pictogramkandidaten voor een geïnstalleerde ervaring – een pictogram in de launcher of op het startscherm, een apart venster in app-stijl – zonder op zichzelf installeerbaarheid te garanderen. Het is meestal de moeite wanneer die geïnstalleerde ervaring terugkerende gebruikers echt helpt, zoals bij een tool die mensen dagelijks openen; de meeste brochurewebsites kunnen het overslaan. Voegt u er toch een toe, lever dan manifestpictogrammen in de juiste maten en een maskeerbaar pictogram waarvan het belangrijke beeld binnen de veilige zone blijft, want platforms snijden pictogrammen zelf bij tot cirkels en „squircles”.

Favicons per pagina zijn legitiem: een ander pictogram per sectie of categorie kan de oriëntatie helpen – een eigen pictogram op elke sterrenbeeldpagina, bijvoorbeeld – ingesteld met een rel="icon" per pagina. Maar houd eerst de stabiele kernidentiteit aan, en onthoud dat pictogrammen lang gecachet kunnen worden met inconsistent updategedrag tussen platforms – gebruik een pictogramwissel nooit om iets essentieels te melden.

Wat u moet doen

Ontwerp één eenvoudig, contrastrijk vierkant teken dat leesbaar is op 16px, en pas witruimte en detail per context aan.
Lever een SVG-favicon, een PNG met opgegeven maat en een geldige favicon.ico in de root – elke URL gecontroleerd op correcte weergave.
Voeg een vierkant Apple-touchpictogram in hoge resolutie toe voor startschermbladwijzers op Apple-toestellen.
Suggereer een themakleur, met lichte/donkere varianten via mediaquery’s waar dat nuttig is.
Voeg een manifest toe wanneer een geïnstalleerde ervaring echt helpt – met pictogrammen in de juiste maten en een maskeerbare variant.
Houd eerst een stabiele identiteit aan en gebruik pictogrammen per pagina als licht accent – een stabiele identiteit plus spaarzame variatie is een praktische basisset die de meeste websites afgewerkt laat aanvoelen.