Bij het bezoeken van websites zie je in de browser vaak een klein icoontje in het tabblad, naast de titel van de pagina. Dit icoon valt meestal pas echt op wanneer je meerdere tabbladen tegelijk open hebt staan. Veel mensen vragen zich af wat dit precies is, waar het vandaan komt en waarom het belangrijk is voor een website.
In dit artikel leggen we uit: Wat is een favicon? en welke rol dit kleine icoon speelt binnen een website en zoekmachines.
Wat is een favicon?
Een favicon is een kleine afbeelding die wordt gebruikt als herkenningsteken van een website. De naam favicon komt van de Engelse term favorites icon. Het icoon helpt bezoekers om een website sneller te herkennen wanneer zij meerdere websites tegelijk open hebben staan in hun browser.
Door het kleine formaat moet een favicon niet worden verward met een volledig logo. Soms lijkt de vorm op het logo van een bedrijf, maar het doel is vooral snelle herkenning. Microsoft ondersteunde favicon voor het eerst in maart 1999 in Internet Explorer 5.
Destijds werd het icoon toegevoegd als shortcut icon in het head gedeelte van de website. Later, in december 1999, werd het gebruik van favicon officieel opgenomen als standaard in HTML op advies van het World Wide Web Consortium.
Waar wordt een favicon weergegeven?
Een favicon is niet alleen zichtbaar in het tabblad van de browser. Je komt dit icoon ook tegen op andere plekken, zoals in bladwijzers, in de browsergeschiedenis en in de zoekgeschiedenis. Hierdoor helpt het icoon gebruikers om een website sneller terug te vinden, ook wanneer zij de naam van de website niet direct meer weten.
De voordelen van het gebruik van een favicon
Internetgebruikers zien dagelijks tientallen verschillende websites en bijbehorende iconen. Ons brein herkent beelden sneller dan tekst. Wanneer iemand zoekt naar een bepaalde website, maken favicons het makkelijker om de juiste site sneller te herkennen tussen andere resultaten.
Als je veel tabbladen open hebt staan, kan het lastig zijn om het juiste tabblad terug te vinden. In zulke situaties biedt een favicon uitkomst. Door het icoon te herkennen, klik je sneller op het juiste tabblad zonder eerst alle titels te hoeven lezen.
Wil je weten hoe kleine visuele details samen zorgen voor meer vertrouwen en een betere ervaring voor bezoekers, dan geeft dit artikel daar extra inzicht in De rol van SEO en gebruikerservaring (UX) in online succes.
Waarom zijn favicons belangrijk voor een website?
Het maken van een favicon is technisch gezien niet ingewikkeld, maar het gebruik ervan is wel belangrijk. Een favicon draagt bij aan de herkenbaarheid van een merk en wekt vertrouwen bij bezoekers. Dit kleine icoon zorgt ervoor dat een website professioneler overkomt en makkelijker te onthouden is.
Door de visuele herkenning kunnen bezoekers een website sneller identificeren. Dat maakt het gebruik van de browser prettiger en helpt gebruikers om overzicht te houden wanneer zij meerdere websites tegelijk bezoeken.
Als je wilt begrijpen hoe een website in het algemeen sterker en professioneler wordt opgebouwd, helpt dit artikel je daar verder bij Waar moet een goede website aan voldoen?
Heeft een favicon invloed op SEO?
Veel mensen vragen zich af of het gebruik van een favicon invloed heeft op zoekmachine optimalisatie. Een favicon zorgt niet direct voor een hogere positie in zoekmachines, maar indirect kan het wel bijdragen aan betere resultaten.
Wanneer een favicon zichtbaar is naast de website in mobiele zoekresultaten, valt een website meer op. Dit kan zorgen voor een hogere klikfrequentie. Als meer mensen op een zoekresultaat klikken, kan dat op de lange termijn een positief effect hebben op de zichtbaarheid van de website.
Daarnaast speelt gebruiksvriendelijkheid een belangrijke rol binnen SEO. Een website met een duidelijke favicon helpt bezoekers om de site sneller te herkennen in bladwijzers, zoekgeschiedenis en browsergeschiedenis.
Dit bespaart tijd en verhoogt het gebruiksgemak. Hoe prettiger een website werkt voor gebruikers, hoe groter de kans dat zoekmachines dit positief beoordelen.
Voor wie dieper wil begrijpen hoe Google bepaalt welke sites hoger komen te staan, is dit een fijne aanvulling Hoe werken zoekmachines en hoe bepalen ze jouw positie?
Hoe maak je een goede favicon?
Bij het ontwerpen van een favicon is het belangrijk om goed na te denken over eenvoud en herkenbaarheid. Ondanks het kleine formaat moet het icoon duidelijk zijn en passen bij het merk van de website. Omdat een favicon nauw verbonden is met de uitstraling van een bedrijf of organisatie, verdient het ontwerp extra aandacht.
De juiste afmetingen voor een favicon
Een favicon bestaat niet uit één vaste afmeting. De bekendste en meest gebruikte maat is 16 bij 16 pixels, deze wordt vooral gebruikt in browsertabbladen en bij bladwijzers. Daarnaast worden ook andere formaten gebruikt, afhankelijk van het apparaat en de toepassing.
Zo wordt 32 bij 32 pixels vaak ingezet voor nieuwe tabbladen en taakbalken, 48 bij 48 pixels voor hogere resolutie schermen en bepaalde browsers. Voor mobiele apparaten zoals Android Chrome is 192 bij 192 pixels gangbaar. Bij Progressive Web Apps en schermen met hoge resolutie worden zelfs grotere formaten zoals 256 bij 256 of 512 bij 512 pixels gebruikt. Door meerdere formaten aan te bieden, blijft het icoon op elk apparaat scherp en goed herkenbaar.
De relatie tussen favicon en merk
Een favicon vormt een visuele koppeling tussen de website en het merk. Bij het zien van het icoon moet de gebruiker direct een link kunnen leggen met de naam of identiteit van de website. Vaak wordt hiervoor een vereenvoudigde versie van het logo gebruikt, zolang deze goed herkenbaar blijft.
Een afkorting als favicon gebruiken
Omdat het lastig kan zijn om een gedetailleerd beeld te tonen in zo’n klein formaat, kiezen veel websites ervoor om een afkorting van de merknaam te gebruiken. Dit werkt vooral goed wanneer de afkorting bekend is en eenvoudig te lezen blijft.
Het belang van kleurgebruik
Kleuren spelen een grote rol bij het ontwerpen van een favicon. Door het juiste kleurgebruik kan een icoon beter opvallen en sneller worden herkend. Zeker bij kleine afbeeldingen helpen contrastrijke kleuren om het icoon duidelijk zichtbaar te maken.
Welke bestandsformaten zijn geschikt voor favicons?
Waar vroeger vooral het ico formaat werd gebruikt, zijn er tegenwoordig meerdere bestandsformaten mogelijk. Denk aan png, svg, jpeg, gif en apng. Elk formaat heeft zijn eigen voordelen en beperkingen. Niet alle browsers ondersteunen elk formaat even goed. Het ico formaat blijft een veilige keuze omdat het ook bij kleine afmetingen scherp wordt weergegeven.
Meer achtergrond over hoe bestanden, code en website techniek samen werken vind je hier Wat is HTML en waar wordt het voor gebruikt?
Hoe maak je een favicon aan?
Begin met het ontwerpen van een icoon in een ontwerpprogramma zoals Photoshop of een ander grafisch hulpmiddel. Sla het ontwerp op als png bestand met een formaat van 48 bij 48 pixels.
Gebruik daarna een online tool om het png bestand om te zetten naar het ico formaat. Vervolgens maak je in het thema van je website een map aan met de naam images en upload je daar het icoonbestand.
Geef het bestand de naam favicon.ico. Plaats daarna de onderstaande code in het head gedeelte van je website zodat browsers het icoon kunnen herkennen.
Let erop dat het pad naar het bestand correct is ingesteld. De structuur van mappen kan per website of hostingomgeving verschillen, maar de werkwijze blijft hetzelfde. Veel online tools geven ook extra code mee voor verschillende browsers, die je eventueel kunt toevoegen in het head gedeelte van de website.
Conclusie
Een favicon is een klein maar belangrijk onderdeel van een website. Het helpt bezoekers om een website sneller te herkennen, zorgt voor een professionele uitstraling en draagt bij aan een betere gebruikerservaring. Hoewel een favicon geen directe rankingfactor is, kan het indirect bijdragen aan betere zichtbaarheid en meer klikken in zoekmachines.
Veelgestelde vragen
1. Wat is een favicon precies?
Een favicon is een klein icoon dat wordt gebruikt om een website visueel te herkennen in browsers, bladwijzers en zoekresultaten.
2. Heeft een favicon invloed op SEO?
Een favicon heeft geen directe invloed op de positie in zoekmachines, maar kan wel zorgen voor meer klikken en een betere gebruikservaring.
3. Welke afmeting is het beste voor een favicon?
De meest gebruikte afmeting is 48 bij 48 pixels, omdat deze door alle browsers wordt ondersteund.
4. Kan ik mijn logo gebruiken als favicon?
Ja, zolang het logo in vereenvoudigde vorm goed leesbaar blijft op een klein formaat.