Wat is een favicon en hoe kun je er een maken voor je website?
Dit artikel is voor het laatst bijgewerkt op 15 juni 2023
Bij het publiceren van een nieuwe website, zien veel mensen een kleine finishing touch over het hoofd die een groot verschil kan maken: het favicon, oftewel het website icoon.
Deze kleine toevoeging aan je website, wat absoluut bij een goed webdesign hoort, laat een indruk achter die veel groter is dan zijn werkelijke formaat; onderschat de kracht en het belang ervan dan ook zeker niet!
In deze handleiding lees je alles wat je moet weten over favicons, zoals: 'Wat is een favicon?' En belangrijker nog: Hoe kun je zelf een favicon maken?'
Wat is een favicon?
Een favicon (voluit ‘favoriete icoon’) is een klein icoontje van 16x16 pixels, dat in webbrowsers wordt gebruikt om een website of pagina weer te geven. Het wordt meestal weergegeven op het tabblad boven in een webbrowser, maar is ook te vinden in de bladwijzerbalk, de geschiedenis en meer.
In sommige gevallen, zoals in Google Chrome, verschijnen favicons zelfs op de homepage van je browser. Met andere woorden: het favicon dient als je eigen visuele teken waarmee je je website op internet kunt identificeren.
De geschiedenis van het favicon
De eerste versie van het favicon werd door Microsoft geïntroduceerd in Internet Explorer 5, uitgebracht in 1999. Het was een icoontje van 16x16 pixels in het ICO-formaat, dat kon worden toegevoegd aan de hoofdmap van een website en automatisch in de browser kon worden weergegeven. Het idee om een klein icoontje te gebruiken om een website weer te geven was er echter al eerder dan1999. In de begindagen van het internet gaven op tekst gebaseerde browsers al een klein symbool weer naast de naam van de website, om aan te geven of de website veilig was of niet.
Snelle evaluatie
Het concept van het favicon werd later overgenomen door andere browsers, waaronder Firefox en Chrome. Tegelijkertijd evolueerde het formaat om grotere favicons en meerdere afbeeldingsformaten te ondersteunen.
Tegenwoordig is het favicon een integraal onderdeel van al onze webervaringen. Als op maat ontworpen pictogrammen, worden ze gebruikt om de merkidentiteit van grote en kleine bedrijven te versterken.
Standaardisatie van het favicon
In de loop van de tijd zijn favicons gestandaardiseerd wat betreft het formaat, de omvang en de locatie op een website. Deze standaardisatie is ontstaan uit de behoefte om favicons consistent te implementeren in verschillende browsers en apparaten.
Dit proces begon in 2005, toen het World Wide Web Consortium (W3C) een aanbeveling voor favicons publiceerde, waarin stond dat het bestand de naam 'Favicon.ico' moest krijgen en in de hoofdmap van de website moest worden geplaatst. Hun aanbeveling bevatte ook de omvang- en formaatvereisten voor het website icoon.
Het W3C heeft zijn eigen aanbevelingen opnieuw bijgewerkt in 2011, aan de hand van extra afbeeldingsformaten voor favicons. Ze voegden tevens richtlijnen toe voor de ondersteuning van meerdere favicons op verschillende apparaten.
Voordelen van de standaardisatie van favicons
De favicon-standaardisatie heeft verschillende voordelen gehad. Het belangrijkste voordeel is dat ze op de juiste manier worden weergegeven op verschillende browsers en apparaten. Vóór standaardisatie werden ze soms namelijk duidelijk weergegeven in de ene browser, maar niet in de andere. En dit had effect op de gebruikerservaring. Standaardisatie heeft bovendien het proces voor het maken van favicons vereenvoudigd voor webdesigners en -ontwikkelaars. Ze hoeven het favicon namelijk niet langer specifiek voor verschillende browsers en apparaten te ontwerpen. Eén ontwerp en formaat zou moeten volstaan. Dit verbetert de gebruikerservaring voor alle internetbezoekers.
Favicon op een webbrowser
Favicon op de bladwijzerbalk
Favicon in de geschiedenis van je browser
Favicon in de zoekresultaten
Waarom is een favicon zo belangrijk?
Ondanks hun minuscule formaat zijn favicons van groot belang voor elke website. Ze verbeteren namelijk de gebruikerservaring, branding én professionaliteit.
Gebruikerservaring
Favicons fungeren als gedenkwaardige visuele aanwijzingen voor je website en verbeteren de gebruikerservaring.
Ze helpen gebruikers het tabblad van je website namelijk gemakkelijk te vinden in hun browser en in verschillende applicaties (zoals de bladwijzerbalk), waardoor ze vaker opnieuw naar je website terugkeren.
Favicons kunnen daarnaast een positieve invloed hebben op de gebruikerservaring van mobiele schermen. Webdesign op mobiele telefoons draait om het maken van impact. En er is bijna niets wat krachtiger doet dan een goede favicon.
Branding
Voor een echt samenhangend merk is het belangrijk om zelfs de kleinste details niet over het hoofd te zien. Favicons dragen bij aan de branding en zichtbaarheid van je website, waardoor je stijl en taal buiten je website (en in de webbrowser) wordt uitgebreid.
Professionaliteit
Favicons dragen bij aan de legitimiteit en professionaliteit van je website, waardoor deze er scherp en doordacht uitziet.
Geloofwaardigheid
Hoewel favicons geen invloed hebben op hoe veilig je website is, lijken gebruikers websites die een favicon bevatten sneller te vertrouwen. Dat omdat ze hen het signaal geven dat ze goed zitten, ongeacht via welke zoekopdracht ze je hebben gevonden.
Terugkerende gebruikers
Favicons laten je website gemakkelijk opvallen, zowel op de pagina's met zoekresultaten als in de browsergeschiedenis van een gebruiker. Daarom zorgt een herkenbaar website icoon ervoor dat gebruikers vaker terugkeren naar je website.
Wanneer gebruikers je website opslaan, zal een favicon het bovendien gemakkelijker maken deze te vinden tussen hun verzameling van andere opgeslagen favorieten.
Favicons en SEO
Favicons hebben geen directe invloed op de SEO van een website. Wat ze wél kunnen is de algehele gebruikerservaring voor browsers verbeteren, waardoor je website wellicht beter scoort in de zoekresultaten.
Uitdagingen bij het maken van een favicon
Hoewel het, eenmaal af, een krachtige branding is voor je merk, komt een favicon maken niet zonder uitdagingen. We hebben hieronder een aantal van de belangrijkste uitdagingen voor je op een rijtje gezet.
Beperkte ontwerpruimte: Het kan een uitdaging zijn om het logo van je merk om te zetten in een faviconvriendelijk formaat, vooral als je wilt dat het de ware boodschap van je merk overbrengt.
Laadtijd en snelheid van de website: Zoals bij alle afbeeldingen op een website, moeten een favicon worden geoptimaliseerd voor webprestaties. Doe je dit niet, kunnen ze een negatieve invloed hebben op de laadsnelheid van je website.
Toegankelijkheid: Omdat ze zo klein zijn, zijn favicons soms moeilijk toegankelijk. Zo zijn ze som te klein van formaat om verklarende tekst of andere aanwijzingen op te nemen.
Compatibiliteitsproblemen: Zelfs met de standaardisatie van bestanden en formaten voor favicons, kunnen er nog steeds problemen optreden met de weergave in verschillende browsers en op verschillende apparaten. Dit kan invloed hebben op hoe favicons op het web worden gezien.
Een favicon maken; hoe doe je dat?
Ga je een favicon maken? Dan kun je overwegen om een professionele ontwerper in te huren. (Als je al met iemand werkt kun je het maken van een favicon in je overeenkomst opnemen).
Je kunt echter ook eenvoudig zelf een favicon maken met een ontwerpprogramma naar keuze of met verschillende online tools. Een van deze aanbevolen tools is de Logo Maker van Wix, waarmee je een professionele en gepersonaliseerde favicon kunt ontwerpen die perfect bij je stijl en behoeften past.
De grootte van een favicon
Ga je voor de laatste optie? Houd dan in gedachten dat de optimale grootte voor een favicon 16x16 pixels is; de grootte waarin ze het meest worden weergegeven.
Ze kunnen soms echter ook in grotere afmetingen verschijnen (zoals 32x32 pixels). Zie hieronder een aantal standaard formaten en richtlijnen:
16x16: Favicon voor browsers 32x32: Favicon voor snelkoppelingen op de taakbalk 96x96: Favicon voor snelkoppelingen op het bureaublad 180x180: Favicon voor Apple touch
Bestanden
Het voorkeursbestand voor een favicon is JPEG of PNG. SVG is bovendien een populairder wordende keuze, omdat steeds meer browsers dit bestand ondersteunen.
Browsers kunnen daarnaast ook favicons weergeven die zijn gemaakt als een GIF. Een klein formaat maakt GIF-favicons echter moeilijker te zien.
Om het beter te begrijpen hebben we een lijstje gemaakt van alle bestandsindelingen die kunnen worden gebruikt voor favicons.
ICO: Ontwikkeld door Microsoft, was dit het oorspronkelijke bestandsformaat voor favicons. Het wordt door alle browsers ondersteund en kan afbeeldingen van meerdere formaten in één bestand bevatten. Hierdoor kun je je website icoon vergroten en verkleinen, zonder afhankelijk te zijn van de browser. In veel gevallen (en wanneer een favicon wordt opgeslagen als een ICO en een ander bestandstype), zal de browser er alsnog voor kiezen om de ICO-versie weer te geven.
PNG: Dit is een populair bestandsformaat voor favicons, omdat websitemakers hier goed mee vertrouwd zijn. Het is een eenvoudig formaat om te maken en levert over het algemeen afbeeldingen en favicons van hoge kwaliteit. PNG-bestanden hebben daarnaast de toegevoegde bonus dat ze lekker 'licht' zijn, wat betekent dat ze snel laden.
SVG: Deze bestanden staan er, net als PNG-bestanden, om bekend 'licht van gewicht' te zijn. Het grootste voordeel van dit type bestandsindeling voor favicons is de mogelijkheid om afbeeldingen van hoge kwaliteit te leveren, die de paginasnelheid of websiteprestaties niet vertragen. In het verleden was het gebruik van SVG voor favicons beperkt vanwege een gebrek aan browsercompatibiliteit, maar dit is gelukkig aan het veranderen.
Transparantie: Heeft je ontwerp een transparante achtergrond? Zorg er dan voor dat je je bestand opslaat als PNG, en schakel hierbij de transparantie-instelling in.
Tips voor het ontwerpen van een favicon
Het ontwerpen van zoiets piepklein lijkt misschien een eitje. Maar het favicon behoort tot een van de moeilijkere taken van webdesign. Het feit dat favicons zo klein zijn, betekent echter dat je extra nauwkeurig moet zijn, omdat er geen ruimte is voor fouten.
Hier zijn een paar tips om een favicon te maken die het beste bij je merk en website past:
Eenvoud
Het kleine formaat van favicons vereist dat je ontwerp nauwkeurig is. Ga niet te veel in op details, zoals lijntjes, textuur of schaduw. Streef in plaats daarvan naar een krachtig, duidelijk en eenvoudig website icoon dat direct herkenbaar is.
De Wix website van kunstenaar en illustrator Adam J. Kurtz is een goed voorbeeld van een eenvoudig favicon ontwerp, met zijn opvallende gele ster. Een ander voorbeeld is het favicon van sieradenontwerpster en Wix gebruiker Ilaria Bonardi, die bestaat uit drie simpele puntjes.
Merkidentiteit
Een favicon moet de geest van je website en merk weerspiegelen, en dezelfde visuele taal en kleurenschema behouden zoals de rest van je website.
Voor de Wix-website van grafisch ontwerper Bhroovi is het regenboogkleurige favicon een voortzetting van dezelfde kleurrijke beeldtaal als hun website.
Op dezelfde manier combineert eBay's favicon de kleuren van het merk met een klein boodschappentas icoontje, waardoor de identiteit van de website perfect wordt weerspiegeld.
Weinig tot geen tekst
Als je typografie (tekst) in je favicon wilt opnemen (zoals je merknaam), gebruik dan maximaal 3 tekens. Initialen of afkortingen zijn vaak een goede oplossingen om tekst in te korten.
De Wix website van de non-profit organisatie Arte, gebruikt de hoofdletter A van hun logo als favicon, met een toegevoegde neon groene achtergrond om de aandacht te trekken.
Als alternatief heeft het favicon van Red Fern Brooklyn helemaal geen tekst. In plaats daarvan hebben ze alleen een icoontje van een blad gebruikt, wat zorgt voor een maximale leesbaarheid.
Het gebruik van logo's
Hoewel sommige logo's er op hun best uitzien, zijn ze zelfs in favicon-formaat nauwelijks leesbaar wanneer ze worden verkleind.
Wil jij je logo als favicon gebruiken? Dan zijn er waarschijnlijk een paar aanpassingen nodig. Het weglaten van de slogan of het gebruik van slechts één initiaal zijn een aantal van de manieren om logo's in kleine formaten te laten werken.
Merk op dat het favicon van Google enigszins verschilt van het logo, terwijl het dezelfde ontwerpwaarden representeert. Het favicon toont alleen het bekende G-initiaal, terwijl alle vier de merkkleuren naadloos in die ene letter zijn verwerkt.
Een andere benadering werd gekozen door illustrator en Wix gebruiker Charlotte Mei, die de initialen van haar handgetekende logo als haar favicon gebruikt.
Kleur
Houd er rekening mee dat een favicon op verschillende gekleurde achtergronden wordt weergegeven, afhankelijk van de gebruikte context en browser. Zorg er daarom voor dat je je favicon test op een grijze, witte en zwarte achtergrond voordat je het ontwerp afrondt.
Inspiratie nodig voor het ontwerpen van je favicon? Bekijk dan deze webdesign trends en doe er je voordeel mee!
Een favicon toevoegen in HTML
Heb je je website gemaakt met een website bouwer? Dan is het toevoegen van je favicon in HTML niet nodig. Deze stap is alleen van toepassing als je websites is gemaakt door een ontwikkelaar. In dit geval moet je favicon in de koptekst van de code worden ingevoegd om op je website te worden weergegeven: <link rel="icon" type="image/png" href="Favicon.png"/> Je website ontwerpen met Wix? Hieronder laten we je zien hoe je jouw favicon eenvoudig kunt aanpassen en kunt toevoegen aan je website.
Een favicon toevoegen aan je Wix website
Websites van Wix bevatten al een standaard favicon. Je kunt deze echter aanpassen door te upgraden naar een Premiumpakket en je website te koppelen aan een domein.
Je favicon wijzigen op je website van Wix? Dat doe je zo:
Ga via je dashboard naar 'Instellingen'.
Klik op ‘Algemeen’ en zoek naar Favicon in het overzicht.
Klik op ‘Afbeelding uploaden’ en selecteer een bestaande afbeelding, of klik op ‘Media uploaden’ om een afbeelding vanaf je computer te uploaden.
Klik op ‘Toevoegen aan pagina’. Je ziet nu een voorbeeld van hoe je favicon wordt weergegeven op je browsertabblad.
Klik op ‘Opslaan’ en ta-da! Je website heeft nu een favicon. Het verschijnt op het tabblad van je website zodra je op publiceren klikt.
Je favicon uittesten
Nadat je je favicon hebt toegevoegd, doe je er goed aan om te checken of hij er goed uitziet op alle plaatsen waar hij wordt weergegeven. Wanneer je dit doet kun je het beste even overschakelen naar de incognito-modus, om problemen met caching te voorkomen.
Controleer je favicon op alle plaatsen waar een websitebezoeker het kan bekijken: de browser, het bladwijzertabblad, de browsergeschiedenis en indien mogelijk ook in de zoekresultaten.
Nog niet gerangschikt voor organische zoekwoorden? Als je website is geïndexeerd zou je deze moeten vinden door te zoeken op je bedrijfs- of merknaam. Zodra je je favicon ziet staan, weet je dat deze op de juiste manier is geïmplementeerd.
Dit is tevens een goed moment om na te denken over de looks van je favicon. Slaagt het uiteindelijke visuele ontwerp erin om de essentie van je merk perfect vast te leggen? Zo ja, dan ben je klaar om je favicon met de wereld te delen!
Tot slot
Je hebt nu uitgebreid antwoord op de vraag: Wat is een favicon? Bovendien weet je hoe je zelf een favicon kunt maken, die je merk optimaal representeert.
Zoals je gelezen hebt, is het favicon een belangrijk en absoluut onmisbaar element van een goed webdesign. Zie het dus niet over het hoofd; ga vandaag nog aan de slag met je eigen website icoon. Succes!
Team Wix