# ,

> favicon : les icônes de site web

La « favicon« , c’est l’icône affichée dans l’onglet du navigateur, et dans les favoris.

Il y a actuellement 2 formats possibles : le .ico à l’ancienne, et un autre format plus libre pour les navigateurs actuels.

Vous pouvez placer les images en question où vous voulez dans votre site, il faut juste les indiquer entre <head>et </head> de vos pages html :

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

Il y a donc 2 fichiers distincts :

  • un fichier .ico en 16×16 pixels
  • un fichier plus libre .png avec transparence ou pas, format 32×32 pixels

Le fichier .ico est un format particulier, qui peut éventuellement embarquer plusieurs formats d’image dans un seul fichier. C’est aussi le format utilisé pour les icônes d’applications Windows.

Vous devrez donc fabriquer votre png en 32 x32, et le convertir en .ico sur un site comme celui-ci.

Contentez-vous de l’étape 1, et passer directement à l’étape 4 où vous choisissez « Favicon icon for your website« .
Ensuite faites « Convert ICO » et téléchargez le fichier.
Vous n’avez plus qu’à le placer au bon endroit dans le dossier de votre site.

L’aperçu Windows des favicons est un peu capricieux, en cas de modif de votre fichier .ico il se peut que vous continuiez à voir l’ancienne icône dans l’explorateur Windows… pas d’inquiétude; ça marchera une fois en ligne !

Un favicon en GIF animé ?

Oui c’est possible !
Il suffit d’avoir un gif animé au format 32 x 32 pixels, et d’utiliser la ligne ci-dessous au lieu de celle indiquée plus haut :

<link rel="icon" type="image/gif" href="img/favicon/favicon.gif" />

Il y a juste l’attribut « type » à changer par rapport à la version png.

Pour une bonne compatibilité l’idéal c’est de cumuler ico / png / gif :

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

Si le .gif n’est pas supporté le .png sera pris en compte, et si lui-même pose problème ce sera le .ico.