PNG → ICO
Favicon-generator
Maak van één afbeelding alle iconen die een website nodig heeft: favicon.ico, het Apple touch icon, de app-iconen en de HTML om te plakken. Alles gebeurt in je browser.
Sleep je logo of icoon hierheen PNG, JPG of SVG. Een vierkante afbeelding werkt het best. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
Plak dit in de <head> van je site
Werkt in je browser · bestanden blijven op je apparaat
Zo maak je een favicon
- Voeg je logo of icoon toe. PNG, JPG of SVG. Een vierkante afbeelding met een eenvoudige vorm werkt het best.
- Stel witruimte, hoeken en achtergrond in. Voeg ruimte rond het icoon toe, rond de hoeken af en vul de achtergrond als je logo donker is op transparant.
- Controleer de browsertabbladen. Het voorbeeld toont het icoon op het echte formaat van 16 px in een licht en een donker tabblad.
- Download de ZIP en plak de HTML. Zet de bestanden in de hoofdmap van je site en plak de tags in de
<head>.
Wat de favicon-generator maakt
| Bestand | Formaat | Gebruikt door |
|---|---|---|
| favicon.ico | 16, 32 en 48 px | Browsertabbladen, bladwijzers, snelkoppelingen in Windows en elke tool die /favicon.ico opvraagt |
| icon.svg | Schaalbaar | Moderne browsers, als je bronafbeelding een SVG is |
| apple-touch-icon.png | 180 px | Snelkoppelingen op het beginscherm van iPhone en iPad |
| icon-192.png en icon-512.png | 192 en 512 px | Android en geïnstalleerde web-apps, vermeld in het manifest |
| manifest.webmanifest | – | Vertelt browsers waar de app-iconen staan |
De iconen van 192 en 512 px volgen het voorbeeld van het webapp-manifest op web.dev. Het Apple touch icon krijgt altijd een effen achtergrond, omdat iOS transparante delen zwart weergeeft.
Favicon maken van een afbeelding of PNG
Begin met de schoonste versie van je logo die je hebt. Een favicon wordt in een tabblad op 16 bij 16 pixels getoond, dus kleine tekst en dunne lijnen verdwijnen. Veel merken gebruiken alleen hun symbool of beginletter. Is je bronafbeelding niet vierkant, dan centreert de generator hem op een vierkant canvas met transparante marges.
Gebruik de schuifregelaar voor witruimte als het logo de randen raakt, en vul de achtergrond als het logo donker en transparant is, zodat het zichtbaar blijft in donkere browsertabbladen.
SVG favicon maken
Sleep je een SVG erin, dan zit die in de set als icon.svg en voegt de HTML hem toe als extra icoon. Browsers die SVG-favicons ondersteunen, gebruiken hem op elk formaat en de andere vallen terug op favicon.ico. De PNG-iconen worden vanuit de vector getekend, dus ze worden scherp.
Favicon-generator en Google Zoeken
Google kan je favicon naast je zoekresultaten tonen. De richtlijnen vragen om een vierkante afbeelding van minstens 8 bij 8 pixels en raden er een aan die groter is dan 48 bij 48 pixels (Google Search Central). Het formaat van 48 px in favicon.ico en het icoon van 192 px dekken dat af. Meer details staan in onze gids over favicon-formaten.