Gids
Favicon-formaat: welke afmetingen en bestanden je nodig hebt
Een favicon wordt op veel formaten getoond, van een browsertabblad van 16 pixels tot een app-icoon van 512 pixels. Deze gids zet de formaten op een rij die ertoe doen en laat zien hoe je ze toevoegt.
Favicon-formaat voor een website: het korte lijstje
| Formaat | Bestand | Waar het wordt gebruikt |
|---|---|---|
| 16 × 16 px | favicon.ico | Browsertabbladen en bladwijzers |
| 32 × 32 px | favicon.ico | Tabbladen op schermen met hoge dichtheid, snelkoppelingen in Windows |
| 48 × 48 px | favicon.ico | Windows en zoekresultaten van Google |
| 180 × 180 px | apple-touch-icon.png | Beginscherm van iPhone en iPad |
| 192 × 192 px | icon-192.png | Android en geïnstalleerde web-apps |
| 512 × 512 px | icon-512.png | Opstartschermen en app-winkels voor web-apps |
Eén favicon.ico met 16, 32 en 48 px plus de drie PNG-bestanden dekt browsers, telefoons en zoekmachines. Onze favicon-generator maakt ze allemaal van één afbeelding.
Favicon-afmeting in pixels voor Google
Google toont favicons naast zoekresultaten. De richtlijnen vereisen een vierkante favicon van minstens 8 × 8 pixels en raden er een aan die groter is dan 48 × 48 pixels, zodat hij er op verschillende oppervlakken goed uitziet (Google Search Central). Een favicon.ico met een afbeelding van 48 px, of een gekoppelde PNG van 192 px, voldoet aan die aanbeveling.
Favicon-formaat kiezen: ICO, PNG en SVG
- ICO bevat meerdere formaten in één bestand en is wat browsers opvragen op
/favicon.icoals er geen icoon is opgegeven. Houd er een aan voor compatibiliteit. - PNG wordt gebruikt voor het Apple touch icon en de app-iconen die in het webmanifest staan.
- SVG werkt als favicon in moderne browsers en blijft op elk formaat scherp. Voeg hem toe als extra icoon, niet als enige.
Wil je een bestaande PNG omzetten in een .ico met de formaten die je kiest, gebruik dan de PNG naar ICO-converter.
Favicon in HTML toevoegen
Zet de bestanden in de hoofdmap van je site en voeg deze tags toe binnen de <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Het manifest bevat de iconen van 192 en 512 px. Laat de SVG-regel weg als je geen SVG-versie hebt.
Favicon in WordPress, Shopify en Squarespace
Sitebouwers vragen om één afbeelding en maken de formaten zelf. WordPress noemt het het site-icoon en vraagt om een vierkante afbeelding van minstens 512 × 512 pixels. Shopify en Squarespace nemen ook een vierkante afbeelding aan, in hun instellingen voor merk of ontwerp. Upload een grote vierkante PNG en laat het platform hem verkleinen; controleer daarna het resultaat in een browsertabblad.