Favicon du logo : tailles pour navigateur et Google
Le favicon est le petit symbole de votre site. Utilisez le symbole du logo plutôt que le nom entier réduit. Onglets, Google et applications web installées ont des exigences différentes : testez le contexte réel.
Sur cette page

Quel fichier pour quel usage ?
| Usage | Fichier | Taille / contrôle |
|---|---|---|
| Onglet du navigateur | SVG / ICO / PNG | 16, 32 px |
| Google Search | PNG / ICO | >48×48 px; PNG96 |
| Écran d’accueil Apple | apple-touch-icon.png | 180×180 px |
| PWA installée | PNG + site.webmanifest | 192×192, 512×512 px |
Pour Google, choisissez un format accepté comme PNG ou ICO : SVG ne figure pas dans sa liste actuelle. L’icône carrée doit mesurer au moins 8×8 px ; Google recommande plus de 48×48, donc 96×96 reste utile. Liez-la depuis l’accueil, conservez une URL stable et autorisez Googlebot à accéder à la page et Googlebot-Image à l’image. Respecter les consignes ne garantit pas l’affichage.
Créer et publier l’icône
- Partez d’un symbole reconnaissable ; retirez slogan et détails fins.
- Vérifiez la forme à 16 et 32 px sur fond clair et sombre.
- Exportez depuis le vecteur. Choisissez un dossier de favicons du pack LogoSaga et conservez les chemins du manifeste.
- Ajoutez les liens ci-dessous seulement pour des fichiers présents sur le serveur. Le PNG96 est un export supplémentaire pour la recherche.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
Un SVG peut utiliser prefers-color-scheme ; testez toutefois les navigateurs et versions visés. Un symbole lisible sur les deux fonds constitue un bon recours. Les icônes Apple touch et du manifeste sont des fichiers distincts, pas des variantes automatiques du SVG du navigateur.
Pourquoi l’icône manque-t-elle ?
Ouvrez directement son URL : elle doit renvoyer une image, sans erreur ni connexion. Vérifiez les liens de l’accueil et l’accès des robots. Pour le navigateur, rechargez ou videz le cache local des icônes. Pour Google, gardez l’URL stable et demandez l’indexation de l’accueil dans Search Console ; le traitement peut prendre des jours ou des semaines. Renommer souvent ne règle pas la recherche.
Guides pratiques complémentaires: Tester son logo : 10 contrôles avant le lancement · Logo Google Business Profile : taille et mise en ligne
Créez un logo avec une favicon assortieQuestions fréquentes
Quelle taille doit faire une favicon ?
Pour Google, choisissez un format accepté comme PNG ou ICO : SVG ne figure pas dans sa liste actuelle. L’icône carrée doit mesurer au moins 8×8 px ; Google recommande plus de 48×48, donc 96×96 reste utile. Liez-la depuis l’accueil, conservez une URL stable et autorisez Googlebot à accéder à la page et Googlebot-Image à l’image. Respecter les consignes ne garantit pas l’affichage.
Quel format pour une favicon — SVG, PNG ou ICO ?
Le favicon est le petit symbole de votre site. Utilisez le symbole du logo plutôt que le nom entier réduit. Onglets, Google et applications web installées ont des exigences différentes : testez le contexte réel.
Une favicon peut-elle changer en mode sombre ?
Un SVG peut utiliser prefers-color-scheme ; testez toutefois les navigateurs et versions visés. Un symbole lisible sur les deux fonds constitue un bon recours. Les icônes Apple touch et du manifeste sont des fichiers distincts, pas des variantes automatiques du SVG du navigateur.
Pourquoi ma favicon ne s'affiche ou ne se met pas à jour ?
Ouvrez directement son URL : elle doit renvoyer une image, sans erreur ni connexion. Vérifiez les liens de l’accueil et l’accès des robots. Pour le navigateur, rechargez ou videz le cache local des icônes. Pour Google, gardez l’URL stable et demandez l’indexation de l’accueil dans Search Console ; le traitement peut prendre des jours ou des semaines. Renommer souvent ne règle pas la recherche.
Sources
- Define a favicon to show in search results — Google Search Central
- Web app manifest: icons — MDN Web Docs
- Configuring Web Applications — Apple Developer