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
  1. Quel fichier pour quel usage ?
  2. Créer et publier l’icône
  3. Pourquoi l’icône manque-t-elle ?
Le même signe montré à des tailles de favicon, dont une version à la taille d'un onglet de navigateur.
Une favicon est le symbole de votre logo, simplifié pour rester net aux toutes petites tailles.

Quel fichier pour quel usage ?

UsageFichierTaille / contrôle
Onglet du navigateurSVG / ICO / PNG16, 32 px
Google SearchPNG / ICO>48×48 px; PNG96
Écran d’accueil Appleapple-touch-icon.png180×180 px
PWA installéePNG + site.webmanifest192×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

  1. Partez d’un symbole reconnaissable ; retirez slogan et détails fins.
  2. Vérifiez la forme à 16 et 32 px sur fond clair et sombre.
  3. Exportez depuis le vecteur. Choisissez un dossier de favicons du pack LogoSaga et conservez les chemins du manifeste.
  4. Ajoutez les liens ci-dessous seulement pour des fichiers présents sur le serveur. Le PNG96 est un export supplémentaire pour la recherche.
L'étape d'export de l'éditeur LogoSaga montrant favicon.svg inclus avec les fichiers du logo.
Exporter depuis le master vectoriel vous donne une favicon qui correspond exactement au logo.
<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 assortie

Questions 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