Ajout d’un favicon à une page HTML statique
J’ai quelques 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 (c’est 16x16px et il est assis dans le même répertoire que le fichier HTML, il s’appelle favicon.ico) comme l’icône “tab” comme ils étaient. J’ai lu sur Wikipedia et examiné quelques didacticiels et mis en œuvre les éléments suivants:
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 pouvais pas le faire fonctionner localement bien que le code vérifie qu’il ne fonctionnera vraiment correctement qu’une fois que le serveur a commencé à servir le site. Il suffit d’essayer de le mettre sur le serveur et d’actualiser votre cache et cela devrait fonctionner correctement.
Vous pouvez créer un fichier .png 16×16, puis utiliser l’un des extraits suivants entre les balises de vos documents HTML statiques:
La plupart des navigateurs vont chercher favicon.ico dans le répertoire racine du site sans avoir à être averti. mais ils ne le mettent pas toujours à jour avec un nouveau.
Cependant, je vais généralement pour le second de vos exemples:
En fait, pour que votre favicon fonctionne dans tous les navigateurs, vous devez disposer de plus de 10 images dans les formats et les formats appropriés.
J’ai créé une application ( faviconit.com ) afin que les utilisateurs n’aient pas à créer toutes ces images et les balises correctes à la main.
J’espère que vous aimez.
Ce qui suit fonctionne pour moi …
Convertissez votre fichier image en chaîne Base64 avec un outil comme celui-ci , puis remplacez le YourBase64SsortingngHere dans l’extrait de YourBase64SsortingngHere ci-dessous par votre chaîne et placez la ligne dans votre section head HTML:
Cela fonctionnera à 100% dans les navigateurs.
Si le favicon est une image de type png, cela 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.
Comme recommandé par W3.org , vous pouvez utiliser l’ rel pour y parvenir.
Exemple:
...
Je connais son ancien poste mais je poste toujours pour quelqu’un comme moi. Cela a fonctionné pour moi
Placez votre icône favicon sur le répertoire racine.
comme une note supplémentaire qui peut aider quelqu’un un jour.
Vous ne pouvez rien renvoyer à la page avant:
Hello
ne chargera pas ico
Hello
fonctionne bien
Cela a fonctionné pour moi
J’ai utilisé convert -resize 16x16 img.png favicon.ico (sous linux konsole) pour convertir mon image, et append à mon en-tête et tout fonctionne parfaitement.
Si vous ajoutez le favicon dans le dossier racine / images avec le nom favicon.ico, le navigateur comprendra automatiquement et le recevra comme favicon.I a testé et a fonctionné. votre lien doit être http://www.website.com/images/favicon.ico
Pour plus d’informations, regardez cette réponse:
Devez-vous inclure ?
Essayez d’utiliser le
Notez que FF ne parvient pas à charger une icône avec une // URL redondante telle que /img//favicon.png . Testé sur FF 53. Chrome est OK.