Ajouter un favicon à une page HTML statique
j'ai quelques static pages qui sont juste du pur HTML, que nous affichons quand le serveur tombe. 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 s'appelle favicon.ico) en tant que "onglet" icône. J'ai lu sur Wikipedia et j'ai 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 pic qui fonctionne sur tous les types de navigateurs.
mise à Jour
Je n'ai pas pu obtenir que cela fonctionne localement bien que le code vérifie qu'il ne fonctionnera correctement qu'une fois que le serveur a commencé à servir le site. Juste essayer de pousser jusqu'au serveur et rafraichir votre cache et qu'il devrait fonctionner correctement.
15 réponses
vous pouvez faire un 16x16 .png et ensuite utiliser un des snippets suivants entre les balises <head> de vos documents statiques HTML:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
la plupart des navigateurs récupèrent favicon.ico du répertoire racine du site sans avoir besoin d'être informés, 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' />
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 ) donc les gens n'ont pas à créer toutes ces images et les étiquettes correctes à la main.
J'espère que ça te plaira.
les travaux suivants pour moi...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Convertissez votre fichier image en chaîne Base64 avec un outil comme ce , puis remplacez le paramètre YourBase64StringHere dans l'extrait ci-dessous avec votre chaîne et mettez la ligne dans votre section HTML head:
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
cela fonctionnera à 100% dans les navigateurs.
si le favicon est une image de type png, il ne fonctionnera pas dans les anciennes versions de Chrome. Mais ça marchera très bien avec FireFox. De plus, n'oubliez pas de vider le cache de votre navigateur lorsque vous travaillez sur de telles choses. Souvent, le code est très bien, mais cache est le vrai coupable.
comme recommandé par W3.org , vous pouvez utiliser l'attribut rel pour y parvenir.
exemple:
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
<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"/>
je connais son poste plus ancien, mais je poste toujours pour quelqu'un comme moi. Cela a fonctionné pour moi
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
mettez votre icône favicon dans le répertoire racine..
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
cela a fonctionné pour moi
comme note supplémentaire qui pourrait aider quelqu'un un jour.
Vous ne pouvez pas l'écho de quelque chose à la page d'avant:
Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
ne prendra pas en charge ico
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello
fonctionne très bien
j'ai utilisé convert -resize 16x16 img.png favicon.ico (sur linux konsole) pour convertir mon image, et
ajouter <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> à mon en-tête et tout fonctionne parfaitement.
si vous ajoutez le favicon dans le dossier root/images avec le nom favicon.ico navigateur va automatiquement comprendre et comme favicon.J'ai testé et travaillé. votre lien doit être www.website.com/images/favicon.ico
pour plus d'informations, regardez cette réponse:
essayez d'utiliser le <link rel="icon" type="image/ico" href="images/favi.ico"/>
notez que FF ne charge pas une icône avec un // redondant dans L'URL comme /img//favicon.png . Testé sur FF 53. Chrome est OK.