Devez-vous inclure <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?


205

Je n'ai pas inclus la ligne de code suivante dans ma balise head, mais mon favicon apparaît toujours dans mon navigateur:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Quel est le but de l'inclure?

Réponses:


174

Si vous n'appelez pas le favicon, favicon.icovous pouvez utiliser cette balise pour spécifier le chemin réel (au cas où vous l'auriez dans un images/répertoire). Le navigateur / page Web recherche favicon.icopar défaut dans le répertoire racine.


3
ou si vous n'avez pas le favicon.ico dans le dossier racine mais dans par exemple un dossier d'actifs
Upvote

122

Vous devez en fait faire les deux, afin que tous les navigateurs trouvent l'icône.

Nommer le fichier "favicon.ico" et le mettre à la racine de votre site web est la méthode "déconseillée" par le W3C:

Méthode 2 (déconseillée): placer le favicon à un URI prédéfini
Une deuxième méthode pour spécifier un favicon repose sur l'utilisation d'un URI prédéfini pour identifier l'image: "/ favicon", qui est relative à la racine du serveur. Cette méthode fonctionne car certains navigateurs ont été programmés pour rechercher des favicons utilisant cet URI.
W3C - Comment ajouter un favicon à votre site

Donc, pour couvrir toutes les situations, je le fais toujours en plus de la méthode recommandée pour ajouter un attribut "rel" et le pointer vers le même fichier .ico.


8
Oui, c'est une réponse plus correcte. Il n'y a pas de normes liées à la simple mise favicon.icoà la racine, mais la plupart des navigateurs demanderont automatiquement ce fichier pour des raisons historiques.
Fabrício Matté

10
La bonne raison de le faire n'est pas parce qu'elle fonctionne dans certaines situations , mais parce que la meilleure méthode ne fonctionne pas dans certaines situations
Jasper

2
Curieusement, realFaviconGenerator recommande de ne pas déclarer le favicon dans la tête HTML.
Dan Dascalescu

7
Internet Explorer a inventé le favicon et l'a recherché à la racine. AFAIK, tous les navigateurs le font. C'est pourquoi je recommande de mettre un favicon.ico à la racine, car sinon il retournera 404 et la plupart des systèmes ne mettent pas cela en cache ... donc il continue de le demander. Mettez-y une icône et elle sera correctement mise en cache.
Stijn de Witt

50

Je l'utilise pour deux raisons:

  1. Je peux forcer un rafraîchissement de l'icône en ajoutant un paramètre de requête par exemple ?v=2. comme ça: <link rel="icon" href="https://stackoverflow.com/favicon.ico?v=2" type="image/x-icon" />

  2. Au cas où je devrais spécifier le chemin.


Génial, enfin compris pourquoi cela ne se voyait pas!
whamsicore

Je suis sûr que ce n'était qu'une faute de frappe, mais vous avez un href relatif, ce qui signifie que cela ne fonctionnera pas sauf si toutes vos pages sont au niveau supérieur ou si vous avez un fichier favicon.ico dans chaque sous-répertoire.
Chris Cogdon

Pour info aux lecteurs ultérieurs, le commentaire de Chris Cogdon a été corrigé dans l'édition "9 septembre 16 à 5:05", donc ce n'est plus un problème
Daryn

13

L'ajouter simplement au dossier racine fonctionne à la mode, mais j'ai constaté que si je dois changer le favicon, la mise à jour peut prendre des jours ... même une actualisation du cache ne fait pas l'affaire.


N'oubliez pas de Ctrl-C & Reconstruire.
Jason Glass

9

De nombreuses personnes définissent leur chemin de cookie sur /. Cela entraînera chaque demande de favicon d'envoyer une copie des cookies des sites, au moins en chrome. L'adressage de votre favicon à votre domaine sans cookies devrait corriger cela.

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

Selon la quantité de trafic que vous obtenez, cela peut être la raison la plus pratique pour ajouter le lien.

Informations sur la configuration d'un domaine sans cookies:

http://www.ravelrumba.com/blog/static-cookieless-domain/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.