Favicon
Wat is een favicon?
Daar is hij, de favicon zoals we hem vandaag de dag kennen. Waar veel mensen alleen denken aan het 16x16 icoontje voor het tabblad van je browser, worden favicons vandaag de dag op veel meer plekken gebruikt.
De naam favicon werd het eerst gebruikt door Microsoft voor Internet Explorer 5 dat in 1999 op de markt kwam. Er bestonden toen nog geen tabbladen zoals we deze vandaag de dag kennen. Wel werd er als je een site toevoegde aan je favorieten een icoontje voor geplaatst. Het favorieten icoontje, of afgekort: favicon.
Favicon vandaag de dag
Zoals aangegeven worden favicons vandaag de dag op veel meer plekken gebruikt, zoals bijvoorbeeld op de iPad als je een website vast maakt aan je startscherm. Waar vroeger het bestandformaat van een favicon altijd moest eindigen op .ICO is dit tegenwoordig een .PNG bestand dat door veel meer apparaten kan worden gelezen.
Verschillende formaten favicons
Per browser, apparaat of scherm verschilt het formaat favicon. Zo zijn de twee meest gebruikte formaten 16 x 16 en voor andere browsers 32 x 32. Je kunt de favicons toevoegen aan je website door onderstaande code in de <head> van je website te plaatsen. Met onderstaande code gaan we ervan uit dat de afbeeldingen in de root van je website staan.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Met de komst van apparaten zoals de smartphone, iPad, smart TV's en hoge resolutie schermen zijn hier nog een heel scala aan formaten aan toegevoegd. Wij adviseren om minimaal de volgende formaten ook nog te ondersteunen:
Eerste generatie iPhone
<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png">
Eerste generatie iPad
<link rel="apple-touch-icon" sizes="57x57" href="/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon-72x72.png">
Retina iPhone & iPad
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon-144x144.png">
Overige generaties iPhone & iPad
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/favicon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
Android en overige hoge resolutie apparaten
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
Hoe maak je een favicon?
Als het programma: "Photoshop" hebt kun je gemakkelijk een afbeelding maken van 192 x 192 pixels en vervolgens opslaan als .PNG.
Als je geen Photoshop hebt kun je het gratis alternatief GIMP downloaden. Of als je minder technisch bent kun je ook gebruik maken van deze handige site waar je gemakkelijk een favicon kunt maken.
Waarom een favicon belangrijk is
Een favicon lijkt misschien een klein detail, maar het speelt een grote rol in hoe een website wordt ervaren. Het icoontje verschijnt in tabbladen, bladwijzers en op startschermen van mobiele apparaten. Zonder favicon ziet een website er snel onaf uit of verdwijnt het tussen de andere tabbladen. Met een favicon herkent een bezoeker je website direct, ook als er meerdere vensters openstaan.
Voor webdesign en het laten maken van een website is een favicon daarom onmisbaar. Het versterkt de herkenbaarheid van een merk en zorgt dat je site er verzorgd uitziet. Het is vaak een van de eerste visuele elementen die een gebruiker ziet. Door vanaf het begin een favicon op te nemen in het ontwerp, leg je een basis voor een consistente uitstraling van je merk of bedrijf.
TIP:
Begin altijd met het grootste formaat, omdat een favicon altijd een verhouding 1:1 heeft (vierkant). Kun je als je eerst de grootste versie maakt deze gemakkelijker steeds verkleinen naar de kleinere formaten.
-
Dwayne Snoeren
- Laatste update: 09-09-2025
Klaar om online te groeien met een sterke website?
Wij ontwerpen en bouwen websites die scoren in Google én klanten overtuigen. Bel ons op: 085 - 303 81 81