Nécessaire d'ajouter une balise de lien pour favicon.ico?

153

Existe-t-il des navigateurs modernes qui ne détectent pas automatiquement le favicon.ico? Y a-t-il une raison d'ajouter la balise de lien pour favicon.ico?

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

Je suppose qu'il n'est nécessaire de l'inclure dans le document HTML que si vous décidez d'utiliser GIF ou PNG ...

html favicon html-head utilisateur1087110
la source

Je n'ai jamais vu qu'aucun navigateur en avait besoin. Avez-vous des exemples?

shark555

Je peux nommer certains navigateurs qui ont des paramètres de préférence pour rechercher ou non favicon.icoautomatiquement. Donc, si vous voulez être sûr que votre icône apparaît, il vaut mieux inclure un lien dans votre HTML. À propos, les fichiers .png sont généralement plus petits que les fichiers .ico comparables.

Mr Lister

S'il vous plaît nommer quelques Mr Lister :) Pas de shark555, je ne peux en nommer aucun ...

user1087110

5

Firefox (et d'autres navigateurs basés sur Gecko comme SeaMonkey) dispose de plusieurs paramètres pour affiner son comportement. browser.chrome.faviconsmis à true cherchera favicon.ico à la racine; si false, il ne chargera une icône que si spécifié dans la page HTML. Voir kb.mozillazine.org/Browser.chrome.favicons et les pages associées.

Mr Lister

Possible duplication de Doit-on inclure <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?

Dan Dascalescu

253

Pour choisir un emplacement ou un type de fichier différent (par exemple PNG ou SVG ) pour le favicon:
Une des raisons peut être que vous voulez avoir l'icône dans un emplacement spécifique, peut-être dans le dossier images ou quelque chose de similaire. Par exemple:

<link rel="icon" href="_/img/favicon.png">

Cet emplacement différent peut même être un CDN, tout comme SO semble le faire <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

Pour en savoir plus sur l'utilisation d'autres types de fichiers comme PNG, consultez cette question .

À des fins de contournement du cache :
ajoutez une chaîne de requête au chemin à des fins de contournement du cache:

<link rel="icon" href="/favicon.ico?v=1.1">

Les favicons sont très fortement mis en cache et c'est un excellent moyen d'assurer un rafraîchissement.

Note de bas de page sur l'emplacement par défaut:
En ce qui concerne le premier élément de la question: tous les navigateurs modernes détecteraient un favicon à l'emplacement par défaut, ce n'est donc pas une raison d'utiliser un linkpour cela.

Note de bas de page concernant rel="icon":
Comme l'indique la réponse de @ Semanino , l'utilisation rel="shortcut icon"est une technique ancienne qui était requise par les anciennes versions d'Internet Explorer, mais qui dans la plupart des cas peut être remplacée par l' rel="icon"instruction plus correcte . L'article @Semanino basé sur des liens appropriés vers la spécification appropriée qui montre une relvaleur de shortcutn'est pas une option valide.

Jeroen
la source

Cela devrait-il aller dans le <head>tag?

Max Williams

1

@MaxWilliams Oui. (Voir «Éléments parents autorisés» dans la documentation MDN ou «Contextes» dans la spécification W3 ).

Jeroen

1

Nous sommes en 2016 - et Chrome toujours (ou encore?) Ne reconnaît pas le favicon.ico par défaut à la racine si vous spécifiez également d'autres icônes ...

Sebastian G. Marinescu

52

Veuillez noter que la spécification HTML5 du W3C et WhatWG normalisent

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

Notez la valeur de l'attribut "rel"!

La valeur shortcut iconde l' relattribut est une très ancienne extension spécifique à Internet Explorer et obsolète .

Veuillez donc envisager de ne plus l'utiliser et de mettre à jour vos fichiers afin qu'ils soient conformes aux normes et s'affichent correctement dans tous les navigateurs.

Vous voudrez peut-être également jeter un coup d'œil à cet excellent article: rel = "icône de raccourci" considéré comme dangereux

Semanino
la source

1

Pas tout à fait "obsolète" (il n'a jamais fait partie d'aucune spécification). Toutefois, la spécification HTML5 indique: "Pour des raisons historiques, le mot-clé icon peut être précédé du mot-clé" raccourci ". Si le mot-clé" raccourci "est présent, il doit être placé juste avant le mot-clé icon et les deux mots-clés doivent être séparés par un seul caractère U + 0020 SPACE. " Notez également que "Il n'y a pas de type par défaut pour les ressources données par le mot clé icon."

DocRoot

12

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

Tout dépend du format d'image que vous aimez utiliser!
si vous avez une icône de votre site Web, ce sera bien mieux pour UX!

démo

afficher le logo dans l'onglet du navigateur

xgqfrms
la source

iconhandbook.co.uk/reference/examples/favicons links: mathiasbynens.be/notes/rel-shortcut-icon#comments links: html.spec.whatwg.org/multipage/semantics.html#rel-icon links:

xgqfrms

UX n'a rien à voir avec cela.

paddotk le

@paddotk ce que je veux dire, c'est que l'utilisateur peut facilement dire quel onglet appartient au site Web cible lorsqu'il ouvre des onglets multiples dans le navigateur s'il y a une icône de favicon dans l'onglet.

xgqfrms

1

Nous pouvons ajouter pour tous les appareils avec une taille spécifique à la plate-forme

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">

Abhilash
la source

0

En fin de compte, tous les navigateurs ne chercheront pas réellement votre fichier favicon.ico . Certains navigateurs permettent aux utilisateurs de choisir s'il doit ou non apparaître automatiquement. Par conséquent, afin de vous assurer qu'il apparaîtra et sera toujours examiné, vous devez le définir.

animuson
la source

6

Merci pour ton commentaire animuson. Pouvez-vous nommer des navigateurs qui ne s'afficheront pas automatiquement?

user1087110

11

@ user1087110: Je n'en connais pas par-dessus la tête, et honnêtement qui s'en soucie. Le fait est que vous ne pouvez pas supposer que ce sera le cas et que vous devez tenir compte de ceux qui ne le feront pas.

animuson

Comme ce n'est plus pertinent, vous pouvez supprimer votre réponse pour nettoyer la page.

poulets

Nécessaire d'ajouter une balise de lien pour favicon.ico?

Réponses:

démo