Est-il nécessaire d'ajouter une balise de lien pour favicon.ico ?

Question

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 link pour favicon.ico ?

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

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

Answer 1

Pour choisir un un emplacement ou un type de fichier différent (par ex. PNG o SVG ) pour le favicon :
L'une des raisons peut être que vous souhaitez que l'icône se trouve à un endroit 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, comme SO semble le faire avec <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 le PNG, consultez le site suivant cette question .

Pour suppression de la mémoire cache des objectifs :
Ajouter une chaîne de requête au chemin d'accès à des fins d'optimisation du cache :

<link rel="icon" href="http://stackoverflow.com/favicon.ico?v=1.1"> 

Les favicons sont très souvent mis en cache et c'est un excellent moyen d'assurer une mise à jour.

---

Note de bas de page sur l'emplacement par défaut :
En ce qui concerne la première partie de la question : tous les navigateurs modernes détectent un favicon à l'emplacement par défaut. no une raison d'utiliser un link pour cela.

---

Note de bas de page sur rel="icon" :
Comme l'indique Réponse de @Semanino , en utilisant rel="shortcut icon" est une ancienne technique qui était requise par les anciennes versions d'Internet Explorer, mais dans la plupart des cas, elle peut être remplacée par l'option plus correcte rel="icon" l'instruction. L'article @Semanino s'appuie sur correctement les liens vers la spécification appropriée qui montre un rel valeur de shortcut n'est pas une option valable.

Answer 2

A noter que la spécification HTML5 du W3C et le WhatWG normaliser

<link rel="icon" href="http://stackoverflow.com/favicon.ico">

Notez la valeur de l'attribut "rel" !

La valeur shortcut icon pour les rel 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 pouvez également jeter un coup d'œil à cet excellent article : rel="icône de raccourci" considérée comme nuisible

Answer 3

<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 souhaitez utiliser !
si vous avez une icône de votre site web, ce sera beaucoup mieux pour l'UX !

démo

afficher le logo dans l'onglet du navigateur

Answer 4

Mise à jour en octobre 2020 :

Si vous êtes sur cette page en train de vous gratter la tête

Answer 5

Nous pouvons ajouter pour tous les appareils avec une taille spécifique à la plateforme.

<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">