Op bijna elke site zie je het tegenwoordig: een kleine afbeelding voor de website in de URL balk. Deze kleine afbeelding heet een favicon (kort voor “favorites icon”) en was oorspronkelijk bedoeld voor gebruik wanneer een website aan de favorieten werd toegevoegd. Tegenwoordig zien we de afbeelding echter overal; in de URL balk, op tabbladen, etc.
Meestal is een favicon een afbeelding van 16 x 16 pixels, opgeslagen in het .ico formaat. Het is ook mogelijk om een favicon in .PNG of .GIF formaat te gebruiken (nodig voor een transparante achtergrond). Het nadeel daarvan is wel dat browsers standaard werken met een .ico bestand en een foutmelding (niet zichtbaar voor de bezoeker) kunnen geven als deze niet gevonden wordt. Ook ondersteund niet elke browserversie een favicon die afwijkt van het .ico formaat.
Tegenwoordig bestaat ook de mogelijkheid om een grotere favicon toe te voegen (32×32) voor de hogere resolutie schermen, voornamelijk mobieltjes, die in omloop zijn.
Creëren van een favicon
Je kunt zelf een favicon maken door middel van een beeldbewerkingsprogramma, bijvoorbeeld GIMP, dat het .ico bestand ondersteund. Ook zijn er websites die je kunnen helpen met het omzetten van een afbeelding in .ico formaat, zoals faviconer.
Wanneer je zelf de favicon wilt maken, dan zijn er een aantal dingen waar je rekening mee moet houden:
- Allereerst dient de favicon vierkant te zijn. Let er dus op dat sommige afbeeldingen moeten worden bijgesneden om hieraan te voldoen.
- De afbeelding moet worden verkleind tot 16 x 16 pixels.
- De afbeelding moet worden opgeslagen als “favicon.ico”.
Als je een favicon maakt via een website, dan moet je de gegeven uitleg op de website volgen. Vervolgens kan je dan een favicon.ico afbeelding downloaden en opslaan op je computer.
Instellen van een favicon
De gecreëerde favicon dient via FTP op de server van de website te worden geplaatst. De favicon moet op twee plekken worden neergezet:
- In de hoofdmap van het huidige thema dat actief is op de website (standaard is dit wp-content/themes/). Indien er al een standaard favicon in deze map staat, dan kan je deze overschrijven of hernoemen.
- In de hoofdmap van de website (standaard wordt dit dan www.jesite.nl/favicon.ico).
Om vervolgens de favicon in elke browser zichtbaar te krijgen, moet het header.php bestand nog aangepast worden. Het handigste is om eerst een kindthema te creëren en daar de aanpassingen in te doen (het kan ook direct in het huidige thema, de instructies verschillen daar niet van). De handelingen hiervoor zijn als volgt:
- Ga naar het WordPress dashboard en kies voor het onderdeel “Weergave”.
- Kies vervolgens voor “Bewerker” en zoek naar de template genaamd “Header” of “header.php” en klik die aan.
- Zoek naar de regel <link rel=”shortcut icon” die eindigt in /favicon.ico”/>. Als deze regel bestaat, overschrijf hem dan met de volgende code:
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
Bestaat de regel niet, dan moet je bovengenoemde code onder de <head> tag toevoegen.
- Sla het gewijzigde bestand op en de favicon zal nu staan ingesteld.
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.
Favicon met transparante achtergrond
Zoals eerder vermeld is het mogelijk om een favicon een transparante achtergrond te geven. Hiervoor moet je een .PNG of .GIF afbeelding aanmaken, die een transparante achtergrond bevat, maar die ook voldoet aan de gestelde favicon eisen (zie de 3 punten onder “Creëren van een favicon”). De stappen om deze favicon in te stellen op de site zijn hetzelfde als die hierboven beschreven staan. Het enige verschil is dat er in de code nu moet worden verwezen naar favicon.png in plaats van favicon.ico. De regel code zal er dus als volgt uit zien:
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />