Comment ajouter un favicon à votre site (pas à pas)
Quatre étapes, de l'onglet vide à une identité visuelle au pixel près. Fonctionne sur n'importe quel site HTML, CMS ou framework.
Ce dont vous avez besoin d'abord
Un seul favicon 16x16 ne suffit plus. Les navigateurs modernes, iOS, Android et Windows réclament chacun des tailles et des formats différents. Avant d'ajouter la moindre balise, assurez-vous d'avoir un jeu d'icônes complet.
Le jeu minimum
| Fichier | Taille | Qui en a besoin |
|---|---|---|
| favicon.ico | multirésolution | Les navigateurs et robots d'exploration qui demandent /favicon.ico par défaut |
| favicon-16x16.png | 16x16 | Onglets du navigateur et barre d'adresse |
| favicon-32x32.png | 32x32 | Onglets Retina, favoris et raccourcis du bureau |
| apple-touch-icon.png | 180x180 | Écrans d'accueil iOS |
| Icône du manifest | 192x192 | Écrans d'accueil Android, référencée depuis le web manifest |
À quoi ressemblent vraiment ces tailles
Les quatre étapes
- 1
Générez les fichiers de votre favicon
Laissez un générateur produire toutes les tailles, le sprite .ico et un manifest.json bien réglé en une seule passe. Déposez un logo, une capture d'écran ou même un emoji et téléchargez le kit complet. Vous débutez avec la création d'icônes ? Commencez par comment créer un favicon.
- 2
Ajoutez les fichiers à la racine de votre site
Copiez les fichiers téléchargés dans le répertoire qui sert la racine de votre domaine. Sur un site statique, c'est le dossier racine ; sur la plupart des frameworks, c'est le répertoire public/. Le but est que https://votresite.com/favicon.ico se résolve directement.
- 3
Ajoutez les balises link à votre <head>
Référencez chaque icône avec des balises <link> à l'intérieur du <head> du document (icon, apple-touch-icon et manifest) sur chaque page, ce qui signifie généralement un template ou un layout partagé.
- 4
Vérifiez que ça marche
Déployez, puis faites un hard refresh et regardez l'onglet. La vérification la plus fiable est une analyse automatisée qui confirme que chaque balise se résout et signale toute icône de plateforme manquante.
Les balises link
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Collez ceci à l'intérieur de l'élément <head> de chaque page. Le lien du manifest est ce qui vous donne les invites d'installation et les icônes sur l'écran d'accueil. Voyez ce qu'est manifest.json.
Raccourcis spécifiques à chaque plateforme
Vous utilisez un framework ou un CMS ? Plusieurs d'entre eux gèrent les balises du head à votre place, avec leurs propres conventions. Les guides de plateforme couvrent Next.js, React, WordPress et Shopify.
Erreurs courantes
| Erreur | Solution |
|---|---|
| Cache du navigateur | Les anciens favicons s'accrochent. Faites un hard refresh, ou ajoutez ?v=2 au href du link. |
| Mauvais chemin | La barre oblique initiale compte. /favicon.ico est servi depuis la racine, pas depuis le dossier courant. |
| apple-touch-icon manquant | Sans lui, les écrans d'accueil iOS se rabattent sur une capture d'écran floue. |
Questions fréquentes
Où placer le fichier du favicon ?
Placez favicon.ico et les autres fichiers d'icône dans le répertoire racine de votre site (ou le dossier public/ sur la plupart des frameworks) pour qu'ils soient servis depuis la racine du domaine, par exemple https://example.com/favicon.ico.
Ai-je encore besoin d'un fichier favicon.ico ?
Oui. Les navigateurs et les robots d'exploration demandent toujours /favicon.ico par défaut, donc livrer un .ico multirésolution à côté d'icônes modernes PNG et SVG vous offre la plus large compatibilité possible.
Pourquoi mon favicon ne s'affiche-t-il pas après l'avoir ajouté ?
Les navigateurs mettent les favicons en cache de façon agressive. Faites un hard refresh, ajoutez une chaîne de version comme ?v=2 au lien et confirmez que le chemin du fichier est correct. Consultez notre guide de dépannage de favicon pour chaque cause.