Valt jouw favicon in het niets met de donkere modus?

Wat is een favicon

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 contrastrerende achtergrond gebruikt. Hierdoor zal de favicon altijd zichtbaar zijn.

Afmetingen 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.

Waarom niet alle formaten van een favicon gebruiken?

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.

Favicon laten maken voor jouw website

Neem contact met ons op voor de mogelijkheden om jouw favicon te laten checken. Of wil je een nieuwe favicon laten maken?