Terug naar begrippenlijst
Favicon
Een favicon is misschien piepklein, maar je ziet ’m overal. Het is dat kleine icoontje links van je paginatitel in de browser en vaak ook op je bladwijzerbalk, tabbladen of mobiele zoekresultaten. Denk aan het rode bolletje van YouTube, de blauwe ‘f’ van Facebook of dat vrolijke gekleurde G’tje van Google.
Inhoudsopgave
Herkenbaar op postzegelformaat
De naam ‘favicon’ komt van ‘favorite icon’. Het werd ooit bedacht als beeldmerk bij favorieten in Internet Explorer. Tegenwoordig is het veel meer dan dat. Een goede favicon maakt je site herkenbaar op tabbladen en in lijstjes met opgeslagen links. Zelfs als iemand 20 tabbladen open heeft staan, moet die van jou er uitspringen.
Meer dan alleen een mooi plaatje
Een favicon is geen verplichte kost, maar wel een hele slimme zet voor je branding. Het is je logo in mini-formaat en dus een extra kans om je merk te laten opvallen. Daarnaast oogt een site zonder favicon vaak wat kaal. Dat kleine detail geeft je website nét die professionele finishing touch.
En let op: zoekmachines als Google tonen je favicon ook in mobiele zoekresultaten. Dus het is niet alleen visueel handig, maar ook slim voor je vindbaarheid en klikgedrag.
Hoe maak je een goede favicon?
Een goede favicon is simpel, scherp en herkenbaar. Geen volledige slogan of foto, maar een icoon dat ook op 16×16 pixels nog duidelijk is. De meeste favicons worden gemaakt van een gestileerd logo-element, een letterteken of een helder symbool. Veel ontwerpers maken meerdere varianten (voor retina-schermen of dark mode) en gebruiken formaten zoals .ico, .png of .svg.
En hoe voeg je ’m toe?
In de code van je website voeg je de favicon toe via een stukje HTML in de <head> van je pagina. De meeste contentmanagementsystemen (zoals WordPress) hebben er standaard een instelmogelijkheid voor. Uploaden, opslaan, klaar.
Veelgestelde vragen
Nee, maar het wordt wel sterk aangeraden. Zonder favicon oogt je site niet af en ben je minder herkenbaar.
De standaardmaat is 16×16 pixels, maar veel browsers ondersteunen ook 32×32 of 48×48. Voor retina-schermen zijn grotere versies (bijvoorbeeld 180×180) handig.
Ja, er zijn veel gratis tools zoals favicon.io of realfavicongenerator.net waarmee je zelf een favicon maakt van je logo of een pictogram.
Dan toont de browser vaak een leeg icoon of een standaardafbeelding. Dat ziet er minder professioneel uit en maakt je site minder herkenbaar.
Stan Classens Front-end developer
Gerelateerde begrippen
- 301 redirect
- 302 redirect
- 404-pagina
- Above the Fold
- Abstraction
- Access Control
- Accessible Rich Internet Applications (ARIA )
- Ad exchange
- Afbeeldingsresolutie
- AI-gegenereerde websites
- AJAX
- Alt tag
- Anchor tekst
- Animatie
- API
- Aspect ratio
- Back-end
- Bedankpagina
- Binary Tree
- Bitbucket
- Bootstrap
- Bounce rate
- Breadcrumbs
- Bug
