Wie op ‘faviconafmetingen’ zoekt, vindt nog steeds lijstjes met vijftien bestanden uit 2014. In de praktijk volstaan tegenwoordig zes afmetingen voor browsertabbladen, zoekresultaten, iOS, Android en PWA's. Hier lees je welke dat zijn en waarom.
De afmetingen die je echt nodig hebt
Elke rij komt overeen met een gedocumenteerde toepassing in het voorgestelde pakket. De tabel gaat uit van een kleine, breed bruikbare set in plaats van een verzameling historische varianten.
| Bestand | Afmetingen | Toepassing |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Tabbladen, bladwijzers, oudere browsers en crawlers |
| favicon.svg | vector, vierkant | Moderne browsers, scherp op elk formaat, met ondersteuning voor de donkere modus |
| favicon-96x96.png | 96×96 | Mobiele Google-zoekresultaten |
| apple-touch-icon.png | 180×180 | Startscherm van iOS en iPadOS, zonder transparantie |
| web-app-manifest-192x192.png | 192×192 | Android-startscherm, opgegeven in het webmanifest |
| web-app-manifest-512x512.png | 512×512 | PWA-opstartscherm, de ‘maskable’-variant |
Waarom 16, 32 en 48 in hetzelfde .ico-bestand zitten
ICO is een containerformaat: één bestand kan meerdere afbeeldingen bevatten en de browser kiest de versie die bij de weergave past. Dat is precies de bedoeling, want de gewenste afmeting verschilt per toepassing.
16×16 is geschikt voor een tabblad op een standaardscherm. 32×32 biedt een variant voor schermen met een hoge pixeldichtheid en andere browserinterfaces. 48×48 vult de container aan en voldoet ook aan de regel van een veelvoud van 48 die Google documenteert voor favicons in zoekresultaten.
De meest gemaakte fout is een .ico-bestand dat alleen 16×16 bevat: op een Retina-scherm wordt het pictogram vergroot en ziet het er voortdurend onscherp uit.
180×180 voor iOS, 192 en 512 voor Android
iOS leest het webmanifest niet voor het pictogram op het startscherm, maar zoekt een apple-touch-icon-tag. Eén afmeting volstaat: 180×180, geschikt voor alle recente iPhones en iPads. Voor oudere apparaten verkleint het systeem de afbeelding zelf.
Android gebruikt juist het webmanifest. Twee vermeldingen volstaan: 192×192 voor het startschermpictogram en 512×512 voor het opstartscherm wanneer de site als app is geïnstalleerd. Geef bij de 512-versie purpose ‘maskable’ op. Het ontwerp moet dan herkenbaar blijven wanneer het wordt bijgesneden tot een cirkel of afgerond vierkant.
Houd bij een maskeerbaar pictogram de belangrijkste onderdelen binnen de centrale 80%. Alles daarbuiten kan worden bijgesneden, afhankelijk van de telefoonfabrikant.
Met welke bronafbeelding begin je?
Het beste uitgangspunt is een SVG: die schaalt zonder kwaliteitsverlies naar alle bovengenoemde afmetingen. Gebruik anders een vierkante PNG van minstens 512×512 pixels, zodat ook het Android-opstartpictogram door verkleining wordt gemaakt en nooit door vergroting.
Een horizontaal logo met tekst werkt niet op 16×16: op die grootte verandert een woord in een paar onduidelijke pixels. Gebruik alleen het symbool of begin met één of twee letters op een contrasterende achtergrond.
Controleer ten slotte het contrast op zowel een lichte als een donkere achtergrond: een zwart logo verdwijnt op een donker tabblad. Daarvoor dient precies de donkere variant van de SVG-favicon.
Afmetingen die je niet meer nodig hebt
Oudere generators maken nog bestanden voor historische toepassingen, zoals Windows-tegels met mstile-150x150.png en browserconfig.xml. Voeg deze alleen toe als je die interfaces uitdrukkelijk wilt ondersteunen.
De lange reeks apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 en 152x152 stamt uit een tijd waarin iOS geen afbeeldingen kon verkleinen. Eén afbeelding van 180×180 vervangt ze allemaal.
Door ongebruikte declaraties te verwijderen, houd je je repository en HTML eenvoudiger. Controleer eerst welke browsers en platforms je ondersteunt voordat je een bestaande integratie verwijdert.
Primaire bronnen
Veelgestelde vragen
Heb je nog een favicon.ico nodig?
Ja, maar alleen in de hoofdmap van de site. Moderne browsers geven de voorkeur aan SVG, maar veel crawlers, aggregators en mailprogramma's vragen nog steeds /favicon.ico op zonder je HTML te lezen. Het bestand is maar enkele kilobytes: behoud het.
Welke faviconafmeting gebruikt Google in zoekresultaten?
Google vraagt om een pictogram waarvan de zijde een veelvoud van 48 pixels is en toont het doorgaans op 48×48. Een PNG van 96×96 of een SVG volstaat ruimschoots. Het pictogram moet kunnen worden gecrawld en mag niet worden geblokkeerd door robots.txt.
Mag mijn favicon rechthoekig zijn?
Technisch wel, visueel niet. Elke weergave reserveert een vierkant: een rechthoekige afbeelding wordt vervormd of gecentreerd met lege stroken. Begin altijd met een vierkant en voeg zo nodig ruimte rond het symbool toe.