Ajout d'un favicon à une page HTML statique
J'ai quelques pages statiques 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 créé (il mesure 16 x 16 pixels et se trouve dans le même répertoire que le fichier HTML; il s'appelle favicon.ico) sous la forme de l'icône "onglet"? J'ai lu sur Wikipedia, consulté quelques tutoriels et mis en œuvre les éléments suivants:
<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 d'image compatible avec tous les types de navigateurs.
Mise à jour
Je ne pouvais pas obtenir que cela fonctionne localement, bien que le code vérifie qu'il ne fonctionnera vraiment correctement que lorsque le serveur aura commencé à servir le site. Essayez simplement de le placer sur le serveur et d'actualiser votre cache. Tout devrait bien fonctionner.
Vous pouvez créer un fichier .png au format 16x16, puis utiliser l'un des extraits de code suivants entre les balises <head> 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"/>
La plupart des navigateurs vont récupérer favicon.ico à partir du répertoire racine du site sans avoir à le savoir. mais ils ne le mettent pas toujours à jour avec un nouveau.
Cependant, je choisis généralement 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 ) afin que les gens ne soient pas obligés de créer toutes ces images et les balises appropriées à la main.
J'espère que vous aimez.
Ce qui suit fonctionne pour moi ...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Convertissez votre fichier image en chaîne Base64 avec un outil tel que this , puis remplacez l’espace réservé YourBase64StringHere dans l’extrait ci-dessous par votre chaîne et placez la ligne dans votre section HTML:
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
Cela fonctionnera à 100% dans les navigateurs.
Syntaxe d'utilisation: .ico, .gif, .png, .svg
Ce tableau montre comment utiliser favicon dans les principaux navigateurs. L'implémentation standard utilise un élément de lien avec un attribut rel dans la section du document pour spécifier le format de fichier, le nom du fichier et son emplacement.
Notez que la plupart des navigateurs donneront la priorité à un fichier favicon.ico situé à la racine du site Web (donc ignorant toute balise de lien d’icône).
Edge Firefox Chrome I.E. Opera Safari
---------------------------------------- ------ --------- -------- ------ ------- --------
<link rel="shortcut icon" Yes Yes Yes Yes Yes Yes
href="http://example.com/myicon.ico">
<link rel="icon" Yes Yes Yes 9 Yes Yes
type="image/vnd.Microsoft.icon"
href="http://example.com/image.ico">
<link rel="icon" type="image/x-icon" Yes Yes Yes 9 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" type="image/gif" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.gif">
<link rel="icon" type="image/png" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.png">
<link rel="icon" type="image/svg+xml" Yes Yes Yes Yes Yes Yes
href="http://example.com/image.svg">
Prise en charge du format de fichier
Le tableau suivant illustre la prise en charge du format de fichier image pour le paramètre favicon:
Animated
Browser ICO PNG GIF GIF's JPEG APNG SVG
------------------- ----- ------ ------ ------- ------ ------ ------
Edge Yes Yes Yes No ? ? ?
Firefox 1.0 1.0 1.0 Yes Yes 3.0 41.0
Google Chrome Yes Yes 4 No 4 No No
Internet Explorer 5.0 11.0 11.0 No No No No
Safari Yes 4 4 No 4 No No
Opera 7.0 7.0 7.0 7.0 7.0 9.5 44.0
Mise en oeuvre du navigateur
Le tableau ci-dessous illustre les différentes zones du navigateur où les favicon sont affichés:
Address Address bar 'Links' Drag to
Browser Bar drop-down bar Bookmarks Tabs desktop
------------------- ------------ ----------- --------- ----------- ------ ---------
Edge No Yes Yes Yes Yes Yes
Firefox until v12 Yes Yes Yes Yes Yes
Google Chrome No No Yes Yes 1.0 No
Internet Explorer 7.0 No 5.0 5.0 7.0 5.0
Safari Yes Yes No Yes 12 No
Opera v7–12: Yes No 7.0 7.0 7.0 7.0
> v14: No
Les fichiers d'icône peuvent être 16 × 16 , 32 × 32 , 48 × 48 , ou 64 × 64 pixels en taille et 8 bits , 24 bits , ou 32 bits en profondeur de couleur.
Bien que les informations ci-dessus soient généralement correctes, il existe certaines variations/exceptions dans certaines situations.
Voir l'article complet à l'adresse la source sur Wikipedia.
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. En outre, n'oubliez pas d'effacer le cache de votre navigateur lorsque vous travaillez sur de telles tâches. Bien des fois, le code suffit, mais le 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/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
Cela a fonctionné pour moi
<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 post 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' />
placez votre icone de favicon sur le répertoire racine.
comme une note supplémentaire qui peut aider quelqu'un un jour.
Vous ne pouvez rien rappeler à la page avant:
Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
ne chargera pas ico
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello
fonctionne bien
J'ai utilisé convert -resize 16x16 img.png favicon.ico (sur Linux Linux) 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 racine/images avec le nom favicon.ico, le navigateur le comprendra automatiquement et l'obtiendra 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:
Devez-vous inclure <link rel = "icon" href = "favicon.ico" type = "image/x-icon" />?
Notez que si votre site fonctionne en tant que subfolder c'est-à-dire:
http://localhost/MySite/
Vous devrez en tenir compte. Si vous le faites à partir d'un ASP.NETapp, il vous suffit d'ajouter un ~ au début de l'URL:
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
Essayez d'utiliser le <link rel="icon" type="image/ico" href="images/favi.ico"/>
Notez que FF ne parvient pas à charger une icône avec un // redondant dans l'URL comme /img//favicon.png. Testé sur FF 53. Chrome est OK.