Je hebt geen favicon: zo voeg je er een toe
Een favicon is het kleine icoontje in je browsertabblad, je bladwijzers en in de zoekresultaten van Google op mobiel. Zonder favicon zie je een leeg of standaard icoontje.
In het kud-rapport Je hebt geen favicon
Waarom het uitmaakt
Een site zonder favicon oogt onaf, vooral tussen andere tabbladen. Het is een klein detail dat vertrouwen geeft.
Google toont favicons naast je resultaat in de zoekresultaten. Een herkenbaar icoon valt op tussen de rest.
Zo los je het op
- Maak een vierkante versie van je logo, of alleen het beeldmerk. Tekst is op 16 pixels niet te lezen.
- Lever een SVG aan, plus een PNG van 32 bij 32 pixels en een apple-touch-icon van 180 bij 180 pixels.
- Voor Google: zorg dat je favicon een veelvoud van 48 pixels is, of een SVG.
- Zet de links in de head van elke pagina.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Op jouw platform
- WordPress
- Weergave, Customizer, Site-identiteit, "Site-icoon". Upload een vierkante afbeelding van minimaal 512 pixels.
- Shopify
- Online Store, Thema's, Aanpassen, Thema-instellingen, Favicon.
Veelgestelde vragen
Waarom zie ik mijn nieuwe favicon nog niet?
Browsers bewaren favicons lang. Probeer een privévenster, of wacht even. Google werkt het na verloop van tijd zelf bij.
Moet ik nog een favicon.ico hebben?
Niet per se. Moderne browsers gebruiken SVG of PNG. Een favicon.ico in de hoofdmap kan geen kwaad voor oudere systemen.