Je hebt ze vast al eens gezien. Favicons, de kleine icoontjes naast de website naam bovenin je adresbalk. Het helpt bezoekers je website eenvoudig te herkennen wanneer er bijvoorbeeld meerdere tabbladen open staan. Het vergroot de herkenbaarheid van je merk en bevordert het vertrouwen bij je doelgroep. Een van de meest gemaakte website fouten is naar mijn mening het niet toevoegen van een favicon. Nochtans is het heel eenvoudig.

In dit artikel laat ik je zien hoe je een favicon kan toevoegen aan je eigen WordPess website.

Wat is een favicon?

Een favicon (“favoriete icoon”), is een klein icoon dat linksboven op het tabblad bovenin je browser wordt weergegeven. Web browsers tonen het naast een webpagina’s titel op een browser tabblad of links naast de URL in de adresbalk.

Favicons zijn oorspronkelijk ontworpen om favoriete bladwijzers in de webbrowser transparanter te maken. Het favicon-bestand wordt geplaatst in de hoofdmap van jouw website. Het aanbevolen formaat van een favicon is tegenwoordig 512×512 pixels. Dit komt omdat het ook als site icon gebruikt wordt op smartphones. Let hier dus goed op bij het maken van je eigen favicon.

Oorspronkelijk waren favicons altijd 16×16 pixels en werd het opgeslagen als een .ico bestand.

Ondertussen ondersteunen alle browsers favicons met een andere extensie. Alleen de hele oude Internet Explorer versies, die bijna niet meer gebruikt worden, herkennen deze nieuwe favicons niet.

Ben je niet zeker of jouw website een favicon heeft? Er zijn allerlei online tools waarmee je kan checken of er een favicon aanwezig is of niet. Een voorbeeld van zo’n favicon checker kan je vinden op https://realfavicongenerator.net.

Hoe maak je een favicon?

Je kan zelf een favicon maken met een beeldverwerkingsprogramma, zoals bv. Photoshop of GIMP. Zorg ervoor dat je afbeelding vierkant is en baseer het bv. op je logo. De beste afmeting is 512×512 pixels. Op alle locaties waar de afbeelding dan wordt weergegeven heeft hij dan het juiste formaat.

Kies bij voorkeur voor een transparante achtergrond. De afbeelding wordt dan het mooiste weergegeven. Als je gebruik maakt van een transparante achtergrond dan moet je de afbeelding als favicon.png opslaan.

In plaats van zelf een favicon te maken, kan je ook online favicon generators gebruiken. Ze zetten een geüploade afbeelding om in een miniatuur pictogram in het juiste formaat. Voorbeelden zijn:

favicon-generator.org
favicomatic.com
realfavicongenerator.net

Hoe een favicon toevoegen aan je WordPress website?

Nu je een logo of icoontje hebt gemaakt met een transparante achtergrond, kun je deze gaan uploaden naar WordPress.  WordPress heeft na haar update naar WordPress 4.3 het toevoegen van een favicon gemakkelijker gemaakt. Via de WordPress Customizer kan je een favicon toevoegen. Dit is de eenvoudigste en aanbevolen manier.

In sommige gevallen kan het zo zijn dat je WordPress-thema óók functionaliteit heeft voor favicons. Mocht dit het geval zijn, dan kun je je favicon meestal uploaden onder het “Theme Options”-menu van je WordPress-thema.

Een andere optie die je kunt uitproberen, is om een plugin te installeren, zoals de plugin Favicon by RealFaviconGenerator. Toch is dit eigenlijk niet nodig, zeker nu WordPress de functionaliteit aan de Customizer heeft toegevoegd.

#1 Via WordPress Customizer (aanbevolen)

De WordPress Customizer open je door in het admin-dashboard van WordPress naar Weergave > Customizer te gaan.

Zodra je in de WordPress Customizer zit, klik je op Site-identiteit. Hier kun je de titel en ondertitel van je website aanpassen én een favicon uploaden. Klik op Afbeelding selecteren en upload vervolgens de favicon die je hebt gemaakt (zie afbeelding linksonder).

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.

Klik vervolgens bovenaan op de blauwe knop Publiceren om het favicon op te slaan (zie afbeelding rechtsonder).

#2 Via een plugin

Je kan ook altijd een plugin gebruiken om een favicon toe te voegen. Een plugin die ik zelf aanraad is Favicon by RealfaviconGenerator.

Deze plugin zorgt ervoor dat jouw favicon compatibel is met alle browser door het plaatsen van meerdere afbeeldingen in de juiste locaties.

Eerst en vooral moet je de plugin installeren. Vervolgens ga je naar Weergave > Favicon en upload je je afbeelding.  De plugin stuurt je naar de online generator waar je je favicon kan aanpassen voor de verschillende browsers. Na het genereren van de favicons en de code wordt je teruggestuurd naar je website en krijg je een preview van de favicons. Over code hoef je je geen zorgen te maken, dat wordt allemaal voor je geregeld!

#3 Via FTP (WordPress 4.2 en ouder)

In oudere versies van WordPress zal je je favicon manueel moeten uploaden.  Dit kan via een FTP client zoals FileZilla. Volg hiervoor 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.be/favicon.ico.
• Log in op je WordPress Dashboard.
• Ga naar Weergave > Bewerker en zoek naar het header.php bestand (zorg ervoor dat je werkt met een child theme zodat je aanpassingen niet worden overschreven bij een update).
• 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.

Zoals je ziet, vereist deze werkwijze toch al enige technische kennis. Als je je hierbij niet comfortabel voelt, vraag dan aan je webdesigner om je te helpen. Waarschijnlijk zal hij je voorstellen om te updaten naar de laatste versie van WordPress, dit lost bovenstaand probleem op en zorgt er voor dat je website veilig en up-to-date is!

Conclusie

De belangrijkste zaken die je dient te onthouden over het toevoegen van een favicon aan je WordPress website zijn de volgende:

• Maak je favicon minimum 512x512 pixels, vierkant en liefst met een transparante achtergrond.
• Gebruik bij voorkeur de WordPress Customizer om je favicon toe te voegen.
• Als je zeker wil zijn dat je favicon op alle juiste locaties is geplaatst en als je wat extra controle wil over de verschillende vertoningen van je favicon, gebruik dan een plugin zoals de realfavicongenerator plugin.

Wanneer je de pagina bezoekt en de nieuwe favicon niet te zien is, probeer dan eens een “hard refresh” (Ctrl + F5). De favicon wordt namelijk vaak gecached door de browser en kan daarom nog de oude afbeelding weergeven.

Nog vragen?

Ik hoop dat bovenstaande uitleg wat meer duidelijkheid schept over waarom en hoe je een favicon toevoegt aan je WordPress website.