Een favicon is een kleine afbeelding naast de website titel in een browser.
Het helpt bezoekers je website eenvoudig te herkennen wanneer er bijvoorbeeld meerdere tabbladen open staan.
Dit is ook de reden dat alle grote websites tegenwoordig een favicon hebben. Het is goed voor herkenning en de website usability.
Daarnaast wordt een favicon tegenwoordig ook gebruikt als site icoon op smartphones, wanneer iemand je website als sneltoets op zijn of haar startscherm wilt hebben staan.
Een van de meest gemaakte WordPress fout is naar mijn mening het niet toevoegen van een favicon. In dit artikel laat ik je daarom zien hoe je een favicon aan je WordPress website kunt toevoegen.
Inhoudsopgave: WordPress favicon instellen
Favicon is ook zichtbaar in de zoekresultaten
Heb je al gezien dat er soms een icoon voor de website URL in de zoekresultaten te zien is? In de mobiele zoekresultaten is het al een tijd zichtbaar en het ziet er als volgt uit.
Sinds januari 2020 is het ook uitgerold voor de desktop zoekresultaten. Je hebt dus geen excuus meer om geen favicon te gebruiken op je website. Laten we er snel voor zorgen dat jij weet hoe je een favicon kunt instellen op je WordPress-website.
Video uitleg: Favicon instellen op je website
In onderstaande video kun je bekijken hoe je een favicon aan je WordPress website kunt toevoegen.
Lees hieronder verder indien je meer informatie wilt hebben of liever de uitleg in tekst leest.
Hoe maak je een Favicon?
Een favicon kun je maken met een programma als Adobe Photoshop, maar ook iets simpels als Microsoft Paint.
Vaak is een favicon het logo van de website of iets anders waarmee een website eenvoudig te herkennen is. Bekijk dus bij je eigen website of je het logo als favicon wilt gebruiken of iets anders, zolang het maar herkenbaar is dat het om jouw website gaat.
Het aanbevolen formaat van een favicon is tegenwoordig 512×512 pixels. Dit komt omdat het ook als site icoon gebruikt wordt op smartphones. Let hier dus goed op bij het maken van je eigen favicon.
Wanneer je eenmaal je favicon hebt gemaakt kun je het opslaan in png, jpg of gif formaat.
Vroeger ging het toch anders?
Klopt, oorspronkelijk waren favicons altijd 16×16 pixels en werd het opgeslagen als een .ico bestand.
Ondertussen ondersteunen alle browsers favicons met een andere extensie (jpg, png, etc.). Alleen de hele oude Internet Explorer versies, die mag ik hopen niet meer gebruikt worden, herkennen deze nieuwe favicons niet.
Favicon instellen op je WordPress website
Sinds WordPress 4.3 kun je een favicon of site icoon toevoegen via het WordPress beheerdersgedeelte.
Je kunt dit doen door naar Weergave → Customizer te gaan. Klik vervolgens op het tabblad Site-identiteit.
Je komt nu bij het gedeelte in WordPress waar je de mogelijkheid hebt om een favicon te uploaden. Klik op “Afbeelding selecteren” om de favicon die je wilt gebruiken te uploaden.
Indien je afbeelding het juiste formaat bevat zal er niks gebeuren en kun je het gewoon opslaan. Wanneer je afbeelding te groot is zal je het kunnen bijsnijden.
In de preview zie je als het goed is nu al meteen de favicon verschijnen bovenaan in het tabblad van je browser.
Zoals je ziet maak ik gebruik van een favicon met een transparante achtergrond. WordPress zelf gaat hier niet altijd goed mee om, maar alle browsers en site iconen op smartphones geven het wel goed weer.
Het enige wat je nu nog hoeft te doen is op “Opslaan & publiceren” te klikken.
WordPress favicon instellen via FTP
Een andere methode die je kunt gebruiken is om handmatig de favicon aan je website toe te voegen.
Upload je favicon in de rootfolder van je website met behulp van FTP. Nadat je dit gedaan hebt moet je de onderstaande code tussen <head> en </head> plaatsen in het header.php bestand van je WordPress thema. Let op, je moet natuurlijk wel webtalis.nl vervangen voor je eigen domeinnaam en het bestandsnaam goed noemen
<link title="Favicon" href="https://webtalis.nl/favicon.png" rel="shortcut icon" />
Gefeliciteerd, je website kan nu ook eenvoudig herkend worden in de tabbladen van je bezoekers dankzij je favicon.
Veelgestelde vragen over favicons in WordPress
Het kan weleens voorkomen dat je een favicon hebt ingesteld op je WordPress-website, maar dat het niet getoond wordt. Je hebt dan te maken met een conflict. Vermoedelijk staat er een code in de head sectie van je website die dit probleem veroorzaakt. Dit kan in je thema zitten of door een plugin erin gekomen zijn. Je zou dus kunnen testen door plugins uit te schakelen of het dan wel zichtbaar wordt.
Een favicon en site icoon zorgen er allebei voor dat je in de browserbalk een website eenvoudig kan herkennen. Het voordeel van een site icoon in WordPress is echter dat deze een stuk groter is (512×512 pixels). Dit kan daarom ook perfect gebruikt worden als een bezoeker van je website je site toevoegt op een smartphone. Het originele favicon formaat van 16×16 pixels is hier te klein voor.
In theorie wel als je een favicon in de code toevoegt per pagina. Het is echter niet aan te raden. Je wil juist met een favicon zorgen voor herkenning. Het schiet dus niet op om op diverse pagina’s een andere favicon te gebruiken, want dan is het voor je bezoekers alleen maar onduidelijk.
