Favicon-generator
Maak van elke afbeelding een favicon.ico plus de volledige PNG- en manifest-iconenset
Over deze tool
Sleep één afbeelding erin — bij voorkeur een vierkant logo van 512px of groter — en krijg de complete favicon-set: een favicon.ico met 16, 32 en 48 px voor tabbladen en bladwijzers, PNG’s op de standaardformaten inclusief het Apple touch-icoon van 180px en de PWA-iconen van 192/512px, een site.webmanifest om mee te beginnen, en de <link>-tags om in je <head> te plakken. Eén ZIP-download bevat alles, precies benoemd zoals de conventies verwachten.
De details die favicon-tutorials verkeerd doen zijn hier afgehandeld: de ICO bevat PNG-gecomprimeerde entries (overal ondersteund sinds Windows Vista, veel kleiner dan oude BMP-iconen); het Apple touch-icoon wordt op een door jou gekozen achtergrondkleur gelegd, omdat iOS transparantie door zwart vervangt; en de PWA-iconen behouden hun alfakanaal. Niet-vierkante bronnen worden vanuit het midden bijgesneden, niet platgedrukt.
Een logo naar 16px verkleinen is van nature destructief — fijn detail overleeft eenvoudigweg niet — dus de voorbeeldrij toont elk formaat op zijn echte afmetingen, zodat je de leesbaarheid kunt beoordelen voordat je het uitrolt. Alles wordt op een lokaal canvas gerenderd en de ICO-/ZIP-containers worden byte voor byte in de pagina samengesteld; je logo wordt nergens geüpload.
Veelgestelde vragen
- Welke faviconformaten heb ik in 2026 echt nodig?
- Minder dan de folklore suggereert: een favicon.ico met 16/32/48 voor legacy en de adresbalk, één apple-touch-icon.png van 180px, en PNG’s van 192/512px waarnaar het web-app-manifest verwijst. Moderne browsers kiezen de beste match uit precies deze set — de pakketten met 20 bestanden die sommige generatoren uitspugen zijn cargo cult.
- Waarom is mijn logo onleesbaar op 16px?
- Zestien pixels is meedogenloos klein — woordmerken, dunne lijnen en fijne verlopen lossen allemaal op. Sterke favicons brengen het merk terug tot één vet teken of vorm met veel contrast. Is het 16px-voorbeeld hier pap, snijd dan strakker op het kenmerkende deel van het merk of gebruik een vereenvoudigde variant voor kleine formaten.
- Heb ik nog een .ico-bestand nodig, of volstaan PNG-favicons?
- Elke moderne browser accepteert PNG-favicons, maar /favicon.ico is nog steeds het pad dat user agents, crawlers en oudere tooling blind opvragen. Daar een echte ICO serveren kost een paar kilobytes en elimineert een hele klasse 404’s en terugvalgrilligheden — houd hem naast je PNG-links.
- Waarom heeft het Apple touch-icoon een achtergrondkleur nodig?
- iOS rendert geen transparantie in iconen op het beginscherm — welke alfa je PNG ook heeft, hij wordt op zwart samengesteld. Vooraf platleggen op een kleur die jij koos houdt het resultaat bedoeld. Kies de achtergrond die bij je icoon past, en onthoud dat iOS de hoeken zelf afrondt, dus lever een vierkant aan dat helemaal doorloopt.