Zie je dat piepkleine icoontje linksboven in je tabblad? Dat is een favicon — jouw digitale vlaggetje op het web. Het lijkt misschien een detail, maar het is zoiets als het stoepbord voor je winkel: klein, maar o zo belangrijk voor herkenning.
Waarom zou ik daar aandacht aan besteden?
Een favicon doet meer dan je denkt:
- Het maakt je website herkenbaar tussen al die openstaande tabjes
- Het laat zien dat je zorg besteedt aan álles — zelfs de details
- Het wekt vertrouwen bij nieuwe bezoekers
- Het maakt je merk sterker, ook als mensen je site als favoriet opslaan
- Het voorkomt verwarring wanneer gebruikers meerdere sites tegelijk open hebben
- Het draagt bij aan consistentie binnen je merkidentiteit, zowel visueel als technisch
Meer over merkherkenning? Bekijk onze pagina over huisstijl en logo.
Hoe ziet zo'n favicon er eigenlijk uit?
Een favicon is een mini-afbeelding van meestal 16x16 of 32x32 pixels. Hou het simpel. Denk aan een initiaal, icoontje of een versimpeld logo. Te veel detail gaat verloren. Less is more — zeker in dit formaat. Transparantie en scherpe contrasten helpen om het goed zichtbaar te maken, ook in donkere browsermodi.
En hoe zet je er eentje op je site?
Gebruik je WordPress? Dan kun je via Weergave > Customizer > Site-identiteit jouw favicon uploaden. Makkelijk.
Gebruik je een maatwerk website?
Dan voeg je je favicon handmatig toe in de <head> van je HTML. Een eenvoudige versie ziet er zo uit:
<link rel="icon" type="image/png" href="/favicon.png">Wil je het meteen goed doen? Dan kun je een complete set favicon-bestanden en bijbehorende code laten genereren via handige tools als:
Deze tools leveren faviconsets inclusief browsercompatibiliteit (Edge, Safari, Chrome, Android, iOS), optimalisatie voor retina-schermen én een site.webmanifest.
<link rel="icon" type="image/png" href="/global/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/global/favicon/favicon.svg" />
<link rel="shortcut icon" href="/global/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/global/favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="K-Improvement" />
<link rel="manifest" href="/global/favicon/site.webmanifest" />
Met een manifest kun je je favicon opnemen in je Progressive Web App (PWA). Hierin geef je o.a. de naam van je site, achtergrondkleur, weergavemodus en iconenset op. Dit is ook interessant als je jouw site later als app op het homescreen van mobiele gebruikers wilt laten installeren.
Wat maakt een goede favicon?
Inspiratie nodig? Kijk hoe bekende merken het doen. Google gebruikt simpelweg een gekleurde "G". Facebook had jarenlang alleen de witte "f" in blauw veld. Kies iets dat herkenbaar is én schaalbaar blijft.
Gebruik het liefst een SVG voor moderne browsers (schaalbaar en scherp op alle schermen), met een PNG fallback. Zorg dat je favicon ook beschikbaar is als .ico bestand voor oudere browsers.
Meer leren over technische verbeteringen? Lees ook onze uitleg over SEO-techniek.
Is een favicon écht nodig?
Strikt technisch? Nee. Maar zonder favicon mist je site uitstraling, herkenning en vertrouwen. Het hoort bij de basis: net als je logo, je domeinnaam of je kleuren. Het is een mini-me van je merk.
Lees meer over visuele herkenning op onze pagina over webdesign en UX.
Heeft het ook invloed op Google?
Ja, maar niet direct in de rankings. Wel kan een favicon in de zoekresultaten bijdragen aan hogere doorklikratio (CTR). En elke klik telt. Bovendien ziet het er gewoon verzorgd uit.
Ontdek hoe dit soort kleine dingen bijdragen aan jouw online zichtbaarheid.
Wat als ik geen favicon instel?
Dan krijg je het standaardicoontje van de browser (of soms helemaal niets). Dat oogt onaf en amateuristisch. Niet ideaal als je professioneel over wilt komen.
Mijn logo is veel te druk. Wat nu?
Kies een afgeleide. Bijvoorbeeld een lettertype-icoon, een silhouet of enkel je merkinitiaal. Hou het herkenbaar, maar versimpel het slim. Wil je dit laten ontwerpen? Neem contact met ons op, dan kijken we met je mee.
Wat doet WebRabbitz hiermee?
Wij zorgen dat je site tot in de puntjes klopt. We ontwerpen favicons, optimaliseren de technische implementatie én checken of alles werkt op desktop én mobiel. Zo weet je zeker dat je favicon functioneel én stijlvol is.
Twijfel je of jouw site dit soort basics op orde heeft? Plan vrijblijvend een kennismakingsgesprek in. We kijken met een frisse blik naar je website en geven je meteen wat slimme verbeterpunten mee.
Of duik verder in onze content- en tekststrategie voor een totaalplaatje van wat je site sterk maakt.
