Je hebt het vast al eens gezien: dat kleine icoontje in de browser naast de naam van een website of in je Google-zoekresultaten.
Dat heet een favicon (afkorting van favorite icon). Het lijkt een detail, maar het heeft verrassend veel invloed op herkenning, gebruiksvriendelijkheid en professionele uitstraling van je website.
Waarom een favicon belangrijk is
Een favicon zorgt ervoor dat bezoekers jouw site herkennen tussen tientallen open tabbladen.
Zonder favicon zie je vaak een grijs of standaard symbool, of bij een WordPress site de blauwe W van WordPress en dat oogt meteen minder professioneel.
Een favicon:
- versterkt je merkherkenning (je logo of letter is direct zichtbaar);
- zorgt voor vertrouwen bij bezoekers;
- en helpt ook Google om je website visueel te onderscheiden in de zoekresultaten.
Zeker op mobiel waar minder schermruimte is, maakt een goed favicon het verschil tussen opvallen of verdwijnen in de massa.
Veel mensen zoeken naar: icoontje in de browser of afbeelding in de browser
Veel website-eigenaren weten niet hoe dat “icoontje in de browser” heet, en zoeken daarom op termen als icoontje bij website, browser afbeelding, of afbeelding naast website-naam.
Het antwoord is dus simpel: dat is je favicon.
Of je nu werkt met WordPress, Shopify of een ander CMS – vrijwel elk systeem heeft een optie om dit eenvoudig toe te voegen.
Hoe groot moet een favicon zijn?
De klassieke favicon was 16×16 pixels, maar inmiddels gebruiken browsers, mobiele apparaten en retina-schermen verschillende formaten.
Daarom is het slim om meerdere groottes te uploaden, zodat je favicon er op elk apparaat scherp uitziet.
| Gebruik | Aanbevolen formaat | Bestandstype |
|---|---|---|
| Browser tabblad | 16×16 of 32×32 px | .ico of .png |
| Mobiele apparaten | 180×180 px | .png |
| Android / Progressive Web App | 192×192 px | .png |
| Windows tegels | 270×270 px | .png |
Door meerdere formaten aan te bieden, kan de browser zelf kiezen welke het best past bij de schermresolutie.
Zo ziet je icoon er altijd scherp en professioneel uit, ook op retina-schermen.
Transparante of gekleurde achtergrond?
Gebruik bij voorkeur een favicon met transparante achtergrond.
Dat voorkomt dat je icoon wegvalt in donkere of lichte browser-thema’s.
Heb je een doorzichtige header op je website (zoals veel moderne WordPress-thema’s, o.a. Astra of Blocksy), dan kun je zelfs overwegen om een licht of donker alternatief te maken – afhankelijk van je design.
Witte tekst op een donkere header werkt vaak beter dan een zwarte versie die in de achtergrond verdwijnt.
Waar voeg je een favicon toe in WordPress?
- Ga in je WordPress-dashboard naar Weergave → Customizer → Site-identiteit
- Klik op Site-icoon kiezen
- Upload je favicon (bij voorkeur een 180×180 of 192×192 PNG met transparante achtergrond)
- Publiceer je wijzigingen
Vanaf dat moment zie je het icoontje niet alleen in je browser-tabblad, maar ook in Google-zoekresultaten, bladwijzers en mobiele snelkoppelingen.
Samenvattend: een klein detail met grote impact
Een favicon lijkt maar een klein element, maar het:
- versterkt je branding;
- verhoogt vertrouwen bij bezoekers;
- en zorgt dat je website professioneler oogt in Google-resultaten en browser-tabs.
Of je nu kiest voor een volledige versie van je logo of alleen een herkenbare letter, zorg dat je favicon scherp, duidelijk en in meerdere formaten beschikbaar is.
