Pour ne pas devoir aller chercher quand j’en ai besoin la bonne syntaxe qu’Internet Explorer réussira à comprendre pour afficher un beau favicon, j’ai décidé de prendre les choses en main et de me faire un petit mémo ici.

Pour Internet Explorer (jusqu’à je ne sais pas quelle version), il faut un favicon au format ICO 16×16 — sinon il fera la tête et n’affichera rien — à appeler avec :

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

Pour les navigateurs récents, un favicon au format PNG 32×32 fera très bien l’affaire. Il faudra l’appeler avec :

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

Il est possible d’utiliser d’autres formats (GIF, JPG, …) pour ces navigateurs. Il faut alors penser à modifier le type="image/xxx" correspondant.

Et pour les appareils iOS, j’ai vu que l’on pouvait augmenter encore la taille du favicon, mais bon là je verrais quand j’en aurais vraiment besoin.

Mise à jour de nov. 2014

L’eau a coulé sous les ponts depuis, et voici deux outils qui me sont utiles voire indispensables :

  • convertico.com qui permet de convertir une image au format ICO ;
  • realfavicongenerator.net qui est l’outil ultime pour, à partir d’une image assez grande, générer tous les différents formats et différentes tailles de favicon nécessaires (standard, Microsoft, iOS, …).