Favicon maken
Maak van een logo een compleet favicon-pakket voor je website.
Draait in je browser. Je bestanden verlaten nooit je apparaat.
- ICO plus elk PNG-formaat
- Kant-en-klare HTML-snippet
- Instelbare padding
Zo maak je een favicon
- Sleep een vierkant logo of afbeelding hierheen.
- Pas indien nodig de padding en achtergrond aan.
- Download de ZIP en plak de HTML-snippet.
Wat er in de ZIP zit
| Bestand | Formaat | Gebruikt door |
|---|---|---|
| favicon.ico | 16, 32 en 48 px in één bestand | Oudere browsers, bladwijzers |
| favicon-16x16.png | 16 x 16 | Browsertabbladen |
| favicon-32x32.png | 32 x 32 | Browsertabbladen, taakbalken |
| apple-touch-icon.png | 180 x 180 | Beginscherm iPhone en iPad |
| android-chrome-192x192.png | 192 x 192 | Beginscherm Android |
| android-chrome-512x512.png | 512 x 512 | Android-splash en app-icoon |
| site.webmanifest | Tekstbestand | Vertelt Android welk icoon te gebruiken |
Waar de bestanden naartoe gaan
Upload elk bestand uit de ZIP naar de hoofdmap van je website, dezelfde map als index.html, niet een submap. Plak daarna de meegeleverde HTML-snippet in de head van elke pagina, of in de gedeelde headersjabloon van je site, als die er is.
Tips voor padding en achtergrond
- Voeg 10 tot 15 procent padding toe voor logo's die de randen van hun vierkant raken, zodat ze op 16 pixel niet afgesneden ogen.
- Zet een achtergrondvulling aan als je logo transparantie heeft en er vreemd uitziet tegen de eigen tabkleur van een browser.
- Een eenvoudig logo met veel contrast leest beter op 16x16 dan een logo met fijn detail of dunne tekst.
Veelgestelde vragen over Favicon maken
Wat zit er in de ZIP?
favicon.ico met de formaten 16, 32 en 48 pixels, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, twee android-chrome PNG's en een site.webmanifest-bestand.
Waar gaan deze bestanden naartoe?
Upload ze naar de hoofdmap van je website en plak daarna de HTML-snippet in de head van elke pagina.
Moet mijn afbeelding al vierkant zijn?
Een vierkant logo geeft het netste resultaat. Niet-vierkante afbeeldingen worden met padding in een vierkant geplaatst, zodat er niets wordt uitgerekt.
Wat doet padding?
Het voegt lege ruimte toe rond je logo binnen het vierkant, wat voorkomt dat het ontwerp bij kleine icoongroottes de randen raakt.
Wordt mijn afbeelding geüpload?
Nee. Elk icoonformaat wordt gegenereerd in je browser, dus de afbeelding verlaat nooit je apparaat.
Heb ik alle zes bestanden nodig, of alleen favicon.ico?
Moderne browsers gebruiken vooral de PNG-bestanden en site.webmanifest. favicon.ico blijft nodig voor oudere browsers en sommige bladwijzerbalken, dus upload ze allemaal voor de breedste ondersteuning.
Met welk afbeeldingsformaat moet ik beginnen?
Minstens 512 bij 512 pixels. Het hoofdicoon wordt op dat formaat gegenereerd, dus een kleinere bronafbeelding wordt uitgerekt om te passen en kan zacht ogen.
Moet het manifestbestand nog bewerkt worden?
Het gegenereerde site.webmanifest gebruikt placeholdertekst voor de sitenaam. Open het daarna in een teksteditor en werk de velden name en short_name bij naar je eigen site.