Een Wordpress favicon instellen: hoe en waar?
In Wordpress heet een favicon een Site pictogram (Site icon). Een favicon moet voor Wordpress vierkant en minimaal 512 bij 512 pixels zijn. Je kan een favicon op verschillende manieren toevoegen of wijzigen.
- Met de Customizer
- In de Site editor
Favicon aanpassen in de Customizer
- ga naar dashboard → weergave → customizer
- selecteer site-identiteit
- onder site pictogram, kies afbeelding kiezen, wijzigen of verwijderen
- publiceer je wijzigingen
Favicon aanpassen in de Site Editor
- ga naar dashboard → weergave → editor
- in de Site editor klik op je logo, dit selecteert je Header blok, klik nog een keer op je logo, en je site logo blok is geselecteerd.
- onder blok instellingen toggle 'Als site-pictogram gebruiken' aan
- sla je wijzigingen op
Is je favicon hetzelfde als je logo? Dan kan je je favicon instellen via zowel de Site Editor als de Customizer. Gebruik anders de Customizer om je favicon in te stellen.
Wat is een favicon?
Een favicon is een klein vierkant icoontje dat bij een bepaalde website hoort. Favicon staat voor 'favorite icon' en is oorspronkelijk geïntroduceerd als een Internet Explorer "favorites" feature. De meeste moderne browsers gebruiken "bookmarks" in plaats van "favorites".
Andere namen voor een favicon zijn: browser icoon, favorite icon, shortcut icoon, tab icoon, URL icoon, bookmark icoon, etc.
Waarom is een favicon belangrijk voor je website?
Hoewel een favicon maar een klein grafisch element op je website is, speelt het een belangrijke rol in de herkenbaarheid van je merk, je brand identiteit en je website. Wanneer je in je browser tabs de kleurrijke G ziet, weet je meteen dat in die tab google search open staat. De hoofdletter W met witte cirkel wijst op een Wikipedia pagina over het een of ander. En door het gele vierkant met aapje kan je je Mailchimp tab makkelijk terug vinden en verder werken aan de nieuwsbrief waar je mee bezig was.
Web browsers gebruiken je favicon voor een groot aantal toepassingen. Daarom is een herkenbaar icoon dat mensen direct met je merk, brand identiteit of bedrijf associeren een belangrijke strategie om je te onderscheiden van de massa. Met een herkenbare favicon is je website bijvoorbeeld makkelijker voor je bezoeker terug te vinden in een groot aantal browser tabs. Een favicon vergroot dus het gebruiksgemak van je bezoeker én de herkenbaarheid van je merk en website.
Waar wordt je favicon gebruikt?
Je favicon wordt op verschillende plekken in de browser gebruikt. Hoe en wanneer is afhankelijk van de browser. Een aantal voorbeelden zijn:
- browser tabs
- in je bookmarks
- in de zoekresultaten
- als shortcut
- in de browser geschiedenis
Afmetingen van een favicon
De standaard afmetingen van een favicon zijn:
- 16 x 16px
- 32 x 32px
- 48 x 48px
Maar de gewenste afmetingen verschillen sterk tussen browsers en de plek waar je favicon gebruikt wordt. Zo geeft Google op de adviespagina over favicons in de Google search resultaten de volgende afmetingen:
- 48 x 48px
- 96 x 96px
- 144 x 144px
- etc. (altijd een meervoud van 48)
Ook Apple-touch-icons voor OS safari (180 x 180px), Android Chrome voor Android (192 x 192px) en Opera Coast (228 x 228px) werken beter met een grotere favicon.
Veelgebruikte bestandsformaten voor een favicon
- ICO: het oorspronkelijke favicon bestandsformaat van Microsoft. Is uniek omdat één bestand meerdere afmetingen kan bevatten.
- PNG: veel gebruikt voor het maken van favicons. Zijn lichtgewicht, laden snel en maken ontwerpen met een transparante achtergrond mogelijk. Let op: favicon.png werkt niet met IE5 tot IE10.
- SVG: SVG bestanden zijn lichtgewicht en verliezen niet aan kwaliteit bij vergroten of verkleinen. Helaas is de browser ondersteuning van SVG favicons nog niet optimaal.
Tips om een favicon te maken
Een effectieve favicon valt op tussen andere iconen en is voor je bezoeker direct herkenbaar als onderdeel van jouw merk. Je hebt te maken met een heel klein formaat, dus hou er rekening mee dat kleine details niet te zien zijn, of je favicon onduidelijk maken.
Ontwerp:
- gebruik een element van je logo als je een complex logo hebt
- gebruik de eerste letter van je logo als je een letter logo hebt
Kleur:
- kies in het oogspringende kleuren die in je brand identity passen
- zorg voor genoeg contrast
- test je ontwerp op een witte, zwarte en grijze achtergrond, de verschillende browsertab achtergronden.
Populaire Favicon generators:
Nog wat tips wanneer je favicon eenmaal op je website staat
Nog wat tips van Google met betrekking tot je favicon.
- Let erop dat de (Google) crawlers je homepage en je favicon kunnen bereiken en niet één of allebei in robots.txt voor crawlers geblokkeerd zijn.
- De Google crawlers zoeken naar je favicon wanneer ze je homepagina indexeren.
- Wanneer je je favicon aanpast, kan je in Google Search Console een nieuw crawl verzoek indienen voor je homepagina. Na enkele dagen of langer verschijnt je nieuwe favicon in de zoekresultaten.
- Zorg voor een stabiele url (een url die niet vaak veranderd).