Favicon et Open Graph : guide SEO complet

Comment ajouter et corriger un favicon et une image Open Graph pour améliorer le SEO

Votre site est bien référencé, mais il affiche une icône générique dans les navigateurs ou une mauvaise image lorsqu’une page est partagée sur Facebook, LinkedIn, WhatsApp ou d’autres plateformes ?

Ces deux éléments sont souvent négligés lors de la création d’un site : le favicon et l’image Open Graph. Pourtant, ils participent directement à la présentation de votre marque et à la façon dont votre site est identifié lorsqu’un internaute le rencontre dans différents environnements.

Dans ce guide, nous allons voir comment ajouter un favicon, comment remplacer un favicon qui ne fonctionne pas, comment générer automatiquement plusieurs tailles à partir d’une image, puis comment configurer correctement og:image afin que vos pages soient correctement représentées lorsqu’elles sont partagées sur les réseaux sociaux et les applications de messagerie.

Sommaire

Qu’est-ce qu’un favicon ?
Pourquoi le favicon est important pour le SEO ?
Comment créer un favicon à partir d’une image ?
Créer toutes les tailles avec favicon.io
Comment installer un favicon sur un site HTML
Ajouter un favicon sur WordPress
Ajouter un favicon sur Shopify
Pourquoi mon favicon ne s’affiche pas ?
Qu’est-ce qu’une image Open Graph ?
Comment ajouter une og:image ?
Quelle taille choisir pour une image Open Graph ?
Exemple complet de balises Open Graph
Pourquoi l’image n’apparaît-elle pas correctement sur les réseaux sociaux ?
Checklist SEO finale
FAQ

Qu’est-ce qu’un favicon ?

Le favicon est la petite icône associée à un site web. Elle peut apparaître dans l’onglet du navigateur, les favoris, l’historique, les raccourcis et, dans certains cas, à côté du résultat d’un site dans Google Search.

Il s’agit généralement d’une version simplifiée du logo ou d’un symbole permettant d’identifier rapidement votre marque.

Un favicon peut sembler être un détail graphique, mais il contribue à la reconnaissance de marque et à la cohérence de l’expérience utilisateur.

À retenir : Google peut afficher le favicon d’un site dans ses résultats de recherche, mais cet affichage n’est jamais garanti, même lorsque toutes les recommandations techniques sont respectées.

Pourquoi le favicon est important pour le SEO ?

Il faut être précis : le favicon n’est pas un facteur de classement SEO comparable au contenu, aux liens ou aux performances techniques. Il ne faut donc pas installer un favicon en pensant qu’il fera automatiquement monter une page dans Google.

En revanche, le favicon participe à la présentation de votre site dans les résultats de recherche et à la reconnaissance visuelle de votre marque. Une identité graphique cohérente peut également contribuer à la confiance et à la reconnaissance du site par les utilisateurs.

Google indique qu’un favicon destiné à être utilisé dans ses résultats doit être carré, avec un ratio 1:1. La documentation actuelle recommande également d’utiliser une image de plus de 48 × 48 pixels pour obtenir un rendu adapté à différentes surfaces.

Format Carré, ratio 1:1 Taille minimale Google 8 × 8 px Taille recommandée Plus de 48 × 48 px URL Stable et accessible Crawl Le fichier doit être accessible aux robots Design Reconnaissable et représentatif de la marque

Comment créer un favicon à partir d’une image ?

Si vous possédez déjà un logo, vous n’avez généralement pas besoin de recréer votre identité visuelle. Vous pouvez partir de votre logo PNG, JPG ou d’une autre image adaptée et générer les différentes icônes nécessaires.

Le plus important est de commencer avec une image suffisamment grande et, si possible, carrée.

Votre image doit-elle être carrée ?

Oui, c’est fortement recommandé. Un favicon est affiché dans un espace extrêmement petit. Un logo horizontal contenant beaucoup de texte risque donc de devenir illisible lorsqu’il est réduit à quelques dizaines de pixels.

Exemple

Logo horizontal : difficile à identifier en 16 × 16 px.

Symbole simplifié : beaucoup plus efficace pour une petite icône.

Si votre logo contient votre nom complet, il peut être préférable de créer une version simplifiée utilisant uniquement votre symbole, votre initiale ou un élément graphique facilement identifiable.

Créer toutes les tailles de favicon avec favicon.io

Une solution simple pour générer plusieurs formats est favicon.io .

Le service permet de partir d’une image et de générer automatiquement un ensemble de fichiers adaptés aux différents usages d’un site web.

Vous pouvez notamment obtenir un fichier favicon.ico, des fichiers PNG, une icône Apple Touch Icon, des icônes Android et un fichier manifest.

Étape 1 : préparer votre logo

Préparez votre logo ou votre symbole.
Privilégiez une image carrée.
Utilisez une image suffisamment grande.
Évitez les petits textes difficiles à lire.
Conservez suffisamment d’espace autour du symbole.

Étape 2 : ouvrir le générateur

Rendez-vous sur le convertisseur d’image de favicon.io .

Importez ensuite votre image. L’outil transforme automatiquement votre fichier en plusieurs icônes.

Étape 3 : télécharger le package

Téléchargez le package généré. Selon la configuration proposée, vous trouverez plusieurs fichiers correspondant aux différents usages : navigateur, mobile et applications web.

favicon.ico Favicon classique favicon-16x16.png Petites surfaces favicon-32x32.png Navigateurs et écrans haute densité apple-touch-icon.png Raccourcis iPhone/iPad android-chrome-192x192.png Icône Android / PWA android-chrome-512x512.png Grand format Android / PWA site.webmanifest Métadonnées d’une application web

Les tailles exactes nécessaires dépendent cependant de votre utilisation. Pour un simple site vitrine, vous n’avez pas forcément besoin de mettre en place toutes les fonctionnalités PWA.

Comment installer un favicon sur un site HTML ?

Sur un site HTML classique, les balises du favicon doivent être placées dans la section <head> du document HTML.

Vous pouvez également utiliser un fichier ICO classique :

Google documente explicitement l’utilisation d’une balise <link rel="icon"> dans l’en-tête de la page d’accueil.

Comment ajouter un favicon sur WordPress ?

Sur WordPress, il n’est généralement pas nécessaire de modifier directement le fichier HTML du thème.

Dans de nombreuses installations WordPress récentes, vous pouvez utiliser les options de personnalisation ou d’identité du site pour définir l’icône du site.

Selon votre thème, votre constructeur de pages ou votre configuration, l’emplacement peut être différent.

Attention : évitez d’ajouter plusieurs systèmes différents qui injectent chacun leur propre favicon. Vous risquez de créer des références contradictoires ou inutiles.

Comment ajouter un favicon sur Shopify ?

Sur Shopify, le favicon est généralement configuré à partir des paramètres du thème.

Dans l’éditeur du thème, recherchez les paramètres liés à l’icône du site, au favicon ou à l’identité de la marque.

Si vous modifiez directement le code du thème, vérifiez toujours que votre modification ne sera pas écrasée lors d’un changement ou d’une mise à jour du thème.

Pourquoi mon favicon ne s’affiche pas ?

Un favicon correctement créé peut malgré tout ne pas apparaître immédiatement. Le problème peut venir du navigateur, du cache, du chemin du fichier, de la configuration du site ou du crawl des moteurs de recherche.

1. Le mauvais chemin est utilisé

Vérifiez que l’URL indiquée dans la balise correspond réellement au fichier.

Si le fichier se trouve réellement dans /favicon.ico, cette déclaration ne fonctionnera pas.

2. Le fichier n’est pas accessible

Testez directement l’URL du favicon dans votre navigateur.

Par exemple :

https://www.exemple.com/favicon.ico

Si le serveur renvoie une erreur 404, une redirection problématique ou une autre erreur, corrigez d’abord ce problème.

3. Le navigateur utilise encore l’ancien favicon

Les favicons sont fortement mis en cache. Après une modification, essayez une fenêtre privée ou videz le cache du navigateur.

4. Google n’a pas encore actualisé le favicon

Il faut distinguer l’affichage dans votre navigateur de l’affichage dans Google Search.

Même après une modification correcte, Google doit recrawler votre page et traiter la nouvelle information. Ce processus peut prendre plusieurs jours, voire davantage.

5. Le favicon est bloqué par les règles de crawl

Google indique que la page d’accueil et le fichier favicon doivent pouvoir être explorés par ses robots.

6. Plusieurs favicons se contredisent

Vérifiez le code source de votre page et recherchez :

rel="icon"

Si votre site contient de nombreuses déclarations différentes, identifiez laquelle est réellement utilisée et nettoyez les anciennes références inutiles.

Qu’est-ce qu’une image Open Graph ?

Le Open Graph est un système de métadonnées permettant de contrôler la façon dont une page web est représentée lorsqu’elle est partagée sur différentes plateformes.

C’est notamment la technologie utilisée avec les balises telles que og:title, og:description, og:url et og:image.

L’objectif est simple : lorsqu’une personne partage votre page, vous voulez éviter qu’une plateforme choisisse automatiquement une image aléatoire située dans votre contenu.

Sans Open Graph : la plateforme peut sélectionner une image qui n’est pas celle que vous souhaitez mettre en avant.

Avec Open Graph : vous indiquez précisément quelle image, quel titre et quelle description doivent représenter la page.

Comment ajouter une image og:image à son site ?

Les balises Open Graph doivent être placées dans le <head> de la page.

Voici l’exemple minimum :

Le point important est que og:image doit généralement utiliser une URL absolue accessible publiquement.

Il est donc préférable d’utiliser :

https://www.exemple.com/images/og-image.jpg

plutôt qu’une référence relative :

/images/og-image.jpg

Quelle taille choisir pour une image Open Graph ?

Une dimension couramment utilisée pour les images Open Graph est 1200 × 630 pixels.

Cela correspond à un ratio d’environ 1,91:1, particulièrement pratique pour les aperçus de liens sur de nombreuses plateformes.

Format conseillé 1200 × 630 px Ratio Environ 1,91:1 Format fichier JPG ou PNG selon le contenu URL HTTPS et accessible publiquement Texte Lisible même sur mobile

Il ne faut toutefois pas confondre les recommandations Open Graph avec une exigence universelle imposée par le protocole. Le protocole Open Graph prévoit notamment des informations complémentaires telles que la largeur, la hauteur, le type et le texte alternatif de l’image.

Exemple complet de configuration Open Graph

Voici une configuration plus complète que vous pouvez adapter à une page.

Le protocole Open Graph définit notamment og:image et ses propriétés structurées comme og:image:width, og:image:height et og:image:alt.

Open Graph et SEO : quelle est la différence ?

Une erreur fréquente consiste à considérer Open Graph comme un facteur de classement Google.

Ce n’est pas son rôle principal. Les balises Open Graph servent avant tout à contrôler la présentation de votre URL lorsqu’elle est partagée sur des plateformes compatibles.

Elles restent néanmoins importantes dans une stratégie SEO globale car une page bien présentée peut être plus facilement reconnue, partagée et utilisée dans différents canaux d’acquisition.

Votre stratégie doit donc distinguer :

Title Compréhension et présentation de la page dans les moteurs Meta description Présentation du contenu dans les résultats de recherche Canonical Indiquer l’URL canonique d’une page Favicon Identification visuelle du site og:title Titre lors du partage og:description Description lors du partage og:image Image utilisée dans l’aperçu social

Pourquoi mon image n’apparaît-elle pas correctement sur les réseaux sociaux ?

Vous avez ajouté une image Open Graph mais Facebook, LinkedIn ou une application de messagerie continue d’afficher une ancienne image ?

Plusieurs raisons sont possibles.

Le cache de la plateforme

Les plateformes sociales peuvent conserver une ancienne version des métadonnées de votre page. Modifier votre image ne signifie donc pas nécessairement que l’aperçu changera immédiatement.

L’image n’est pas accessible publiquement

L’image doit être accessible sans connexion utilisateur. Une image située derrière une authentification, une restriction serveur ou une protection excessive peut empêcher la plateforme de la récupérer.

L’URL de l’image est incorrecte

Vérifiez l’URL présente dans :

Copiez cette URL dans votre navigateur et vérifiez que l’image est réellement accessible.

L’image ne correspond pas au ratio attendu

Même lorsqu’une image est techniquement valide, une plateforme peut la recadrer. Évitez donc de placer un élément important tout au bord de l’image.

Conseil : laissez une marge visuelle autour du logo, du titre et des éléments importants afin que votre composition reste lisible en cas de recadrage.

Favicon et image Open Graph : ne les confondez pas

Ces deux images ont des fonctions complètement différentes.

Très petite icône Grande image d’aperçu Identifie le site Présente une page Onglet navigateur Partages sociaux Favoris Aperçu d’un lien Google peut l’afficher dans Search Utilisée par les plateformes compatibles avec Open Graph

Checklist SEO : favicon et Open Graph

Avant de considérer votre optimisation terminée, vérifiez les éléments suivants :

✓ Le favicon est carré.
✓ Le favicon représente clairement votre marque.
✓ Le fichier favicon est accessible publiquement.
✓ L’URL du favicon est stable.
✓ Le fichier n’est pas bloqué par les règles de crawl.
✓ La balise rel="icon" est présente.
✓ Les anciennes références inutiles ont été supprimées.
✓ Une version Apple Touch Icon est prévue si nécessaire.
✓ L’image Open Graph existe.
✓ og:title est correctement renseigné.
✓ og:description est correctement renseigné.
✓ og:url correspond à l’URL canonique de la page.
✓ og:image utilise une URL publique.
✓ L’image Open Graph est suffisamment grande et lisible.
✓ og:image:alt décrit correctement l’image.
✓ Les aperçus sont testés après modification.

FAQ : favicon, Open Graph et SEO

Quelle est la meilleure taille pour un favicon ?

Google demande actuellement un favicon carré d’au moins 8 × 8 pixels et recommande une taille supérieure à 48 × 48 pixels pour obtenir un rendu adapté à différentes surfaces. Pour une implémentation moderne, plusieurs tailles peuvent être générées pour les différents usages.

Quelle est la taille d’une image Open Graph ?

1200 × 630 pixels est une dimension pratique et très couramment utilisée pour les aperçus sociaux. Il faut cependant tenir compte des spécifications propres à chaque plateforme.

Le favicon améliore-t-il directement le classement Google ?

Non. Le favicon n’est pas un levier de classement comparable à la qualité du contenu, à la pertinence ou aux performances techniques. Il améliore cependant l’identité visuelle du site et peut être affiché dans les résultats Google lorsque les conditions sont respectées.

Pourquoi mon favicon fonctionne dans Chrome mais pas dans Google ?

Le navigateur et Google n’utilisent pas exactement le même processus. Google doit pouvoir crawler votre page et votre favicon, puis traiter l’information. L’apparition dans Google Search peut donc prendre du temps et n’est pas garantie.

Dois-je utiliser le même fichier pour le favicon et og:image ?

Non. Le favicon est une petite icône d’identification tandis que l’image Open Graph est une image beaucoup plus grande destinée à représenter une page lors de son partage.

Peut-on avoir plusieurs favicons sur un site ?

Pour Google Search, le favicon est associé au hostname du site. Un domaine et un sous-domaine peuvent donc avoir des favicons distincts, tandis qu’un sous-répertoire ne constitue pas un site distinct pour cette règle.

Conclusion : de petits fichiers qui peuvent faire une grande différence

L’optimisation SEO d’un site ne se limite pas aux mots-clés, aux balises H1 ou au contenu rédactionnel. Les détails techniques et visuels participent également à la qualité globale d’un site.

Un favicon correctement configuré permet de renforcer l’identification de votre marque, tandis qu’une image Open Graph bien configurée permet de mieux contrôler la présentation de vos pages lorsqu’elles sont partagées.

Prenez donc quelques minutes pour vérifier ces deux éléments sur votre site. Une petite correction dans le <head> peut suffire à résoudre un problème qui était présent depuis des mois.