Hoe maak je een favicon voor je WordPress website?

De favicon is dat kleine icoontje dat naast de titel van je website in de browser verschijnt. Het helpt je bezoekers om je website te identificeren. Dit vergroot de herkenbaarheid van je merk en bevordert het vertrouwen bij je doelgroep. In ons artikel over de meest veelgemaakte WordPress fouten hadden we het al over het niet aanpassen van de standaard WordPress favicon. In dit artikel leggen we uit hoe jij je eigen custom favicon maakt voor je website!

favicon toevoegen aan je website

Je eigen favicon maken

Wil je je eigen favicon maken, dan kun je dit doen met behulp van een beeldbewerkingsprogramma zoals Adobe Photoshop of GIMP. Je bent natuurlijk helemaal vrij in hoe je de favicon wil opmaken. Hou wel rekening met de onderstaande richtlijnen:

De favicon moet vierkant zijn

Wil je bijvoorbeeld een favicon van je logo maken, hou er dan rekening mee dat de afbeelding mogelijk bijgesneden moet worden.

De afbeelding moet worden verkleind tot 16 x 16 pixels.

De meeste favicons zijn 16 x 16 pixels. Tegenwoordig zien we echter ook steeds meer grote favicons van 32 x 32 pixels; deze zijn beter geschikt voor de schermen met hogere resoluties.

De afbeelding moet worden opgeslagen als “favicon.ico”.

Het is ook mogelijk om een .png of .gif bestand te gebruiken. Dit heeft echter wel een nadeel: niet alle browsers ondersteunen favicons die afwijken van het .ico bestandsformaat.

Als je geen geschikte software programma’s hebt of hier niet mee om kunt gaan, is het ook mogelijk om een bestaande afbeelding om te zetten in een .ico bestandsformaat. Er zijn verschillende websites waarop je dit kunt doen, zoals bijvoorbeeld www.faviconer.com. Je kunt het .ico bestand vervolgens naar je computer downloaden.

TIP: Omdat het echt maar een heel klein plaatje is, raden we aan om je favicon zo simpel mogelijk te houden. Denk bijvoorbeeld aan alleen de eerste letter van je logo. Om wat inspiratie op te doen kun je kijken naar de favicons van bekende websites, zoals Pinterest en Facebook.

Je favicon instellen

Goed, je hebt nu een custom favicon. Nu is het tijd om die in te stellen! In WordPress maak je waarschijnlijk bijna altijd gebruik van de Media Library om je bestanden up te loaden. Maar als je een favicon wil instellen, dan werkt dat niet. Je moet je favicon dus handmatig uploaden via een FTP client zoals FileZilla. Volg de onderstaande stappen:

  • Log in op je FTP client.
  • Zoek op de server naar de hoofdmap van je actieve WordPress thema (meestal is dit wp-content/themes/). Vervang de favicon die er al staat door jouw custom favicon.
  • Zet de favicon vervolgens ook in de root directory (hoofdmap) van je website. De URL wordt dan jouwwebsite.nl/favicon.ico.
  • Log in op je WordPress Dashboard.
  • Ga naar Weergave > Bewerker en zoek naar het header.php bestand.
  • Zoek de regel <link rel=”shortcut icon”, eindigend in /favicon.ico”/>
  • Zet in plaats van deze regel de volgende code:

<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

(Als de regel niet bestaat, dan moet je het stukje code in de <head> tag zetten).

  • Sla het bestand op.
  • Test bij een aantal verschillende browsers uit of de favicon nu te zien is. Zie je hem niet? Probeer dan een harde refresh; de favicon is één van de dingetjes die door browsers worden gecached, waardoor het mogelijk is dat ze de oude afbeelding blijven weergeven. Een harde refresh zou dat moeten oplossen.