Gids met matenFavicon-generator

Favicon-formaten: welke bestanden je nodig hebt, en op hoeveel px

Waarom zijn er zoveel favicon-bestanden?

De favicon is het kleine icoontje van je site — in het browsertabblad, de bladwijzerlijst, zoekresultaten en op het startscherm van de telefoon. Het is het gezicht van je site; zonder oogt hij onaf.

Het addertje: elke plek vraagt een ander formaat en een andere bestandsvorm. Een favicon is daarom geen bestand, maar een kleine set bestanden.

De set die je nodig hebt

favicon.ico — 16, 32 en 48px samen in één bestand. Voor adresbalk, tabbladen en bladwijzers; de oudste standaard en nog steeds onmisbaar
PNG op 16px en 32px — de scherpe versies die moderne browsers in het tabblad tonen
apple-touch-icon op 180px — gebruikt wanneer iemand je site aan het startscherm van iPhone of iPad toevoegt
PNG op 192px en 512px — voor Android-startschermen en PWA-installaties, geregistreerd in site.webmanifest

Sleep een logo en ontvang favicon.ico, het Apple touch-icoon en PWA-iconen in één ZIP, plus de HTML voor je site. Alles gebeurt in de browser.

Genereer de complete favicon-set

Zonder installatie en zonder registratie · alles draait in de browser en je bestanden gaan niet naar een server

Zo bereid je het bronbeeld voor

De juiste aanpak: begin met een groot vierkant beeld (512px of meer) en verklein. Een klein beeld vergroten maakt het alleen maar wazig.

Het moet op 16px herkenbaar blijven, dus hoe eenvoudiger hoe beter. Eén symbool wint van een logo vol tekst; een kleine marge langs de randen voorkomt een propvol gevoel, en een transparante achtergrond past bij licht én donker thema.

Zo zet je ze in je HTML

Upload de bestanden naar de hoofdmap van je site en verwijs ernaar met link-tags in de head: rel="icon" voor de ICO en PNG's, rel="apple-touch-icon" voor het 180px-icoon en rel="manifest" voor site.webmanifest.

Als terugval vinden de meeste browsers een favicon.ico in de hoofdmap ook zonder tags. Maar wil je dat de PNG's per formaat en de startschermiconen goed werken, voeg dan de tags toe.

Bouw de set niet met de hand

Beeld voor beeld verkleinen en zelf een ICO inpakken is monnikenwerk. Sleep één afbeelding in de favicon-generator van Image Converter NOW: die maakt favicon.ico, alle PNG-formaten, site.webmanifest en de kant-en-klare HTML-tags in één ZIP.

Alles draait in je browser — je logo wordt nooit naar een server geüpload.