Créer un favicon

L'idée du favicon vient d'Internet Explorer qui permettait d'associer une icône à un favori (bookmark), d'où il tire son nom. Au départ, comme l'icône associée était une extension .ico placée à la racine du site, c'est devenu le format par défaut que la plupart des fureteurs ont adopté, bien que le PNG et GIF soit acceptés par certains fureteurs.

Pour en créer un de base, il faudra d'abord faire une image de dimension 16 x 16 pixels. Pour y arriver, on peut utiliser Photoshop, GIMP ou un service web gratuit pour créer un favicon (il suffit de fournir une image et on nous renvoie un .ico). Dans mon cas, je procéderai avec GIMP pour Windows (GNU Image Manipulation Program).

• Créer un gabarit de format carré et de taille normale pour pouvoir créer l'image (pour un meilleur contrôle du résultat final, mieux vaut créer un gabarit de format 16 x 16 et l'agrandir en utilisant la touche "+" du clavier numérique)
• Créer l'image
• Réduire le format à 16 x 16 pixels (Menu Image / Échelle et taille de l'image, entrer les dimensions et cliquer sur le bouton Échelle)
• Dans le menu Fichier, sélectionner "Enregistrer sous" et choisir "Windows Icon Format" dans le panneau "Sélectionner le type de fichier (selon l'extension)"
• Enregister
• Déposer le fichier .ico à la racine du site (le fichier peut se trouver n'importe où en réalité, il suffira de spécifier le chemin relatif ou absolu)
• Créer le lien sur les pages comme ceci :
  <link rel="shortcut icon" href="favicon.ico">

L'avantage d'utiliser la balise <link> et le href est de pouvoir spécifier le format du fichier (ico, png ou gif) pour ne pas être restreint au .ico, ce qui laisse plus de possibilités (entre autre l'animation et la transparence) et de pouvoir utiliser une icône différente pour chaque page au besoin.

Si on ne voit pas le favicon après l'avoir placé ou remplacé sur un site, c'est soit que :

• le nom de la ressource comporte une erreur
• il faut vider la cache du fureteur ou dans certains cas le redémarrer
• le format ou les dimensions ne sont pas compatibles
• Internet Explorer reconnait par défaut le favicon s'il est placé à la racine du site et s'il porte le nom favicon.ico
• pour Firefox, l'option des favicons peut être désactivée. Dans ce cas, on peut le réactiver en entrant about:config dans la barre d'adresse, ensuite utiliser le filtre pour trouver la propriété browser.chrome.favicons et changer sa valeur pour true