PWA-icongenerator

Genereer de iconen die een installeerbare web-app nodig heeft — PNG’s van 192 en 512px plus een site.webmanifest — uit één afbeelding, volledig in je browser.

Privacy voorop: elke afbeelding wordt lokaal in je browser verwerkt. Er wordt niets geüpload, opgeslagen of naar een server verzonden.

De iconen die een app installeerbaar maken

Of een progressive web app installeerbaar is, hangt mede af van de iconen: browsers zoeken naar een web-manifest dat minstens een PNG van 192×192 en een van 512×512 declareert voordat ze een installatieprompt tonen of een fatsoenlijk icoon op het startscherm zetten. Deze generator rendert beide uit je bronafbeelding en schrijft een site.webmanifest dat ernaar verwijst, naast de apple-touch-icon die iOS wil en een favicon.ico voor gewone tabbladen.

Geef het vorm voor de launcher

Android-launchers kunnen een icoon in een cirkel of afgerond vierkant maskeren, waardoor beeld dat tot aan de rand loopt kan worden afgeknipt. Voeg hier opvulling en een effen achtergrond toe, dan blijft het belangrijkste deel binnen de veilige zone, welk masker er ook wordt toegepast; het live voorbeeld toont het resultaat op elk formaat. Alles wordt op je apparaat gerenderd met de Canvas-API — je logo wordt nooit geüpload — en de hele set download je als zip.

Veelgestelde vragen

Wordt mijn afbeelding geüpload om de favicon te maken?
Nee. De favicon.ico, PNG-iconen en het manifest worden allemaal lokaal in je browser gegenereerd met de Canvas-API. Je afbeelding verlaat nooit je apparaat.
Welke formaten en bestanden krijg ik?
Een favicon.ico met meerdere resoluties (16, 32 en 48px), PNG-iconen op 16, 32, 48, 180 (apple-touch-icon), 192 en 512px, een site.webmanifest en een HTML-fragment om in je <head> te plakken.
Kan ik een PNG of SVG naar een ICO omzetten?
Ja. Zet er een PNG, JPG, SVG of WebP in en download een echte favicon.ico. SVG-logo's worden eerst lokaal op hoge resolutie gerasterd.
Welke afbeelding werkt het best?
Een vierkante afbeelding met een eenvoudig, contrastrijk logo. Niet-vierkante afbeeldingen worden vanuit het midden bijgesneden; gebruik de opvulling- en vormbediening om het te kaderen zoals je wilt.
Hoe installeer ik de favicon?
Pak het pakket uit in de hoofdmap van je site en plak het meegeleverde HTML-fragment in de <head> van je pagina's. De favicon.ico wordt door de meeste browsers automatisch opgepikt.