Favicons

Un favicon (favorite icon) est une petite icône, définie par le concepteur d'une page internet, qui va apparaître à différents endroits du navigateur, par exemple :

Un favicon peut-être une image fixe ou animée.

1 - Réalisation d'un favicon

Les favicons peuvent être réalisés en différents formats :
De nombreux sites sur internet proposent de transformer des images en favicon. Par exemple :
Il est également possible d'utiliser un logiciel tel que imagemagick pour réaliser certaines de ces transformations, en adaptant le format de l'image et sa résolution (16x16 ou 32x32).
convert -resize 32x32 image.jpeg favicon.png
convert -resize 32x32 image_animée.gif favicon.gif

2 - Prise en compte du favicon

La méthode recommandée pour faire prendre en compte un favicon est d'introduire un lien entre les balises <head> et </head> de la page html. Du fait que tous les navigateurs ne reconnaissent pas tous les formats, une solution est d'ajouter une ligne par format, en choisissant l'ordre des formats de façon que le format "le plus intéressant" soit le dernier dans la liste.

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

Finalement, ces trois lignes sont introduites dans le "header" de la page:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Exemple de favicons</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="icon" type="image/gif" href="animated_favicon.gif">
</head>
<body> </body>
</html>

Mettre les favicons à la racine du site est (a été?) également recommandé.

3 - Tests

Les tests doivent s'effectuer avec l'affichage en mode serveur (local ou distant), l'affichage en mode direct du type file://chemin/vers/fichier ne permet pas d'afficher les flavicons.

J'ai obtenu les résultats suivants en fonction des navigateurs (et de leurs versions sans doute):

Dans certaines conditions, les favicons n'apparaissent pas au premier essai. Une solution peut-être :