Een favicon is een klein pictogram dat verschijnt in de tabbladen van een browser, naast de titel van de website, in bladwijzers, en soms in de adresbalk. Dit icoon vertegenwoordigt een website visueel en helpt gebruikers deze snel te herkennen wanneer ze meerdere tabbladen of bladwijzers open hebben staan.
Wat is een favicon?
De term “favicon” is een afkorting van “favorite icon”. Het is meestal een klein vierkant pictogram dat vaak het logo of een simplistische versie van het logo van de website bevat. Dit pictogram helpt met branding. Het zorgt ervoor dat je website herkenbaar is, zelfs wanneer gebruikers meerdere tabs open hebben of de site hebben opgeslagen als bladwijzer.
Waarom is een favicon belangrijk?
- Herkenbaarheid: Een favicon draagt bij aan de visuele identiteit van een website. Het maakt de website namelijk gemakkelijk herkenbaar voor gebruikers die snel door verschillende tabs navigeren.
- Gebruiksvriendelijkheid: Het zorgt ervoor dat de website opvalt in browser-tabbladen, bladwijzers of bij het vastpinnen van een website op het startscherm van mobiele apparaten.
- Professionele uitstraling: Een website zonder favicon lijkt vaak incompleet of minder professioneel. Veel gebruikers associëren een favicon met zorg en aandacht voor detail.
- Bladwijzers en zoekresultaten: Sommige zoekmachines, zoals Google, tonen favicons naast zoekresultaten, wat de visuele herkenbaarheid nog verder kan verbeteren.
Welke formaten zijn geschikt voor een favicon?
Een favicon moet in meerdere formaten beschikbaar zijn omdat verschillende browsers, apparaten en besturingssystemen verschillende afmetingen en bestandsformaten vereisen. Dit zorgt ervoor dat je favicon er op elk apparaat scherp en goed uitziet. Enkele veelgebruikte formaten en afmetingen zijn:
- 16×16 pixels: Dit is het standaardformaat voor favicons in de meeste desktopbrowsers.
- 32×32 pixels: Geschikt voor bladwijzers of grotere schermen.
- 48×48 pixels: Gebruikt door sommige besturingssystemen voor grotere icoonweergaven.
- 180×180 pixels: Dit is de aanbevolen grootte voor favicons die worden gebruikt in de iOS “Home Screen” van iPhones en iPads.
- 192×192 pixels: Gebruikt voor Android-toestellen wanneer een website aan het startscherm wordt toegevoegd.
- 512×512 pixels: Voor gebruik in sommige situaties met hoge resolutie, zoals in Progressive Web Apps (PWA).
Favicons worden meestal opgeslagen als een .ico-bestand omdat dit formaat meerdere afbeeldingsformaten kan bevatten. Andere formaten zoals .png, .gif of .svg kunnen ook gebruikt worden, afhankelijk van de compatibiliteit met verschillende apparaten en browsers.
Verschillende apparaten, verschillende afbeeldingen?
Ja, verschillende apparaten en browsers kunnen verschillende afbeeldingen gebruiken voor een favicon. Desktopbrowsers gebruiken meestal de standaard 16×16 of 32×32 pictogrammen, terwijl mobiele apparaten vaak grotere en hogere resolutieafbeeldingen gebruiken, zoals 180×180 pixels voor iOS of 192×192 pixels voor Android. Progressive Web Apps (PWA’s) en verschillende schermformaten vragen vaak om een reeks verschillende favicon-groottes om ervoor te zorgen dat het pictogram er overal scherp uitziet.
Het is een goede praktijk om verschillende formaten van je favicon te maken en deze te specificeren in je HTML-document met <link>-tags, zodat elk apparaat de juiste versie van het pictogram kan laden.
Conclusie
Het toevoegen van een favicon aan je website is een kleine, maar belangrijke stap in het verbeteren van de gebruikerservaring. Én in het versterken van je merkidentiteit. Door verschillende afbeeldingsformaten te gebruiken, zorg je ervoor dat je favicon op elk apparaat goed wordt weergegeven. Dit versterkt de herkenbaarheid en het gebruiksgemak.
Tot slot: handige tip
Wanneer je een afbeelding hebt, maar je wilt er een favicon van maken in verschillende groottes, kijk dan even op deze website. Hier kun je je afbeelding uploaden, om vervolgens een zip de kunnen downloaden met de verschillende bestandsformaten. Ik ga meestal uit van een .png bestand van 512 pixels die ik dan upload. Veel succes!