web-dev-qa-db-fra.com

Pourquoi mon favicon n'apparaît-il pas?

Ce qui suit est utilisé pour définir le favicon dans mon code html:

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

Cependant, l'icône ne s'affiche pas. Pourquoi?

Remarque:

J'ai confirmé que le fichier est sur le disque au bon chemin.

htmlfavicon
44
Sivajith
  1. Est-ce vraiment un .ico ou est-il simplement nommé ".ico"?
  2. Dans quel navigateur testez-vous?

Le moyen le plus simple d'avoir un favicon est de placer une icône appelée "favicon.ico" dans le dossier racine. Cela fonctionne partout, sans code nécessaire.

Si vous devez l'avoir dans un sous-répertoire, utilisez:

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

Noter la / avant img pour s’assurer qu’il est ancré au dossier racine.

67
Rich Bradshaw

Essaye ça:

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

Les favicons ne fonctionnent que lorsqu'ils sont servis à partir d'un serveur Web, ce qui permet de définir correctement les types MIME pour le contenu servi. Le chargement depuis un fichier local peut ne pas fonctionner avec du chrome. Le chargement depuis un serveur Web mal configuré ne fonctionnera pas.

Les serveurs Web tels que lighthttpd doivent être configurés manuellement pour définir le type mime correctement.

En raison de la probabilité que l’affectation de type MIME ne fonctionne pas dans tous les environnements, je vous suggérerais plutôt d’utiliser un fichier inline codé en base64 ico. Cela se charge également plus rapidement, car cela réduit le nombre de requêtes http envoyées au serveur.

Sur les systèmes POSIX, vous pouvez coder en base64 un fichier avec le fichier base64 commande.

Pour créer une ligne ico codée en base64, utilisez la commande suivante:

$ base64 favicon.ico --wrap 0

Et insérez le résultat dans la ligne:

<link href="data:image/x-icon;base64,HERE" rel="icon" type="image/x-icon" />

Remplacement du mot HERE comme suit:

<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AERpOgA5cCcA7vDtAF6jSABllFcAuuCvAK2trQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjMzMzMzNxARYzMzMzVBEEERYzMzNhERZxRGMzZxQEA2FER3cRSAgTNxgEEREIQBMzFIARERFEEzNhERARFAATMzYREBEAhBMzMzEYEBFEEzMzNhEQQRQDMzMzcRgEAAMzMzNhERgIEzMzMyERgEQDMzMzMRAEgEMzMzMxERAEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />
6
timthelion