Hoe kan ik een favicon instellen op een WordPress website?

Het kleine logo dat je bij veel websites in het tabblad weergeven wordt, noemen we ook wel een favicon. Dit icoontje wordt snel over het hoofd gezien, maar is zeker wel van belang voor herkenbaarheid en betrouwbaarheid. In dit blog lees je hoe je dit kan instellen in jouw WordPress omgeving. En waar je op moet letten bij het maken van een favicon.

Favicons worden getoond naast de titel van een website en zorgen ervoor dat de website visueel onderscheidend is ten opzichte van andere sites. Omdat het zo’n klein logo is (minimaal 16×16 pixels), wordt het soms vergeten om toe te voegen. Dat is zonde, want met een goed ontworpen favicon kan jouw website net dat beetje extra uitstraling krijgen ten opzichte van andere websites. Wat betreft personalisatie, branding en professionaliteit valt een website met een favicon net iets meer op.

Mensen die informatie op internet zoeken, doen dit bij veel verschillende websites. Hierdoor hebben mensen vaak veel tabbladen open staan in hun browser. Het kan dan voorkomen dat jouw website verdwijnt in een brei aan tabbladen. Dit is the moment to shine voor jouw favicon. Waar een groot deel van de websites wordt weggezet met het standaard icoon van een tabblad (zoals een grijze wereldbol), springt jouw website er uit met een opvallende favicon. Dit maakt het de gebruiker makkelijker om naar jouw website terug te keren.

Op smartphones heb je de mogelijkheid om een shortcut/snelkoppeling naar een website op je homescreen te plaatsen. Dit is handig voor de websites die je dagelijks bezoekt. Je kan deze dan gemakkelijk met één klik bereiken. Deze shortcut krijgt automatisch de favicon als app-icoon. Tussen de vele apps die op het startscherm kunnen staan, kan jouw website dus goed opvallen met een mooie favicon.

Bij het zoeken naar informatie krijg je in Google al snel duizenden resultaten en dus ook duizenden websites te zien. Naast de zoekresultaten worden ook de favicons van de websites weergegeven. Een goed ontworpen favicon zorgt in deze lijst voor extra herkenbaarheid. Wanneer bezoekers jouw logo herkennen, versterkt dit het vertrouwen in jouw merk. Hierdoor kiezen ze waarschijnlijk sneller voor jouw website in de zoekresultaten.

Nu je het belang van een goed logo in het tabblad kent, kun je de favicon eenvoudig instellen in de WordPress-omgeving. Sinds versie 4.3 heeft WordPress het heel gemakkelijk gemaakt om een favicon toe te voegen aan je website.

1. Ga naar de WordPress admin.
2. Klik onder ‘Weergave’ op ‘Customizer’.
3. Klik in het geopende scherm op ‘Site-identiteit’;
4. Hier kun je, naast het logo, de site titel en de slogan, ook het site icoon (favicon) toevoegen;
5. Vergeet niet de wijzigingen daarna op te slaan.
   
   

Omdat het icoon vaak erg klein wordt weergeven, is het verstandig om voor een eenvoudig en duidelijk logo te kiezen. Zorg ervoor dat de favicon in lijn ligt met de huisstijl van jouw merk of website. Zodat het duidelijk te zien is dat dit bij elkaar hoort. Details in je favicon zijn vaak moeilijk te zien en maken de favicon daardoor rommelig en onduidelijk. Als je een gedetaileerde logo hebt, kan je overwegen een versimpelde versie van te maken en deze te gebruiken als favicon.

Het is belangrijk dat de afbeelding vierkant is. Daarnaast wordt aangeraden om een icoon van 512×512 pixels te gebruiken. Dit is zodat het logo ook als app-icoon op smartphones scherp wordt weergeven.

Vroeger moest een favicon altijd het bestandstype .ico hebben. Dit was de manier om aan browsers te laten weten welk bestand ze als favicon moesten gebruiken. Tegenwoordig kan een PNG of JPG ook gebruikt worden. Daarnaast ondersteunen monderne browsers tegenwoordig ook SVG.

Dit bestandsformaat wordt nog steeds door elke browser herkend, maar is tegenwoordig minder gangbaar. Veel software waarmee logo’s worden gemaakt kunnen niet standaard naar dit bestandsformaat exporteren. Wij raden daarom af om dit bestandstype te gebruiken.

JPG is een standaard afbeeldingformaat dat door vrijwel alle software wordt ondersteund. Het nadeel van JPG is echter dat de achtergrond niet transparant is. Je icoon staat dus altijd op bijvoorbeeld een wit of zwart vlak. Als de kleur van dit vlak verschilt van de kleur van de browser zie je jouw icoon daarom altijd in een vierkant staan. Dit oogt minder professioneel.

Dit bestandstype kan wel een transparante achtergrond hebben. Dit ziet er vaak mooi uit, maar let erop dat de kleur van de browser en het icoon voldoende contrast hebben, zodat het icoon goed zichtbaar blijft. Om op veilig te spelen, moet het icoon niet te licht of te donker zijn.

Dit bestandtype is een stuk nieuwer dan de rest. Het nadeel is dat dit formaat door oudere browsers niet wordt ondersteund. Een groot voordeel is dat een SVG uit lijnen (vectoren) bestaat en niet uit pixels. Het icoon kan daarom nooit onscherp worden, hoe groot het ook getoond wordt. Perfect dus voor beeldschermen of smartphones met een hoge resolutie.

Je hebt een mooi icoon in het juiste bestandstype ingesteld, maar je ziet het resultaat nog niet online terug. Dit is een probleem dat vaker voorkomt. Dit kan gebeuren omdat Google je website heeft bezocht voordat je de nieuwe favicon had ingesteld. Geen zorgen, dit probleem lost zichzelf op zodra Google je website opnieuw heeft bekeken en de nieuwe favicon heeft opgemerkt.

Nu jouw favicon is ingesteld heb je een streepje voor op de websites die dit niet hebben. Wil je hulp bij het ontwerpen van een goed logo om als favicon te gebruiken? Neem dan vrijblijvend contact met ons op.