Favicon-generator
Browsers verwachten meerdere pictogramformaten: klassiek 16×16 favicon.ico, 32×32 tabbladpictogrammen, 180×180 Apple-touch-pictogram en 192×192 PWA-pictogrammen. Upload een vierkant logo en download een complete set — lokaal gegenereerd zonder je merkitems naar een server te sturen.
Zo genereer je favicons
1. Upload een vierkante PNG of JPG (512×512 of groter aanbevolen).
2. Bekijk een voorbeeld van gegenereerde formaten.
3. Download het pictogrampakket of afzonderlijke bestanden.
4. Voeg linktags toe aan je HTML-head en plaats bestanden in /public of de hoofdmap van de site.
Favicon-installatievoorbeelden
Nieuwe statische site
Genereer favicon.ico plus 32×32 PNG en voeg standaard link rel="icon"-tags toe aan layout.html.
PWA-manifest
Exporteer 192×192 en 512×512 PNG voor de array met manifest.json-pictogrammen.
Rebrand-wissel
Vervang één hoofdlogo en genereer alle formaten opnieuw, zodat tabbladen en snelkoppelingen op het startscherm overeenkomen.
Wanneer gebruik je deze tool
• Bij het lanceren van een site en alle standaard pictogramformaten tegelijk nodig hebben.
• Wanneer je een rasterlogo heeft, maar geen .ico-bestand met meerdere formaten.
• Wanneer je lokale generatie wilt zonder merkitems te uploaden.
Wanneer kies je iets anders
• Wanneer je logo gedetailleerd is, kunt je het vereenvoudigen tot een lettermarkering voor een leesbaarheid van 16×16.
• Wanneer SVG favicons voldoende zijn voor een modern publiek.
• Wanneer platformwinkels strikt gespecificeerde gelaagde PSD-bronnen vereisen.
HTML checklist voor linktags
Voeg rel="icon" toe voor PNG-formaten, rel="apple-touch-icon" voor iOS en optioneel manifest.json voor PWA's. Plaats bestanden op voorspelbare paden (/favicon.ico helpt nog steeds bij oude crawlers).
Ontwerp voor 16×16
Fijne details verdwijnen bij favicon-formaat. Gebruik gedurfde vormen, hoog contrast en vermijd dunne lijnen. Veel merken gebruiken monogramvarianten voor kleine maten.
Cache-busting bij rebranding
Browsers cachen favicons agressief. Hernoem bestanden of voeg een ?v=2-query toe bij het updaten van pictogrammen, zodat gebruikers de nieuwe markering zien.
Veelgestelde vragen
Hoe groot moet de bronafbeelding zijn?
Minimaal 512×512 px vierkant. Grotere masters kunnen beter worden gedownscaled dan kleine logo's worden opgeschaald.
ICO versus PNG favicon?
Moderne browsers accepteren PNG; .ico bundelt meerdere formaten voor oudere Windows-tabbladen.
Grootte van Apple-Touch-pictogram?
180×180 px voor iOS-snelkoppelingen op het startscherm: gebruik PNG zonder transparantie voor de beste resultaten.
Transparante achtergrond?
Werkt voor PNG tabbladen; iOS-thuispictogrammen kunnen een witte matte kleur krijgen - test op apparaat.
Worden logo's geüpload naar een server?
Nee: bij het wijzigen van de grootte wordt canvas lokaal gebruikt.
SVG bron?
Converteer SVG eerst naar PNG met een hoge resolutie en genereer vervolgens favicons.