Veel blogs op het internet hebben een favicon. Dat is een klein plaatje waaraan je een blog kunt herkennen op je tabblad. Favicon staat voor favourite icon, favorieten icoontje. Mijn blog heeft bijvoorbeeld een klein paars klavertje vier als favicon. Dit is ontworpen door Irene van Putten (alias: @pixelprinses). Bij Mozilla FireFox en Internet Explorer vind je dit favicon in de adresbalk; bij Google Chrome vind je dit icoontje op de tabbladen. Persoonlijk vind ik dit laatste handiger, omdat je dan makkelijker een website kan terugvinden als je heel veel tabs hebt openstaan.
Hoe voeg je een favicon toe aan je weblog?
Let op! Als je niet zo handig bent in het werken met code, probeer dit dan niet alleen, maar zorg dat er iemand is die eventueel met je mee kan kijken of het voor je kan doen om de aanpassingen te maken. Je hoster zou dit waarschijnlijk ook wel voor je kunnen doen als je het zelf niet aandurft.
- Als eerste heb je een plaatje nodig van 16 bij 16 pixels. Je kunt daarvoor een klein stukje van je header nemen of je header verkleinen. Zorg wel dat het zichtbaar blijft wat voor plaatje het is. Denk bijvoorbeeld aan de W van WordPress die bij een wordpress.com blog als favicon is ingesteld.
- Je kunt je plaatje maken met een favicon generator als je niet zo creatief bent, bijvoorbeeld.
- Als je je plaatje hebt, kun je dit uploaden naar je website via FTP. Er zijn verschillende FTP programma’s die je daarvoor kunt gebruiken. Zelf gebruik ik FileZilla (geen affiliatie ;-)).
- Hernoem je plaatje naar favicon.ico. Upload je favicon in de volgende map: /domains/naam_website/public_html/wp-content/themes/naam_thema
- Upload je favicon ook in de map /domains/naam_website. Op die manier komt je favicon ook terecht in RSS-lezers.
Nu heb je je favicon geüpload, maar hij staat nog niet op je blog. Daarvoor moet je nog een aantal stappen doorlopen. Nu wordt het wel iets technischer omdat je in de code van je website moet gaan werken.
- Klik in je WordPress administratie panel op Weergave en vervolgens op Bewerker.
- Klik aan de linkerkant op Header of header.php.
- Zoek de regel die begint met: <link rel="shortcut icon" en eindigt met: /favicon.ico" />
- Vervang deze regel, of voeg hem toe als bovenstaande regel er nog niet is, door onderstaande code. Vervang de aanhalingstekens door rechte aanhalingstekens, anders doet hij het niet.
- Sla de wijzigingen op.
- Ververs je browser. Je zou nu je favicon moeten zien in je browser.
<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />
Dit hele stappenplan kun je terugvinden in het Engels in de hulpgids van WordPress.
