Un favicon HTML fiable ne dépend pas d'une balise magique, mais d'un petit ensemble de fichiers accessibles et de liens placés dans le head. Cette procédure couvre les onglets modernes, les clients plus anciens et les raccourcis mobiles sans multiplier les variantes historiques.
Préparer les fichiers
Partez d'un symbole carré et lisible en très petit. Placez favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest et les PNG référencés par le manifeste dans le dossier public servi à la racine du domaine.
Un chemin comme /favicon.svg est absolu par rapport au domaine. Il reste donc correct sur /produits ou /blog/article, contrairement à favicon.svg, qui peut être résolu relativement à la page.
Ajouter les balises dans le head
Déclarez d'abord le SVG avec rel icon et le type image/svg+xml, puis l'ICO avec rel icon et sizes any. Ajoutez rel apple-touch-icon pour iOS et rel manifest pour les installations de l'application web.
Le type doit correspondre au fichier réellement servi. Ne renommez pas un PNG en .ico : le contenu et l'en-tête du fichier doivent être ceux du format ICO.
| Usage | Relation | Fichier |
|---|---|---|
| Navigateur moderne | icon | /favicon.svg |
| Compatibilité | icon | /favicon.ico |
| Écran iOS | apple-touch-icon | /apple-touch-icon.png |
| Application web | manifest | /site.webmanifest |
Déployer sans casser les chemins
Ouvrez chaque URL de fichier directement après le déploiement. La réponse doit être une image ou un manifeste, avec un statut réussi, et non une page HTML de connexion ou de 404 renvoyée avec un statut trompeur.
Si le site vit sous un sous-répertoire, adaptez les chemins ou la base publique. Vérifiez la page finale dans les outils de développement : le navigateur doit demander les URL attendues, sans redirection vers un autre hôte.
Vérifier le résultat
Rechargez la page avec le cache désactivé et inspectez les balises link dans le DOM produit. Testez ensuite un onglet, un favori et, si nécessaire, l'ajout à l'écran d'accueil sur un appareil réel.
Le favicon d'un résultat de recherche suit aussi les règles du moteur et son propre calendrier d'exploration. Une icône visible dans le navigateur ne garantit donc pas une mise à jour immédiate dans les résultats.
Sources primaires
Questions fréquentes
La balise favicon va-t-elle dans body ?
Non. Les éléments link qui décrivent les icônes et le manifeste appartiennent au head du document.
Un favicon.ico à la racine suffit-il ?
Il offre un bon repli, mais ne décrit ni l'icône Apple Touch ni les icônes installables du manifeste. Déclarez les formats adaptés à ces usages.
Pourquoi utiliser un chemin commençant par / ?
Il part de la racine du domaine et évite qu'une page imbriquée cherche le fichier dans son propre dossier.