Een favicon is het kleine icoontje dat naast je paginatitel in het browsertabblad verschijnt, in bladwijzers en soms in zoekresultaten. Zonder favicon toont de browser een standaard leeg icoontje, wat je website er minder professioneel laat uitzien. Je stelt een favicon in door een afbeelding in het juiste formaat te maken, deze te uploaden naar je website en te koppelen via een regel in de HTML-code of via je CMS.
Wat is een favicon precies?
De naam favicon komt van “favorite icon”. Browsers gebruiken dit icoontje om tabbladen, bookmarks en de geschiedenis visueel herkenbaar te maken. Het staat los van je logo op de website zelf, maar wordt er vaak wel op gebaseerd. Een duidelijke favicon zorgt ervoor dat bezoekers je site sneller terugvinden tussen meerdere open tabbladen.
Van afbeelding naar favicon in het browsertabblad
Favicon maken: welk formaat gebruik je?
Voor een favicon die overal goed werkt, houd je het volgende aan:
- Bestandsformaat: .ico is het meest universeel, maar moderne browsers ondersteunen ook .png en .svg.
- Afmetingen: maak een vierkante afbeelding, bijvoorbeeld 32×32 of 180×180 pixels. Veel sites gebruiken meerdere formaten voor verschillende apparaten.
- Eenvoud: kies een simpel beeldmerk of letter, want op zo’n klein formaat gaat detail verloren.
- Achtergrond: gebruik een transparante achtergrond (PNG) zodat het icoontje past bij elke browserstijl, tenzij je bewust een gekleurd vlak wilt.
Er bestaan gratis online tools waarmee je een gewone afbeelding automatisch omzet naar een .ico-bestand in meerdere formaten.
Favicon instellen via HTML
Heb je een eigen website zonder CMS, of wil je de favicon handmatig koppelen? Dan upload je het bestand naar de hoofdmap van je website via FTP of de bestandsbeheerder in Plesk, en voeg je een regel toe in de <head> van je HTML.
Maak de favicon
Maak je icoon in de juiste afmetingen en sla het op als favicon.ico of favicon.png.
Upload het bestand
Plaats het bestand in de hoofdmap (root) van je website, bijvoorbeeld via FTP of de bestandsbeheerder in Plesk.
Koppel het in de HTML
Voeg in de <head> van elke pagina een regel toe, bijvoorbeeld: <link rel="icon" href="/favicon.ico">. Gebruik je een PNG, voeg dan ook het type toe: <link rel="icon" type="image/png" href="/favicon.png">.
Controleer het resultaat
Laad de pagina opnieuw en controleer het tabblad. Werkt het niet direct, leeg dan je browsercache.
Favicon instellen in WordPress
Gebruik je WordPress, dan hoef je geen code aan te passen. Dit werkt via het onderdeel “Site-icoon” in de instellingen.
Ga naar Uiterlijk → Aanpassen
Open het WordPress-dashboard en kies Uiterlijk, daarna Aanpassen (of Site-identiteit, afhankelijk van je thema).
Upload het site-icoon
Zoek de optie “Site-icoon” en upload een vierkante afbeelding, minimaal 512×512 pixels. WordPress schaalt deze automatisch naar de juiste formaten.
Publiceer de wijziging
Sla de instelling op en publiceer. WordPress voegt zelf de juiste code toe aan je paginas.
Werk je met een pagebuilder of thema dat een eigen favicon-optie heeft, gebruik dan die instelling in plaats van de standaard WordPress-optie, zodat er geen twee favicons met elkaar botsen.
Beheer je meerdere websites en wil je favicons en andere bestanden overzichtelijk uploaden, dan is het handig om te weten waar je bestandsbeheer vindt binnen je webhosting-pakket. Bij vragen over het uploaden van bestanden helpt de kennisbank je verder.
Veelgestelde vragen
Mijn favicon verandert niet, wat nu?
Dit komt meestal door browsercache. Leeg de cache van je browser of open de site in een incognitovenster. Controleer ook of het bestand daadwerkelijk is geüpload naar de juiste map.
Welk formaat is het beste voor een favicon?
Een PNG met transparante achtergrond in minimaal 32×32 pixels werkt in de meeste browsers goed. Voor mobiele apparaten en bookmarks is een grotere versie, zoals 180×180 pixels, aan te raden.
Heb ik een favicon nodig voor meerdere apparaten?
Ja, idealiter lever je meerdere formaten aan voor desktop, mobiel en bookmarks. De meeste moderne CMS-systemen en online favicon-generators regelen dit automatisch voor je.
Kan ik een favicon gebruiken zonder eigen website te bouwen in HTML?
Ja, in CMS-systemen zoals WordPress stel je dit in via de instellingen zonder dat je code hoeft aan te passen.
Conclusie
Een favicon instellen is een kleine aanpassing met groot effect op de uitstraling van je website. Maak een vierkante afbeelding in het juiste formaat, upload deze naar je website en koppel het via HTML of de instellingen van je CMS. Werkt het niet direct, controleer dan eerst je browsercache.