Les « shortcut icons » ou « favicons » ou encore « icones de pages »

Les « shortcut icons » sont supportées par les navigateurs suivants :

• Microsoft Internet Explorer >= 5
• Mozilla >= 0.9.7
• Galeon
• Konqueror

Comment faire apparaître une icone de page (la bonne manière)

Il y a 2 approches possibles, une approche respectueuse des standards et une autre qui ne l'est pas. Vous opterez pour l'une ou pour l'autre en fonction de vos priorités. Quelque soit votre choix, vous devez faire attention à bien faire correspondre l'attribut type avec le format de l'image que vous utilisez.

Une approche respectueuse des standards du Web, initiée par Mozilla, utilisant des formats d'images standards, mais ne fonctionnant pas encore avec Microsoft Internet Explorer :

      <link rel="icon" type="image/png" href="/img/logo.png" />
    

      <link rel="icon" type="image/jpeg" href="/img/logo.jpg" />
    

Une approche initiée Microsoft utilisant des formats d'images non standards, fonctionnant (forcément) avec Microsoft Internet Explorer et aussi avec d'autres navigateurs qui ont décidé d'offrir cette compatibilité par égard pour les utilisateurs :

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

L'attribut type="image/x-icon" peut également être omis mais c'est encore plus à éviter :

      <link rel="shortcut icon" href="/img/favicon.ico" />
    

Les icones de pages doivent être réalisées à l'une des tailles suivantes :

• 16x16 pixels
• 32x32 pixels

Mozilla supporte une très grande variété de formats d'image : PNG, MNG, JPEG, GIF, XBM, BMP, ICO.

Microsoft Internet Explorer supporte uniquement le format d'image ICO.

Comment faire apparaître une icone de page (la mauvaise manière)

Placer une image favicon.ico à la base d'un site, et elle sera automatiquement repérée et affichée par Microsoft Internet Explorer. Ceci est une mauvaise approche car :

• cette pratique s'apparente à des attaques de déni de service, ou Denial of Service (DoS) ;
• en recherchant systématiquement favicon.ico (et en ne la trouvant généralement pas), les navigateurs remplissent les logs des serveurs web avec des requêtes inutiles, ce qui complique la tâche des webmestres.

Exemples

Les sites suivants utilisent correctement des icones de pages d'une manière respectueuse des standards :

• Mozilla.org, site pour le développement du navigateur Mozilla
• Savannah, référentiel de projets libres
• LinuxFr, portail francophone de nouvelles sur les logiciels libres et les sujets connexes

Références

Bugzilla bug 32087 : [RFE] favicon implementation (customizing bookmark icons)

Microsoft reference : How to add a shortcut icon to a web page