Een favicon is het kleine icoontje dat je ziet in het tabblad van je browser, naast de titel van je website. Het zorgt voor herkenbaarheid en professionaliteit, en verschijnt ook in bladwijzers, mobiele browsers en bij het opslaan van snelkoppelingen.
In deze handleiding leggen we stap voor stap uit hoe je een favicon toevoegt aan je WordPress website, op de meest betrouwbare manier. Zo weet je zeker dat je favicon correct wordt weergegeven in alle moderne browsers en apparaten.
Wat is een favicon?
Een favicon (afkorting van “favorite icon”) is een klein beeldbestand dat gelinkt wordt aan jouw website. Het wordt zichtbaar in browser-tabbladen, in de bladwijzerbalk en op mobiel wanneer iemand jouw website toevoegt aan het startscherm.
Wat is de beste bestandsindeling voor een favicon?
Hoewel SVG-bestanden modern en schaalbaar zijn, worden deze niet betrouwbaar ondersteund door alle browsers, zoals Google Chrome op desktop. Daarom raden we aan om een PNG-bestand te gebruiken.
Aanbevolen bestandstype en afmetingen
| Bestandstype | Aanbevolen | Waarom |
|---|---|---|
| .png | Ja | Breed ondersteund, werkt perfect in WordPress |
| .ico | Ja (optioneel) | Extra fallback voor oudere browsers |
| .svg | Nee | Niet consistent ondersteund in Chrome |
- Afmeting: 512 x 512 pixels (vierkant)
- Bestandsformaat: .png (hoofdkeuze), optioneel .ico
Je kunt je favicon aanmaken of omzetten met tools zoals favicon.io of Canva.
Stap 1: Favicon toevoegen via de WordPress Customizer
- Log in op je WordPress website via
jouwdomein.be/wp-admin - Ga in het linker menu naar Weergave > Customizer
- Klik op Site-identiteit
- Scroll naar beneden naar Sitepictogram
- Klik op Afbeelding selecteren
- Upload je favicon (PNG van 512×512 pixels)
- Klik op Selecteren
- Klik op Publiceren om de wijzigingen op te slaan
Je favicon wordt nu automatisch gebruikt als browsericoon, mobiel icoon en in andere toepassingen waar een pictogram nodig is.
Stap 2: Test of je favicon zichtbaar is
Na het uploaden kan het zijn dat je browser de oude versie in de cache houdt. Controleer daarom het volgende:
- Herlaad je website met
Ctrl + F5(Windows) ofCmd + Shift + R(Mac) - Open je website in een incognito venster
- Bekijk je website in meerdere browsers: Chrome, Firefox, Safari, Edge
- Test ook op mobiel
Als je caching-plugins zoals WP Rocket of LiteSpeed Cache gebruikt, vergeet dan niet de cache te legen via het dashboard van die plugin.
(Optioneel) Extra stap: favicon.ico toevoegen voor maximale compatibiliteit
Voor maximale compatibiliteit, vooral in oudere browsers, kun je een .ico bestand toevoegen aan de rootmap van je WordPress website.
Zo doe je dat:
- Ga naar https://realfavicongenerator.net/
- Upload je favicon-afbeelding en laat de tool een
favicon.icobestand genereren - Download het gegenereerde
.icobestand - Upload dit bestand via FTP of via het bestandsbeheer van je hosting naar de rootmap van je website (waar ook bestanden zoals
wp-config.phpstaan)
Browsers die geen ondersteuning bieden voor het favicon via WordPress zullen dan automatisch het favicon.ico bestand gebruiken.
Samenvatting
Wil je dat je favicon op een betrouwbare manier overal zichtbaar is? Volg dan dit stappenplan:
- Maak een PNG-bestand van 512×512 pixels aan
- Voeg dit toe via Weergave > Customizer > Site-identiteit > Sitepictogram
- Publiceer de wijzigingen
- Test in verschillende browsers en apparaten
- Voeg eventueel een
favicon.icobestand toe aan de root van je site voor oudere browsers
Veelgestelde vragen
Waarom zie ik mijn nieuwe favicon niet meteen?
De meeste browsers cachen je favicon. Dit betekent dat je de oude versie nog kunt zien, ook al heb je de nieuwe geüpload. Probeer de pagina te vernieuwen met een harde refresh (Ctrl + F5 of incognito modus) of wacht enkele uren.
Kan ik een SVG gebruiken als favicon?
Hoewel SVG technisch mogelijk is, wordt dit niet overal goed ondersteund. Google Chrome toont SVG-bestanden niet altijd als favicon, en er kunnen cachingproblemen optreden. Gebruik daarom bij voorkeur altijd een PNG of ICO.
Moet ik echt een .ico toevoegen?
Nee, maar het is aan te raden als je maximale compatibiliteit wilt, vooral voor oudere browsers of specifieke devices die geen moderne PNG-implementatie ondersteunen.
Met deze aanpak zorg je ervoor dat je favicon altijd goed wordt weergegeven, ongeacht browser of apparaat. Zo versterk je jouw online merkidentiteit en bied je een professionele gebruikerservaring.
Heb je vragen of wil je ondersteuning bij het instellen van je favicon? Laat het ons weten!
