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.
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.
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.
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.
#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.
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 512×512 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.