Een favicon (ook wel urlicon of pagina-icoon) is een icoon dat links naast de pagetitle in de browser wordt getoond. Door een favicon goed in te zetten, herkent de gebruiker het logo van jouw website in de browser. Gebruikers kunnen hiermee in één oogopslag jouw website terugvinden tussen de rest van de tabbladen. Een discussie die vaak tussen designers en developers ontstaat is de uitspraak. Is het favicon of fav-icon? Fav-icon is correct. Het is namelijk een afkorting van Favorite Icon.
Tips voor een goede favicon
Er zijn tegenwoordig honderden dan niet duizenden thema’s voor browsers. Of denk aan de dark-mode van Apple. Deze veranderen de kleur van jouw browservenster. Zo ook in de privémodus van onder andere Chrome. Het venster van jouw browser is dan niet wit meer maar zwart. Hou er rekening mee dat de favicon op zowel een lichte als een donkere achtergrond, goed zichtbaar is.
Veel favicons maken gebruik van een transparante achtergrond, maar dit brengt risico’s met zich mee. Mocht je een zwarte favicon gebruiken me teen transparante achtergrond, dan kan het zijn dat deze niet zichtbaar is voor bezoekers in de privé of dark modus. Zorg er daarom voor dat je achter de favicon altijd een contrasterende achtergrond gebruikt. Hierdoor zal de favicon altijd zichtbaar zijn.
Wat zijn de afmetingen van een favicon?
De standaard afmetingen zijn 16×16, 32×32 of 64×64 pixels.In het tabblad is het formaat van een favicon 16×16 pixels. WordPress hanteert de afmeting van 512×512 pixels. WordPress zorgt ervoor dat deze op de verschillende plekken op het juiste formaat worden getoond. Mocht je een website vaak bezoeken dan wordt deze in Chrome weergeven op 48×48 pixels.
Hoe voeg ik een favicon toe in WordPress?
Veel mensen laten een WordPress website maken, dit komt omdat WordPress het meest gebruikte CMS Systeem is wereldwijd. Gelukkig is het heel eenvoudig om een favicon aan jouw WordPress website toe te voegen. Wanneer je bent ingelogd kun je via de Customizer je favicon uploaden. Navigeer binnen de customizer naar “Site-identiteit” om deze te uploaden. Wij raden je aan om een formaat van minimaal 512 x 512 pixels te gebruiken. Sla de wijzigingen op na het uploaden en tada, je website heeft nu een favicon.
Waarom niet alle formaten meenemen?
Het kan toch geen kwaad om alles te ondersteunen? Zeker niet maar de root folder van jouw website komt helemaal vol te staan met de verschillende afbeeldingen. En als je geen CMS of plugin gebruikt zal de <head> een extra 20 regels met verwijzingen bevatten. Niet optimaal en overzichtelijk voor jouw code. Sommige browsers en/of besturingssystemen worden niet of nauwelijks meer gebruikt. Hierdoor zou het toevoegen overbodig worden. Firefox en Chrome zouden de nare eigenschap hebben om de beschikbare favicons te downloaden. Dit heeft als gevolgen dat de bezoekers van jouw website extra hard door hun databundel gaan. Dat wil je toch niet op je geweten hebben? Zou jij ook niet fijn vinden.
SVG favicons
Op dit moment bieden nog niet alle browsers ondersteuning aan SVG-favicons. Op dit moment zijn dat alleen Firefox en Opera. Door het gebruik van SVG kun je met één icoon zo veel mogelijk formaten ondersteunen. SVG staat namelijk voor Scalable Vector Graphic. Dit houdt in dat hoe groot of klein je het bestand ook maakt deze altijd scherp is. Dit komt vooral goed naar voren op een Retina scherm.
Neem contact met ons op voor de mogelijkheden om jouw nieuwe favicon te laten maken.
