Question Ajouter une favicon à une page HTML statique


j'en ai quelques uns static pages qui ne sont que du HTML pur, que nous affichons lorsque le serveur tombe en panne. Comment puis-je mettre un favicon que j'ai fait (il est 16x16px et il est assis dans le même répertoire que le fichier HTML, il est appelé favicon.ico) comme l'icône "tab" pour ainsi dire. J'ai lu sur Wikipedia et regardé quelques tutoriels et j'ai implémenté ce qui suit:

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

Mais il ne veut toujours pas travailler. J'utilise Chrome pour tester les sites. Selon Wikipedia .ico est le meilleur format de photo qui fonctionne sur tous les types de navigateurs.

Mettre à jour

Je ne pourrais pas obtenir ce travail localement bien que le code vérifie qu'il fonctionnera vraiment correctement une fois que le serveur a commencé à servir le site. Essayez simplement de le pousser sur le serveur et rafraîchissez votre cache, et cela devrait fonctionner correctement.


423
2018-03-30 13:17


origine


Réponses:


Vous pouvez faire un 16x16 .png et ensuite utiliser l'un des extraits suivants entre le <head> balises de vos documents HTML statiques:

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

629
2018-03-30 13:19



La plupart des navigateurs vont ramasser favicon.ico à partir du répertoire racine du site sans avoir besoin d'être informé; mais ils ne le mettent pas toujours à jour avec un nouveau tout de suite.

Cependant, je vais habituellement pour le deuxième de vos exemples:

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

161
2018-03-30 13:21



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

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

J'espère que vous aimez.


89
2018-01-16 14:02



Les travaux suivants pour moi ...

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

51
2018-04-21 02:12



Convertissez votre fichier image en chaîne Base64 avec un outil comme ce puis remplacez le YourBase64StringHere placeholder dans l'extrait ci-dessous avec votre chaîne et placez la ligne dans votre section head HTML:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

Cela fonctionnera 100% dans les navigateurs.


28
2018-01-09 21:31



Si le favicon est une image de type png, il ne fonctionnera pas dans les anciennes versions de Chrome. Cependant, cela fonctionnera très bien dans FireFox. De plus, n'oubliez pas de vider le cache de votre navigateur lorsque vous travaillez sur de telles choses. Souvent, le code est correct, mais le cache est le véritable coupable.


14
2017-07-31 07:38



Comme recommandé par W3.org, vous pouvez utiliser le rel attribut pour y parvenir.

Exemple:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

12
2017-12-26 08:30



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

6
2017-07-06 14:33