Ajout d'un favicon à une page HTML statique

Question

J'ai quelques pages statiques qui sont juste du pur HTML, que nous affichons quand le serveur tombe en panne, comment puis-je mettre un favicon que j'ai fait (c'est 16x16px et il se trouve dans le même répertoire que le fichier html, il s'appelle favicon.ico) comme l'icône "tab" pour ainsi dire. J'ai suivi les règles que j'ai lues, mais sans succès. J'ai lu un message qui suggérait ce qui suit comme lien dans la section d'en-tête des pages.

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

Mais cela ne veut toujours pas fonctionner. J'utilise Chrome pour tester les sites et quand je rafraîchis, rien. Cool, c'est une question simple, je suis resté bloqué quand ça ne marchait pas. Selon Wikipedia, le format .ico est le meilleur format d'image qui fonctionne sur tous les types de navigateurs.

Si vous avez des suggestions, merci d'avance :)

Answer 1

vous pouvez faire un png 16x16 et utiliser

<link rel="shortcut icon" type="image/png" href="http://stackoverflow.com/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://eg.com/favicon.png"/>

Answer 2

La plupart des navigateurs vont chercher favicon.ico dans le répertoire racine du site sans qu'il soit nécessaire de le leur dire ; mais ils ne le mettent pas toujours à jour avec un nouveau fichier immédiatement.

Cependant, j'opte généralement pour le second de vos exemples :

<link rel='shortcut icon' type='image/x-icon' href='http://stackoverflow.com/favicon.ico' />

Answer 3

En fait, pour que votre favicon fonctionne dans tous les navigateurs, vous devez avoir plus de 10 images dans les tailles et formats corrects.

J'ai créé une application ( faviconit.com ) afin que les gens n'aient pas à créer toutes ces images et les balises correctes à la main.

J'espère que vous l'apprécierez.

Answer 4

Ce qui suit fonctionne pour moi...

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

Answer 5

Si le favicon est une image de type png, il ne fonctionnera pas dans les anciennes versions de Chrome. En revanche, elle fonctionnera très bien dans FireFox. N'oubliez pas non plus de vider le cache de votre navigateur lorsque vous travaillez sur ce genre de choses. Il arrive souvent que le code soit correct, mais que le cache soit le véritable coupable.