Favicon-generator
Upload één afbeelding, download elke favicon-formaat — PNG's van 16 tot 512 px plus de HTML-linktags. Werkt volledig in uw browser.
1.146 weergaven
Afbeelding kon niet worden gelezen — probeer PNG/JPG/WebP
De formaten die er in 2026 toe doen
Verschillende apparaten en contexten verwachten elk een andere favicon-grootte, omdat een favicon niet één bestand is — het is een familie van bestanden. Browsertabbladen gebruiken piepkleine PNG's van 16×16 en 32×32 pixels. De functie "Toevoegen aan beginscherm" van iOS gebruikt een apple-touch-icon van 180×180. Android en geïnstalleerde PWA's halen iconen van 192×192 en 512×512 pixels uit het webapp-manifest voor hun beginscherm- en opstartschermafbeeldingen. Eén bronafbeelding kan niet direct al deze formaten bedienen — een logo van 512 px dat rechtstreeks in een tab van 16 px wordt geperst, verliest bijna al zijn detail, en een icoon van 16 px dat wordt opgerekt naar 512 px ziet er wazig en blokkerig uit. De juiste aanpak is dus om één bron met hoge resolutie afzonderlijk naar elk doelformaat te renderen, waarbij de pixels bij elk formaat opnieuw worden getekend in plaats van één uitvoer van een andere te schalen.
Dat is precies wat deze tool doet: hij laadt uw bronafbeelding in uw browser op een HTML-canvas en schaalt deze naar alle zes standaardformaten — 16, 32, 48, 180, 192 en 512 pixels — elk rechtstreeks getekend vanuit het origineel, en overhandigt u vervolgens de bijbehorende PNG's plus de <link>-tags om in de <head> van uw site te plakken. Er wordt niets geüpload; het formaat wijzigen gebeurt met de Canvas API op uw eigen apparaat.
Ontwerpen voor het kleinste formaat
Omdat er bij 16 px zoveel detail verloren gaat, werkt favicon-ontwerp achterwaarts vanaf het kleinste formaat, niet het grootste. Snijd bij tot het logomerk in plaats van een volledig woordmerk — tekst wordt een onleesbare vlek onder ongeveer 24 px. Behoud sterk contrast tegen zowel lichte als donkere tabbalken, aangezien browsers wisselen tussen thema's. Een effen achtergrondkleur leest meestal beter dan transparantie bij de kleinste formaten, waar een paar semi-transparante randpixels als ruis kunnen overkomen. Veel merken onderhouden een vereenvoudigde "app-icoon"-versie van hun logo — één enkele letter, initiaal of glyph — juist omdat hun volledige logo de test van 16 px niet doorstaat.
Het helpt ook om het manifestbestand te begrijpen dat de iconen van 192 en 512 pixels samenbrengt voor installeerbare sites: het webapp-manifest (manifest.json) verwijst naar deze twee formaten via URL, zodat Android- en desktop-PWA-installatieprogramma's weten welk icoon ze moeten ophalen voor het beginscherm en de app-switcher. Sites die de manifesticonen overslaan, blijven volledig functioneel — de browsertab- en iOS-beginschermiconen werken onafhankelijk — maar de installatiemelding zelf kan terugvallen op een generiek icoon of helemaal geen installatie aanbieden.
Veelgestelde vragen
Heb ik nog steeds een .ico-bestand nodig?
Zelden. Elke moderne browser accepteert PNG-favicons die via het sizes-attribuut in een link-tag worden gedeclareerd. Een /favicon.ico op de root van uw site behouden helpt alleen zeer oude user agents en tools die dat hardgecodeerde legacy-pad rechtstreeks opvragen.
Welke afbeelding moet ik uploaden?
Een vierkante afbeelding, idealiter 512 px of groter, PNG of een uit SVG geëxporteerde raster met het merk gecentreerd en voldoende opvulling eromheen. Niet-vierkante afbeeldingen worden vóór het schalen in het midden vierkant bijgesneden, zodat er niets wordt uitgerekt.
Waarom ziet mijn icoon er wazig of troebel uit op 16 px?
Zestien pixels kunnen fysiek geen fijn detail bevatten — dunne lijnen, verlopen en kleine tekst lossen op in een vlek. Vereenvoudig het bronmerk, verhoog het contrast, of ontwerp een speciale kleine versie als uw volledige logo het kleinste tabicoon niet overleeft.
Wat is het verschil tussen de iconen van 192 px en 512 px?
Beide voeden Android- en PWA-manifesten: 192 px wordt gebruikt voor het beginschermicoon bij normale dichtheid, terwijl 512 px wordt gebruikt voor schermen met hoge dichtheid en het opstartscherm dat wordt getoond terwijl een PWA laadt — Android kiest wat past bij de context.
Moet ik elk formaat toevoegen, of slechts een paar?
Voor een moderne site dekken 32 px plus de apple-touch-icon van 180 px de overgrote meerderheid van de bezoekers. Voeg de manifesticonen van 192/512 px alleen toe als de site installeerbaar is als PWA; de formaten van 16 en 48 px helpen vooral bij verouderde contexten.
Vergelijkbare tools
Probleem melden
Favicon-generator
Reacties
Nog geen reacties — schrijf de eerste!