web-dev-qa-db-fra.com

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

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

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

Mon hypothèse est qu'il n'est nécessaire de l'inclure dans le document HTML que si vous décidez d'utiliser le format GIF ou PNG ...

141
user1087110

Pour choisir un emplacement ou un type de fichier différent (par exemple, PNG ou SVG ) pour le favicon:
L'une des raisons peut être que vous souhaitez que l'icône se trouve dans un emplacement spécifique, peut-être dans le dossier des 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 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 PNG, consultez cette question .

Pour contournement du cache :
Ajoutez une chaîne de requête au chemin d'accès afin de contourner le cache:

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

Les favicons sont très fortement mis en cache et ceci est un excellent moyen d'assurer une actualisation.


Note de bas de page sur l'emplacement par défaut:
En ce qui concerne le premier bit de la question: tous les navigateurs modernes détecteraient un favicon à l'emplacement par défaut, c'est donc et non une raison d'utiliser un link pour ça.


Note de bas de page sur rel="icon":
Comme indiqué par @ Semanino's answer , utiliser rel="shortcut icon" est une ancienne technique qui était requise par les anciennes versions d'Internet Explorer, mais peut dans la plupart des cas être remplacée par la plus correcte. rel="icon" instruction. L'article @Semanino est basé sur ceci relie correctement à la spécification appropriée qui indique une valeur rel de shortcut n'est pas une option valide.

233
Jeroen

Veuillez noter que les spécifications HTML5 du W3C et de WhatWG normalisent

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

Notez la valeur de l'attribut "rel"!

La valeur shortcut icon de l'attribut rel est une très ancienne extension spécifique à Internet Explorer et déconseillée .

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

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

51
Semanino
<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" />

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

10
xgqfrms

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

La ligne du bas n'est pas tous les navigateurs will cherchez réellement votre fichier favicon.ico. Certains navigateurs permettent aux utilisateurs de choisir s’il faut ou non regarder automatiquement. Par conséquent, afin de vous assurer que toujours apparaîtra et que vous le regarderez, vous devez le définir.

0
animuson