Favicon: het kleinste beeldmerk met het meeste bereik
Kijk eens naar de bovenkant van je scherm. Waarschijnlijk staan er tien of twintig tabbladen open. Van de titels lees je bijna niets, want die zijn afgekapt tot drie letters. Wat je wel ziet is het icoontje ervoor. Daarop klik je, niet op de tekst.
Ontbreekt dat icoon, dan toont je browser een leeg vel papier. Je site is dan het enige tabblad zonder gezicht.
Bij 072 Vuurwerk speelde dat mee. Ik verzorgde daar het webdesign en de vindbaarheid. Rond de jaarwisseling vergelijken mensen meerdere aanbieders naast elkaar.
Ze hebben dan zes tabbladen open, allemaal met vuurwerk. Een eigen siteicoon in de huisstijlkleur maakt het verschil tussen teruggevonden worden en weggeklikt worden. Dat is geen designdetail, dat is navigatie.
Het kleinste beeldmerk van je site, en het meest gebruikte.
Wat is een favicon?
Een favicon is het kleine icoon dat hoort bij je website. De naam komt van favorite icon, want oorspronkelijk was hij bedoeld voor je bladwijzers.
Tegenwoordig zie je hem op meer plekken. In het browsertabblad en in je geschiedenis. Ook bij je herkenbaarheid in favorieten en op het startscherm van een telefoon.
Waar hij overal opduikt
Google toont hem sinds een paar jaar ook in de mobiele zoekresultaten. Naast je titel staat dan jouw icoon, of een grijze bol als je er geen hebt.
Dat is de plek waar het echt telt. Daar concurreer je met negen andere resultaten om aandacht.
Afmetingen en formaten
De afmetingen en formaten lopen uiteen, en dat is verwarrend. Vroeger volstond een bestand van 16 bij 16 pixels. Dat is nu veel te klein.
Wat ik standaard aanlever
Een vierkant bestand van minimaal 512 bij 512 pixels als bron.
Een PNG met transparante achtergrond voor het tabblad.
Een SVG waar het kan, want die blijft scherp op elk scherm.
Een apart app-icoon van 180 bij 180 voor iOS.
Google vraagt om minimaal 48 bij 48 pixels, of een veelvoud daarvan. Lever je kleiner aan, dan toont hij helemaal niets.
Wat erop moet staan
Niet je hele logo. Dat is de fout die ik het vaakst zie. Een logo met een bedrijfsnaam wordt op 32 pixels een grijze vlek.
Neem een enkel element uit je merk. Een letter, een vorm of een symbool. Test het door je ontwerp te verkleinen naar postzegelformaat en op een meter afstand te gaan staan.
Herken je het nog? Dan werkt het. Zo niet, dan is het te druk. Leg de gekozen variant vast in je design system, dan blijft het consistent.
Toevoegen en zichtbaar krijgen
In WordPress gaat dat via de aanpasser, onder site-identiteit. Je uploadt daar je bestand als siteicoon en het systeem maakt de varianten aan. Meer over dat beheer lees je bij CMS.
Zie je je nieuwe icoon niet? Dat is bijna altijd opslag. Browsers bewaren favicons hardnekkig lang, soms wekenlang. Meer daarover lees je bij cache.
Test daarom in een privevenster van je browser. Zie je hem daar wel, dan is er niets mis.
Telt het mee voor je vindbaarheid?
Niet als rankingfactor. Je komt er geen plek hoger door.
Wel telt het mee in gedrag. In de mobiele resultaten valt een resultaat met een duidelijk icoon eerder op. Meer klikken op dezelfde positie is winst die je niet in een ranglijst terugziet. Zo werkt merkherkenning vaker: indirect, maar meetbaar.
Waar je hem overal test
Controleer je icoon op drie plekken voordat je tevreden bent. In je tabblad op desktop, in de mobiele zoekresultaten en bij het toevoegen aan een beginscherm.
Die laatste vergeet vrijwel iedereen. Op een iPhone verschijnt daar een groter icoon. Zonder apart bestand maakt het toestel er zelf een schermafbeelding van. Dat oogt rommelig.
Een detail dat meer doet dan je denkt
Een favicon kost je tien minuten en gaat jaren mee. Er is weinig aan je website dat zo’n verhouding heeft tussen moeite en zichtbaarheid.
Sla je bronbestand daarom netjes op, zodat je het over drie jaar terugvindt. Anders begin je opnieuw bij een herontwerp.
Meer vragen over Favicon
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een favicon?
Welke afmetingen heeft een favicon nodig?
Hoe voeg je een favicon toe in WordPress?
Waarom zie ik mijn nieuwe favicon niet?
Heeft een favicon invloed op je vindbaarheid?
Welk bestandsformaat gebruik je voor een favicon?
Wat is een favicon?
Groter dan de meeste mensen denken. Vroeger volstond een bestand van 16 bij 16 pixels, en dat advies staat nog overal.
Dat is nu veel te klein. Google vraagt om minimaal 48 bij 48 pixels, of een veelvoud daarvan. Lever je kleiner aan, dan toont hij helemaal niets in de zoekresultaten.
Ik werk daarom met een bronbestand van minimaal 512 bij 512 pixels, vierkant. Daaruit maak ik de varianten die je nodig hebt.
Een PNG met transparante achtergrond werkt voor het tabblad. Een SVG is nog beter waar het kan, want die blijft scherp op elk scherm.
Voor iPhones en iPads komt daar een apart bestand bij van 180 bij 180 pixels. Dat is het icoon dat verschijnt als iemand je site op zijn beginscherm zet.
Bewaar je bronbestand op een vaste plek in je merkmap. Bij een herontwerp over drie jaar wil je niet opnieuw beginnen met uitsnijden. Werk altijd vanuit dat bronbestand en nooit vanuit een verkleinde versie.
Welke afmetingen heeft een favicon nodig?
Een favicon is het kleine icoon dat hoort bij je website. De naam komt van favorite icon, want oorspronkelijk was hij bedoeld voor je bladwijzers.
Tegenwoordig zie je hem op veel meer plekken. In het browsertabblad, in je geschiedenis, bij je favorieten en op het startscherm van een telefoon.
De belangrijkste plek is erbij gekomen zonder dat veel mensen het doorhebben. Google toont je favicon sinds een paar jaar ook in de mobiele zoekresultaten. Naast je titel staat dan jouw icoon, of een grijze bol als je er geen hebt.
Daar concurreer je met negen andere resultaten om aandacht. Een grijze bol tussen negen herkenbare merken is geen goede uitgangspositie.
Kijk maar eens naar je eigen scherm. Van de titels van je tabbladen lees je bijna niets, want die zijn afgekapt tot drie letters. Op het icoontje klik je wel.
Vraag je bouwer of dit bij jou is ingesteld. Het is zo’n punt dat bij oplevering vergeten wordt en waar daarna niemand meer naar kijkt.
Wat zet je op een favicon?
Niet je hele logo. Dat is de fout die ik het vaakst tegenkom.
Een logo met een bedrijfsnaam erin wordt op 32 pixels een grijze vlek. De letters lopen in elkaar over en er blijft niets herkenbaars van over.
Neem daarom een enkel element uit je merk. Een beginletter, een vorm of een symbool dat bij je hoort. Als je een beeldmerk naast je naam hebt, is dat vaak de beste kandidaat.
Test het door je ontwerp te verkleinen naar postzegelformaat en op een meter afstand te gaan staan. Herken je het nog, dan werkt het. Zo niet, dan is het te druk.
Gebruik ook een achtergrondkleur uit je huisstijl. Een gekleurd vierkantje valt op tussen witte iconen. Leg de gekozen variant vast in je design system.
Leg de gekozen variant ook vast voor je drukwerk en je socialprofielen. Een consistent beeldmerk op klein formaat versterkt overal je herkenbaarheid. Vraag ook een collega om te kijken zonder dat je zegt wat het voorstelt.
Hoe voeg je een favicon toe in WordPress?
Dat gaat via de aanpasser, onder het kopje site-identiteit. Daar staat een veld voor het siteicoon.
Je uploadt daar je vierkante bestand en het systeem maakt de varianten automatisch aan. Je hoeft dus geen losse bestandjes in je map te zetten zoals vroeger.
Het aangeraden formaat is 512 bij 512 pixels. Kleiner mag, maar dan mist je site de grotere varianten die telefoons gebruiken.
Werk je met een paginabouwer, controleer dan of die geen eigen instelling heeft die de jouwe overschrijft. Dat gebeurt regelmatig en het is een lastige om te vinden.
Controleer het resultaat daarna op drie plekken. In je tabblad, in de mobiele zoekresultaten en bij het toevoegen aan een beginscherm. Meer over dat beheer lees je bij CMS.
Controleer na een thema-update of je instelling nog staat. Nieuwe versies zetten die soms terug naar de standaard van het thema. Bewaar een schermafbeelding van je instelling, dan zie je later meteen wat er is veranderd.
Waarom zie ik mijn nieuwe favicon niet?
Dat is bijna altijd opslag en niet een fout in je instellingen.
Browsers bewaren favicons hardnekkig lang, soms wekenlang. Ze gaan ervan uit dat zo’n icoon nooit verandert, dus ze halen hem niet elke keer opnieuw op.
Test daarom eerst in een privevenster van je browser. Zie je hem daar wel, dan is er niets mis met je site en zit het aan jouw kant.
Helpt dat niet, leeg dan de opslag van je browser. Dat is dezelfde gedachte als bij cache.
Voor de zoekresultaten geldt iets anders. Google haalt je favicon op wanneer hij je site opnieuw bezoekt. Dat kan weken duren en daar kun je niets aan versnellen. Wees dus geduldig voordat je aan je instellingen gaat sleutelen.
Wees geduldig met de zoekresultaten. Daar kun je niets versnellen, en aan je instellingen sleutelen maakt het meestal alleen maar onduidelijker. Kijk pas na twee weken opnieuw, dan weet je of het echt niet werkt.
Weet je niet zeker of jouw favicon overal goed wordt getoond? Stuur me je website via het formulier hieronder. Ik controleer je tabblad, je mobiele zoekresultaat en het icoon op een telefoon. Klopt er iets niet, dan hoor je precies welk bestand je mist. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Siteicoon, tabbladicoon, website-icoon
