Wat is een favicon en waarom is het belangrijk voor je website?
Een favicon — favicon wat is het precies? — is het kleine icoontje van 16×16 of 32×32 pixels dat verschijnt in het browsertabblad naast de paginatitel, in je bladwijzers en op het beginscherm van smartphones. Het woord is een samentrekking van favorite icon. Hoewel het maar een klein beeldje is, speelt het een grote rol in herkenbaarheid: bezoekers zien jouw logo of merk direct terug in elke tab die ze openhebben. Zonder favicon toont een browser een generiek, grijs blokje — wat onprofessioneel overkomt. Met een goede favicon verstevig je je merkidentiteit op elk scherm, bij elke bezoeker, elke keer opnieuw.
Favicon wat is het precies?
Een favicon is een afbeeldingsbestand — meestal een .ico, .png of .svg — dat een browser laadt en toont op vaste plekken in de interface. De meest zichtbare plek is het browsertabblad, direct links van de paginatitel. Maar een favicon duikt ook op in:
- Je bladwijzerbalk en opgeslagen favorieten
- De zoekgeschiedenis in je browser
- Het beginscherm van een iPhone of Android-telefoon (als iemand je site als snelkoppeling opslaat)
- Resultaatpagina’s van zoekmachines — Google toont favicons naast zoekresultaten
Technisch gezien verwijs je naar een favicon via een <link>-tag in de <head> van je HTML. Moderne websites leveren meerdere formaten aan — van 16×16 pixels voor tabs tot 180×180 pixels voor Apple-apparaten — zodat het icoontje op elk scherm scherp blijft.
Waarom een favicon belangrijk is voor je merk
Stel: iemand heeft tien tabbladen open. Jouw website is één van de tien. Als jij geen favicon hebt, ziet die bezoeker een grijs, generiek blokje. Een concurrent met een herkenbaar logo springt er direct uit. Dat is het verschil tussen onzichtbaar zijn en gezien worden.
Volgens onderzoek van Nielsen Norman Group (2023) gebruiken bezoekers visuele cues — waaronder favicons — om snel te wisselen tussen tabbladen. Een ontbrekende of onduidelijke favicon vertraagt dat proces en vergroot de kans dat iemand je tab sluit in plaats van erop terugkeert.
Drie concrete redenen waarom een favicon loont:
- Merkherkenning — je logo is op elk moment zichtbaar, ook als iemand niet actief op je site bezig is.
- Professionele uitstraling — een favicon is een klein detail dat bezoekers onbewust meewegen in hun oordeel over jouw betrouwbaarheid.
- Zichtbaarheid in zoekresultaten — Google toont favicons in de mobiele zoekresultaten. Een herkenbaar icoontje trekt meer klikken dan een generiek grijs blokje.
Wat maakt een goede favicon?
Een favicon is maar een paar tientallen pixels groot. Dat betekent dat een gedetailleerd logo vrijwel altijd wegvalt op die schaal. Een goede favicon is simpel, direct herkenbaar en werkt zowel op een lichte als donkere achtergrond.
Praktische richtlijnen voor een effectieve favicon:
- Gebruik je initialen of een beeldmerk — de volledige bedrijfsnaam past niet in 16×16 pixels.
- Kies hoog contrast — lichte icoontjes op een donkere achtergrond of andersom vallen beter op in een drukke tabbalk.
- Lever meerdere formaten aan — minimaal 16×16, 32×32 en 180×180 pixels voor Apple Touch Icons.
- Test op verschillende browsers — Chrome, Safari en Firefox renderen favicons soms net anders.
Favicon en domeinnaam: de combinatie die vertrouwen bouwt
Een favicon werkt het sterkst samen met een professionele domeinnaam. Een herkenbaar icoontje naast een duidelijk webadres geeft bezoekers direct vertrouwen: ze zien in één oogopslag dat ze op de juiste plek zijn. Dat geldt ook in de zoekresultaten van Google — domeinnaam én favicon verschijnen samen boven de paginatitel.
Als je een professionele website laat maken, hoort een correcte favicon-implementatie standaard bij het werk. Toch is het iets wat bij zelfbouwde sites of oudere websites regelmatig ontbreekt of niet goed is ingesteld — met als gevolg dat alle browserformaten worden overgeslagen en het icoontje op een iPhone wazig of te klein verschijnt.
Hoe voeg je een favicon toe aan je website?
Het proces verschilt per platform, maar de stappen zijn vergelijkbaar:
- Maak een afbeelding van je logo of beeldmerk, bij voorkeur als vierkant SVG of PNG.
- Genereer meerdere formaten via een tool zoals RealFaviconGenerator.net — dit levert een compleet pakket op voor alle apparaten en browsers.
- Upload de bestanden naar de hoofdmap van je website (
/favicon.icois de standaardlocatie die browsers automatisch controleren). - Voeg de juiste
<link>-tags toe aan de<head>van je HTML, of gebruik de instellingen van je CMS (WordPress, Webflow en andere platformen hebben hier een eigen instelling voor). - Controleer het resultaat door je browser te vernieuwen en de tab te bekijken.
In WordPress vind je de favicon-instelling onder Weergave → Customizer → Site-identiteit, onder de naam ‘Site-icoon’. In Webflow stel je het in via Project Settings → Favicon & Touch Icons.
1. Favicon wat is het en waar zie ik het staan?
2. Wat gebeurt er als een website geen favicon heeft?
3. Welk bestandsformaat gebruik je het beste voor een favicon?
4. Hoe voeg ik een favicon toe in WordPress?
5. Heeft een favicon invloed op SEO?
Heb je vragen?
Richard is eigenaar van Richway en heeft ruim 8 jaar ervaring met het bouwen van websites voor ondernemers door heel Nederland. Hij combineert webdesign met video en marketing om bedrijven online zichtbaar te maken en klanten te werven.
- Google Search Central — Favicon in zoekresultaten — officiële documentatie over hoe Google favicons weergeeft in zoekresultaten en aan welke eisen het bestand moet voldoen.
- RealFaviconGenerator.net — gratis tool om vanuit één afbeelding een compleet favicon-pakket te genereren voor alle browsers en apparaten, inclusief de benodigde HTML-code.
- Nielsen Norman Group — Browser UI & navigatiepatronen (2023) — onderzoek naar hoe gebruikers visuele cues zoals favicons gebruiken om te navigeren tussen tabbladen en websites.
- Can I Use — SVG favicon browserondersteuning — actueel overzicht van welke browsers het SVG-formaat voor favicons ondersteunen.