Website-icon in de browser-tab

In de tab van je browser wordt de titel getoond van de website die je bezoekt. Bij de titel staat een (default) icon, dat daar wordt neergezet door de browser zelf. Zie het plaatje rechts. Hier staat het icon van Edge.
 
Het icon in de browsertab kan worden vervangen door je eigen icon, zoals in het plaatje links. Het icon is ontleend aan de de titel van deze site. Maar ook Bedrijfs-logo's worden hier vaak gebruikt.

Op deze bladzijde staat beschreven hoe je dat aanpakt.

• De aanpak is heel eenvoudig: In de HEAD van elk webdocument van je site neem je deze link op:
  <link rel="shortcut icon" href="icon-naam.ico">
  Zet het icon in de root directory van je website (waar ook de start-pagina staat). Als je sub-mappen gebruikt in je site, verwijs je naar het icon met een relatief pad, bijvoorbeeld:
<link rel="shortcut icon" href="../icon-naam.ico">
• Vanouds wordt het .ico-formaat gebruikt. In de huidige stand van de techniek is ook het .png-formaat mogelijk. Als je .png wilt gebruiken moet je het attribuut type="image/png" opnemen in de hier voor genoemde <link>-tag.
• Als je voor verschillende scherm-resoluties programmeert komt daar ook nog eens sizes="16x16", sizes="32x32", enz., bij. Je moet voor elke afmeting een apart icon in de root van je website zetten.
   
• Mogelijke formaten van icons in websites (px × px):
  • 16 × 16 :
  • 24 × 24 :
  • 32 × 32 :
  • 48 × 48 :
  • 64 × 64 :
• Voor de meeste toepassingen volstaan icons van 16 × 16 en 32 × 32 pixels. In elk webdocument in je site staan dus twee <link>-tags en er zijn dus twee icon-bestanden. Voor deze site zijn dat favicon16.ico en favicon32.ico.
• Op deze site worden gebruikt:
  <link rel="shortcut icon" sizes="16x16" href="favicon16.ico">
<link rel="shortcut icon" sizes="32x32" href="favicon32.ico">
• De icons mogen een kleurdiepte hebben van 8, 24 of 32 bits, hoewel icons met een kleurdiepte van 4 bits het ook goed doen.
   
• De default naam van het icon-bestand is favicon.ico. Als je het href-attribuut weglaat uit de <link>-tag of de <link>-tag helemaal weglaat, behoort de browser te zoeken naar favicon.ico in de root van de website.
   
• Oorspronkelijk is deze techniek opgezet om het icon te laten zien in de Favorieten in Internet Explorer. De default-naam van het icon, en ook de inhoud van de <link>-tag duiden daar op. Later is ook de toepassing in de adresbalk beschikbaar gekomen. Nog weer later zijn daar ook de tabs van browsers met tabbladen aan toegevoegd.

Opmerking:
 

In handleidingen op internet wordt soms gesteld dat de <LINK>-tag moet luiden:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Dit moet je gebruiken als je in XHTML codeert. Met 'gewoon' HTML is het niet nodig.