Favicon
Download jouw gratis SEO checklist!
70+ checks voor direct meer resultaat uit je SEO
- Direct gratis in je mailbox
- Mis niets en blijf op de hoogte van de laatste ontwikkelingen
- Direct toepasbare SEO tips
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.
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
- Gepubliceerd op: 15-07-2020