Favicon toevoegen aan je eigen WordPress thema

Een favicon is dat kleine symbool die men bovenaan in de adresbalk ziet. Deze kun je via een plugin op je WordPress website zetten, als je geen technische kennis hebt. Maar… Elke plugin kan veiligheidslekken veroorzaken op je WordPress website, dus het zou beter zijn om hier géén plugin voor te gebruiken. Gelukkig kun je (met een beetje technische kennis) dit heel gemakkelijk zelf instellen via je eigen WordPress theme.

Leuk, maar waarom zou je dat toevoegen aan je website?

• Het is een stukje branding; hoe vaker een bezoeker je logo (of huisstijl) ziet, des te beter ze jou en je bedrijf herinneren.
• Het ziet er netter/professioneler uit.
• Bij het zoeken van je website (o.a. opgeslagen favorieten, bladwijzers, etc.) valt het meer op en is het makkelijker voor mensen om jouw website terug te vinden.

Het is niet erg als je er geen hebt, maar het is een kleine moeite om je website net wat “extra” te geven. Dus waarom niet?

01. Favicon maken

• Maak eerst de afbeelding die wilt gaan gebruiken (in Photoshop, Illustrator of andere software).
• Het bestand dient niet groter te zijn dan 16 bij 16 pixels.
• Sla het bestand op als PNG.
• Ga vervolgens naar Favicon.cc en upload daar je PNG bestand. Deze website maakt er automatisch een .ico bestand van. .ico wordt in meer browsers weergegeven dan bijvoorbeeld een PNG of GIF bestand. Noem het bestand favicon.ico

02. Favicon instellen

Upload het favicon.ico bestand in de theme map van jouw WordPress website. Open vervolgens het header.php bestand en voeg daar de onderstaande code toe;

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

De code dien je te plaatsen tussen de en codes. Deze code zorgt ervoor dat jouw bestand zal worden gebruikt als favicon.

En voila! Dat was het al! :)

03. Nieuwe favicon wordt niet getoond

Had je website al een favicon (bijv. d.m.v. een plugin) en heb je een nieuwe geupload? Dan kan het zeker een paar dagen duren voordat je de nieuwe favicon zal zien. Dit heeft te maken met de cache. (Nieuwe) bezoekers van je website zullen echter wél gelijk de nieuwe favicon zien.