Hoe je een favicon maakt
De afmetingen, formaten en code die een favicon nodig heeft om overal te verschijnen.
De favicon is het kleine pictogram in het browsertabblad, in je favorieten en naast je site in de Google-zoekresultaten op mobiel. Een site zonder favicon oogt onaf, en een wazige favicon maakt een nog slechtere indruk. Een goede maken kost een paar minuten.
Begin met de juiste afbeelding
Een favicon wordt soms op 16 bij 16 pixels getoond, dus een volledig logo met de naam erin wordt onleesbaar. Gebruik een eenvoudig teken: het symbool uit je logo, een initiaal of een strakke vorm in je merkkleur. Test het door het op een kwart van de grootte op je scherm te bekijken: herken je het nog, dan werkt het.
Begin met een vierkante afbeelding van minstens 512 bij 512 pixels, bij voorkeur een PNG met transparante achtergrond. Is je logo niet vierkant, snijd het dan bij met de verhouding vastgezet op 1:1.
De bestanden die je nodig hebt
| Bestand | Formaat | Gebruikt door |
|---|---|---|
| favicon.ico | Bevat de versies van 16, 32 en 48 pixels | Browsers, oudere systemen, de standaardaanvraag naar /favicon.ico |
| Een PNG-pictogram | 32 bij 32 en 192 bij 192 | Moderne browsers, Android-beginscherm |
| apple-touch-icon.png | 180 bij 180 | Snelkoppelingen op het beginscherm van iPhone en iPad |
Ook Google gebruikt je favicon in de zoekresultaten. Hij moet vierkant zijn, minstens 48 bij 48 pixels, en bereikbaar voor crawlers op je site.
Het ICO-bestand maken
Sleep je vierkante PNG in de PNG-naar-ICO-converter. Die maakt een echt .ico-bestand met de kleine formaten die browsers vragen. Voor de PNG-versies schaal je dezelfde vierkante afbeelding naar 180, 192 en 32 pixels.
Hem aan je site toevoegen
Upload favicon.ico naar de hoofdmap van de site zodat hij bereikbaar is op jouwsite.nl/favicon.ico, en zet deze regels in de head van je pagina’s:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
In WordPress ga je naar Weergave, Aanpassen, Site-identiteit en upload je een vierkante afbeelding als Sitepictogram; WordPress maakt de formaten voor je. Shopify, Wix en Squarespace hebben elk een favicon-instelling bij de site- of thema-instellingen.
Als de nieuwe favicon niet verschijnt
Browsers bewaren favicons hardnekkig in hun cache. Open de site in een privévenster, of ga rechtstreeks naar jouwsite.nl/favicon.ico en ververs. Google kan er dagen tot weken over doen om het pictogram in de resultaten bij te werken, nadat je startpagina opnieuw is gecrawld.
Veelgemaakte fouten
- Het volledige logo met kleine tekst gebruiken, dat op 16 pixels een vlek wordt.
- Een wit pictogram op een transparante achtergrond, dat verdwijnt op lichte tabbladen.
- Alleen een klein bestand van 16 pixels aanleveren, dat wazig oogt op schermen met hoge resolutie.
- Het bestand op /favicon.ico vergeten, dat sommige browsers en crawlers toch opvragen, wat er ook in de pagina staat.