Comment ajouter une favicon dans WordPress

L’autre jour, j’ai réalisé à quel point ajouter une favicon sur WordPress, ce n’est pas juste ajuster un petit logo. En fait, ça va tellement plus loin.

Je vous raconte ?

Je cherchais une extension pour aider un ami à vendre ses vidéos de méditation. J’ouvre un blog, puis deux, puis trois, je vais sur Reddit… Je consulte les avis sur WordPress.org, j’ouvre ChatGPT, trois pages d’accueil de plugins et trois pages de fonctionnalités plus tard, je me retrouve avec mes 25 onglets ouverts : 

Qui dit mieux ?

Mon navigateur commence à ramer, les titres sont illisibles. Je me dis : allez, je fais un tri. Je ferme les pages qui me parlent le moins. 

Machinalement, je commence par celles… sans favicon.

Et là, je tilte. 

L’une des trois extensions que je comptais recommander passe à la trappe, juste parce qu’elle n’avait pas de petit logo reconnaissable dans l’onglet ! 

Et je me suis dit : waouh. Si c’était mon business ? Perdu dans la masse. Oublié. Quel manque à gagner !

Comme quoi, une favicon, ça peut vraiment tout changer ! 

Alors, au programme : 

Je vais vous montrer qu’il existe trois façons d’ajouter une favicon à WordPress, pour être sûr qu’elle s’affiche correctement sur toutes les plateformes : web, Android ou encore iOS. 

On verra aussi comment créer une favicon percutante, grâce aux conseils exclusifs d’un graphiste, et comment vérifier que tout s’affiche bien une fois qu’elle est en ligne.

Mais commençons par le commencement, en faisant un petit zoom sur ce qu’est une favicon, et pourquoi vous devez absolument en avoir une.

Un site vitrine dans les cartons ? On s’en occupe !

Concevoir un site WordPress de A à Z n’est pas de tout repos. Entre les choix techniques, graphiques et marketing, il y a de quoi se perdre…

WPMarmite Start simplifie le processus pour vous permettre de vous concentrer sur l’essentiel : votre activité.

Obtenir un site clé-en-main →

✓ 100% propriétaire de votre site ✓ Optimisé pour Google ✓ Sécurité et support inclus

Qu’est-ce qu’une favicon et pourquoi l’ajouter dans WordPress ?

La favicon, c’est ce petit logo carré qu’on voit partout en ligne sans même y prêter attention.
Et pourtant, elle est essentielle pour reconnaître rapidement un site. C’est une mini-image au format carré, souvent issue du logo de votre marque mais avec un maxi-impact. 

Exemple de notre favicon : la marmite

Son but premier ? Attirer l’attention visuelle dans un environnement saturé où tout se ressemble. Parce que soyons honnêtes : dans un navigateur rempli d’onglets ou une liste de favoris bien fournie, c’est la favicon qui fait toute la différence pour retrouver un site en un clin d’œil.

Où trouve-t-on une favicon ?

Un peu partout, en fait ! Voici une liste des endroits où elle s’affiche :

• Onglets de votre navigateur : là où elle vous aide à repérer le bon site parmi plusieurs onglets qui pourraient être ouverts (idéal quand même pour ceux qui ouvrent 25 onglets en un clin d’œil…).
  
• Barre de favoris : pour accéder plus rapidement à vos sites préférés, comme votre banque, vos mails, ou votre blog WordPress préféré, évidemment. 😉
  
• Résultats de recherche Google : une petite icône qui apparaît à côté du nom du site, très utile pour renforcer votre image de marque dans les SERPs (pages de résultats Google).
  
  Regardez, si c’est un peu flou dans votre tête, je vous montre : 

• Historique de navigation : hop, une recherche rapide et vous reconnaissez le site visuellement, même sans lire le texte. Je vous ai mis un exemple depuis mon iPhone, vous la voyez, la petite marmite ? 

• Écran d’accueil mobile : si un utilisateur inscrit votre site comme raccourci, c’est encore la favicon qui s’affiche. Classe, non ?
  

Donc vous voyez ce que c’est une favicon, c’est bon ? 😄Alors on passe à l’étape suivante : pourquoi devriez-vous ajouter une favicon sur votre site WordPress ?

3 avantages d’ajouter une favicon dans WordPress

Allez, je vous glisse 3 arguments en béton pour que la favicon devienne une partie intégrante de votre identité visuelle.

1. Crédibilité : vous gagnez en professionnalisme

Une favicon donne tout de suite une impression de site soigné, abouti, bien construit. On se dit que vous avez pris le temps de tout faire correctement et jusqu’au bout.

C’est aussi un repère visuel cohérent avec votre logo, que l’on retrouve dans les résultats de recherche Google, dans les favoris, dans l’historique… Bref, partout où votre site peut laisser sa trace. Et il faut le dire, cette cohérence renforce la confiance envers une marque.

2. Expérience utilisateur : vous facilitez la navigation

On a souvent plusieurs onglets ouverts en même temps, et la favicon joue alors un rôle clé pour s’y retrouver rapidement. Je m’en sers tout le temps dans ma navigation web quotidienne et j’imagine que vous aussi. Par exemple : 

• Je clique sur mes favoris sans lire les noms, simplement en reconnaissant l’icône.
• Si je ferme une page par erreur, un petit coup d’œil dans l’historique suffit pour retrouver mon chemin en quelques secondes.

Ah, que c’est pratique ces favicons, n’empêche ! 😄

3. Marketing & conversion : vous boostez vos résultats

Un site que l’on reconnaît immédiatement, c’est un site où l’on revient plus facilement… et plus souvent. Et ça, c’est parfait pour réduire les abandons de panier, augmenter les clics dans les résultats de recherche Google, et augmenter vos revenus.

Parce que si votre site passe inaperçu dans une mer d’onglets ou de favoris anonymes, vous risquez de perdre des visiteurs sans même le savoir.

Vous vous souvenez de mon histoire en introduction ? J’avais tout fermé sans réfléchir, et les sites sans favicon se sont envolés en premier.

C’est exactement ce qu’on veut éviter, non ? 

Bon je sais, vous êtes impatient que je vous dise comment ajouter une favicon sur WordPress — et je vous comprends !

👉 D’ailleurs, si votre favicon est déjà prête, vous pouvez filer directement au tuto un peu plus bas. 

Mais si vous voulez découvrir quelques petits secrets de design pour être sûr que votre favicon en jette vraiment, alors on me suit encore un peu. 

5 étapes essentielles avant d’ajouter une favicon dans WordPress

Je vous la fais courte : j’ai papoté favicon avec un graphiste super sympa, et comme je partage toujours les bons plans, voilà ses astuces pour une favicon vraiment efficace.

👉 Avant d’ajouter la favicon à votre site, assurez-vous de cocher ces 5 fondamentaux : 

1. Utilisez la bonne taille

Votre favicon doit être carrée (format 1:1, quatre côtés égaux) et mesurer au minimum 48×48 pixels. Cela dit, pour WordPress, la taille recommandée est plutôt 512×512 pixels, comme vous pouvez le voir dans la médiathèque ci-dessous : 

Certaines plateformes utilisent encore des plus petites tailles, l’idéal est de prévoir plusieurs tailles, ce qu’on verra juste après au fil de l’article, restez encore un peu. 

2. Choisissez le bon format (ICO, PNG, WebP)

Je suis une grande fan des formats next-gen comme WebP, pour leur légèreté et leur efficacité en termes de compression. Pour une favicon, le PNG fait aussi parfaitement le job, surtout si vous avez besoin de gérer la transparence. Et pour les navigateurs les plus anciens, le format ICO reste encore le plus supporté. En bref, ICO, PNG ou WebP, tout ça fonctionne très bien de nos jours. Il n’y a plus vraiment de règle gravée dans le marbre. 

3. Adaptez votre logo et créez une version simplifiée mais cohérente

Une favicon, c’est minuscule, donc oubliez les logos trop détaillés. L’idée ce n’est pas de réinventer toute une identité visuelle, mais au contraire, de garder vos codes, vos couleurs, vos polices tout en créant une déclinaison cohérente avec votre image de marque. 

Je vous montre :

• Chez nous, WPMarmite, on n’a pas mis le logo complet, on a mis la marmite.

• Netflix ? Juste un N rouge. Ils ont bien fait de ne pas choisir un N bleu roi par exemple, on n’aurait pas trop compris pourquoi. 

• Airbnb ? Un peu pareil, pas le mot entier, mais le symbole « Bélo ». 

Vous me suivez ? On va tester avec un petit jeu :

Imaginons un studio de yoga qui s’appellerait Namaste Yoga, avec une fleur de lotus. 

Deux options pour la conception de la favicon :

• Réponse A: Mettre tout le nom avec la fleur de lotus.
  
• Réponse B: Mettre uniquement la fleur de lotus.

Alors ? 

On est d’accord sur ce qui fonctionne le mieux visuellement et c’est évidemment la réponse B, pas besoin du coup de fil à un ami.

4. Gérer la transparence et les différents fonds

Vous avez sûrement déjà remarqué que les navigateurs n’utilisent pas tous le même fond derrière les favicons. Et je ne sais pas vous, mais moi, ça m’est déjà arrivé d’activer le mode sombre sur des applis comme Slack ou même Chrome sur mobile. 

Donc on a :

• sur Chrome, les onglets sont gris clair ou bleutés ;
• sur Safari, plutôt gris foncé ;
• en navigation privée, souvent noirs.
  

👉 Résultat : si votre favicon a un fond gris fixe, elle peut soit se fondre dans le décor, soit jurer visuellement. Le mieux, c’est parfois d’utiliser une favicon avec fond transparent pour qu’elle s’adapte à tous les contextes, tout en restant fidèle à votre identité visuelle.

5. Préparer la favicon pour Google

Bon, apparaître dans les premiers résultats Google, c’est déjà le graal. Mais apparaître avec sa petite favicon, c’est encore mieux. 😎

Pour que Google l’affiche correctement, suivez ces quelques conseils : 

• Assurez-vous que Googlebot Image peut accéder au fichier favicon et à la page d’accueil. (Pas de blocage dans le fichier robots.txt, pas de redirection étrange…).
• Ajoutez une balise HTML dans l’en-tête de votre page d’accueil qui ressemble à ça : 

<link rel="icon" href="https://u9m4v4n3.delivery.rocketcdn.me/path/to/favicon.ico"> 

Attendez, avant que vous ne me disiez : « Ah, mais il y a déjà du code à ajouter… ». Rassurez-vous, WordPress ajoute automatiquement cette balise dans l’en-tête de vos pages. 

Donc si vous utilisez WordPress, vous n’avez rien à faire pour que votre favicon s’affiche dans Google. 

Pour les curieux, voici à quoi ça ressemble le lien d’un favicon sur WordPress. 

<link rel="icon" href="https://votre-siteWordPress.com/wp-content/uploads/2025/08/favicon.png" sizes=" x " />

Vous savez maintenant pourquoi il vous faut une favicon et comment la concevoir efficacement. On passe à la création ? 

Comment créer sa favicon WordPress 

Allez, je vous montre trois méthodes simples, rapides et efficaces pour créer votre favicon. 

1. Via la médiathèque WordPress

(La méthode que j’appelle « flemme efficace », rapide mais pas ultra pro).

Si vous souhaitez partir de votre logo actuel :

• Allez dans Médias > Médiathèque et importez à nouveau votre logo (ne touchez pas à l’original lié au site).
• Cliquez sur « Modifier » pour éditer le logo. 

• Recadrez en 512 x 512 px (format carré) et cliquez sur le bouton « Appliquer le recadrage ». N’oubliez pas d’enregistrer. 

2. Via un logiciel de création d’image

(Plus de liberté et de créativité, mais demande un minimum de notions design)

Outils possibles que vous pouvez considérer (du plus simple au plus avancé) : GIMP, Canva, Photoshop.

Je vous montre ici un exemple avec Canva, accessible même si vous débutez :

• Créez un nouveau format carré de 512 x 512 px et importez votre logo s’il n’est pas déjà dans votre bibliothèque Canva.

• Copiez/collez votre symbole (ou une partie de votre logo) dans le carré.

• Pas de symbole ? Pas de souci !
  Par exemple, si votre site s’appelle nomprenom.fr, vous pouvez créer une favicon avec vos initiales (« ML » pour Marine Larmier, par exemple), en utilisant votre police habituelle et vos couleurs de marque :

• Exportez ensuite l’image en PNG, avec fond transparent, au format 512 x 512 px :

👉 Avec Canva ou Photoshop, on voit que la création d’une favicon est déjà beaucoup plus pro et les possibilités de création sont presque infinies.

3. Via un générateur de favicon

(Idéale si vous voulez une version multi-supports).

Les outils que je recommande sont Favicon.io, Real Favicon Generator et LogoFast.

Voilà ce que vous pouvez faire par exemple sur Favicon.io :

Option 1 : créer une favicon avec du texte

• Entrez vos initiales (ex. « ML ») et choisissez la police, les couleurs, et la taille.
• Cliquez sur « Télécharger » pour obtenir un fichier ZIP contenant tous les formats nécessaires à toutes les utilisations. 

Option 2 : convertir une image existante
Vous avez déjà un symbole en PNG (par exemple, une fleur de lotus dans votre logo), mais le fichier n’est pas au bon format ou à la bonne taille ?

Pas de problème :

• Glissez-déposez votre image sur favicon.io et lancez la conversion en ICO ou en plusieurs tailles : 

• Cliquez à nouveau sur Télécharger et vous aurez le même résultat : un fichier ZIP tout prêt à utiliser.

Et ce fameux fichier ZIP, il contient quoi exactement ?

Il contient toutes les déclinaisons nécessaires pour un bon affichage adapté à tous les navigateurs et appareils (mobile, tablette, raccourcis, etc.) On retrouve donc, plusieurs tailles et plusieurs formats (ico et png, svg…). Et bonne nouvelle, tout peut être utilisé dans WordPress, franchement pratique. 

Option 3 : utiliser une simple icône

Il existe aussi l’option de créer une favicon à partir d’une icône. C’est idéal si, par exemple, votre site peut se résumer en un pictogramme. Je m’explique. Pour un site de vidéos, vous pouvez opter pour le bouton triangulaire « Lecture » ou une pellicule de film, comme dans l’exemple ci-dessous avec LogoFast :

Avec LogoFast, vous pouvez choisir l’icône, la couleur, la taille (512 px, bien sûr) puis l’exporter en PNG grâce au bouton Télécharger.

👉 Pour conclure sur les générateurs de favicon, disons que côté créativité c’est acceptable pour créer des favicons avec des lettres ou des icônes. En revanche, ce n’est pas un outil pour créer un symbole ou une déclinaison de logo de A à Z. Il vaut mieux déjà avoir un fichier PNG prêt à l’emploi ou un visuel existant. En gros, je pense que ces générateurs sont excellents pour créer automatiquement le ZIP avec tous les bons formats, mais pas pour créer le design de la favicon.

Roulement de tambour… Voici la phase clé que vous attendiez !

Maintenant que vous êtes bien rodé sur le sujet de la favicon…On l’ajoute dans WordPress ? 

Et parce que je fais les choses à fond, je teste aussi chaque méthode avec Favicon Checker pour voir si tout s’affiche bien sur Android, iOS ou même Chrome.

On y va !

Hébergez votre site chez o2switch

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

ESSAYEZ O2SWITCH

Comment ajouter une favicon dans WordPress (3 méthodes)

Il existe trois méthodes pour ajouter une favicon à WordPress : via le tableau de bord, avec une extension, ou manuellement avec FTP. Passons-les au peigne fin.

1. Ajouter une favicon via le tableau de bord WordPress (option native)

C’est la méthode la plus connue et pour cause : elle est simple, rapide et directement intégrée à WordPress. 

Étapes à suivre :

• Allez à Réglages > Général > Icône du site > Cliquez sur « Choisir une icône du site ».
  Ça marche pour tous les thèmes, même les thèmes basés sur les blocs et l’Éditeur de site. 

• Sélectionnez la favicon et cliquez sur le bouton « Définir comme icône du site ». 

Avantages :
C’est simple, rapide, et franchement, c’est la méthode de base. Celle que tout le monde connaît et utilise.

Limites :
Vous ne pouvez qu’ajouter un seul fichier. Résultat : vous ne pouvez pas prévoir une version spécifique pour les mobiles, une autre pour les navigateurs desktop, etc. C’est propre, mais un peu limité. 

Niveau : débutant.

Score sur le Favicon Checker : 

D’après l’analyse du Favicon Checker, voici ce qu’il manque ou ce qui pourrait être amélioré :

• Pas de favicon au format SVG
• Pas de favicon PNG spécifique pour les formats ordinateurs (ex : raccourcis bureau)
• Pas de favicon au format ICO (utile pour assurer la compatibilité avec tous les navigateurs)
• Aucun titre d’application web n’est défini pour les raccourcis iOS
• Aucun fichier manifeste n’est présent

Vous pouvez voir le résultat visuel (en anglais) ici : 

2. Ajouter une favicon via une extension : Real Favicon Generator (formats multiples et intégration automatique dans WordPress)

Alors là, l’extension Real Favicon Generator, c’est la solution idéale pour ceux qui veulent générer tous les formats nécessaires (mobile, tablette, ordinateur…) avec une compatibilité maximale, sans écrire une ligne de code. 

Étapes à suivre :

• Installez le plugin Favicon by RealFaviconGenerator directement via Extensions > Ajouter une extension et cliquez sur « Installer maintenant ». Consultez notre guide si vous avez besoin d’aide sur l’installation d’une extension.

• Allez dans Apparence > Favicon et sélectionnez le média depuis la médiathèque WordPress, ou collez l’URL directement. 

• Cliquez sur le bouton « Générer le favicon ».

Avant-dernière étape – Générer la favicon et aller sur leur plateforme

• Vous arrivez sur le site de l’extension (en Anglais) et là vous pouvez voir votre favicon sur le mode sombre, sur Apple Touch et créer votre propre Web App Manifest pour indiquer comment la favicon sera affichée sur mobile.
  Le Web App Manifest est un petit fichier qui indique à l’app comment afficher le site s’il est ajouté à l’écran d’accueil.

• Et la dernière étape, cliquez sur le bouton « Generate and install favicon », pour générer et installer toutes les versions des favicons dans WordPress.

Avantages :
Il génère automatiquement tous les formats et tailles dont vous avez besoin pour les raccourcis bureau, iPhone / iPad, appareils Android, raccourcis d’écran d’accueil etc.  Il génère aussi le fameux Web App Manifest. Et en plus, il ajoute le tout dans WordPress pour vous. Bref, un niveau de compatibilité très complet sans toucher le code. 

Limites :
Ça reste un plugin de plus à installer. Et si vous êtes du genre à préférer la légèreté côté extensions, ça peut freiner.

Niveau : débutant à intermédiaire

Score sur le Favicon Checker :

Alors, là, tous les capteurs sont au vert, j’ai les bonnes tailles pour tous les supports digitaux. 

3. Ajouter une favicon manuellement via FTP (même résultat que la solution plugin, mais en version code)

Cette méthode s’adresse aux utilisateurs à l’aise avec le code et la structure d’un site WordPress. Elle permet de faire exactement la même chose que le plugin Real Favicon Generator, mais sans installer d’extension.

Étapes à suivre :

• Générez votre favicon et le code associé avec un outil en ligne comme Favicon.io. L’outil vous génère les fichiers et le code à mettre dans WordPress.
  

• Téléchargez le fichier ZIP. Il contient tous les formats nécessaires : ICO, PNG, icônes Apple, Android, ainsi que le fichier webmanifest
  (on a déjà vu ça plus haut 😉) :
  
  

NB : Pour les deux dernières étapes, une petite sauvegarde de votre site avant de toucher aux fichiers FTP et d’ajouter du code ne pourra pas faire de mal…

• Décompressez le fichier ZIP, puis envoyez tous les fichiers à la racine de votre site WordPress via FTP. C’est-à-dire dans le même dossier que wp-content et wp-admin. Le répertoire racine s’appelle généralement public_html.

• Retournez sur votre tableau de bord WordPress et ouvrez votre fichier header.php via Apparence > Éditeur de fichiers > Header.php, et juste avant </head> , ajoutez ces balises de code :
  

<link rel="apple-touch-icon" sizes="180x180" href="https://u9m4v4n3.delivery.rocketcdn.me/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="https://u9m4v4n3.delivery.rocketcdn.me/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="https://u9m4v4n3.delivery.rocketcdn.me/favicon-16x16.png">

<link rel="manifest" href="https://u9m4v4n3.delivery.rocketcdn.me/site.webmanifest">

Ça devrait ressembler à ça : 

Avantages :
Vous n’êtes pas dépendant d’un plugin, vous gardez le contrôle total, et votre favicon est parfaitement compatible avec tous les appareils (Android, Apple, navigateurs desktop, etc.).

Limites :
Il faut maîtriser un minimum le code et être à l’aise avec l’utilisation de FTP.

Niveau :

Avancé / confirmé

Score sur Favicon Checker :

C’est tout au vert ici aussi !

🎉 Et voilà, mission accomplie : vous connaissez maintenant les trois façons pour ajouter une favicon dans WordPress ! Mais si vous hésitez encore sur la méthode qui vous convient le mieux, la prochaine section devrait vous éclairer davantage. 

6 questions clés pour choisir votre stratégie favicon

Voici un mini-guide pour vous aider à naviguer entre générateurs en ligne, plugin ou quelques lignes de code.

1. Votre logo est-il déjà adapté à une favicon (format carré, symbole, initiale) ?

✅ Oui. Il vous suffit de créer une version en 512 x 512 px (format PNG) et de l’ajouter à votre site.
❌ Non. Demandez à un graphiste (ou créez vous-même une déclinaison simple avec une lettre, un pictogramme ou un symbole). Gardez bien vos couleurs pour rester cohérent avec votre identité visuelle.

2. Souhaitez-vous un affichage parfaitement cohérent sur tous les supports ?

✅ Oui. Utilisez un générateur de favicon complet (comme Real Favicon Generator) qui vous fournit tous les formats nécessaires.
❌ Non. Une intégration simple via Via Réglages > Général > Icône du site suffira amplement.

3. Êtes-vous à l’aise avec l’ajout de code HTML ou l’utilisation de FTP ?

✅ Oui. Vous pouvez ajouter manuellement le code dans le fichier header.php de votre thème enfant, et envoyer les fichiers favicon (aux bons formats) via FTP.
❌ Non. Optez pour la méthode sans code : Réglages > Général > Icône du site et c’est plié ou utilisez un plugin tout-en-un qui ajoute toutes les bonnes tailles pour vous dans le header.php.

4. Êtes-vous débutant avec un blog personnel ?

Objectif : une favicon rapide à créer avec des lettres ou une icône et surtout, facile à installer.
Solution : utilisez un générateur gratuit (comme Favicon.io ou LogoFast), téléchargez une image carrée en PNG ou alors créer un simple carré sur Canva.
Intégration : Optez pour la méthode sans code : via Réglages > Général > Icône du site.

5. Vous gérez un site pour un business en ligne avec un niveau technique moyen ?

Objectif : une favicon professionnelle, bien intégrée et surtout, sans se perdre dans le code.
Solution : travaillez avec un graphiste pour créer une déclinaison de votre logo et une image optimisée.
Intégration : utilisez un plugin comme Real Favicon Generator qui s’occupe de créer toutes les tailles et de les afficher dans le code pour vous.

6. Vous êtes développeur ou une agence WordPress orientée design ?

Objectif : une image de marque irréprochable sur tous les supports (mobile, desktop, raccourcis, etc.).
Solution : créez une favicon sur-mesure avec votre graphiste et demandez à votre dev de vous mettre en ligne le code HTML.
Intégration : via FTP + insertion du code HTML dans le header.php du thème enfant. Vous gardez un contrôle total sur l’apparence et la compatibilité.

Alors, ça vous aide ? Vous vous retrouvez dans ces questions ? 

👉 Maintenant, on vérifie que tout fonctionne comme prévu. Pas question d’avoir fait tout ça pour rien !

Vérifier que votre favicon fonctionne : la checkliste post-publication

Une fois votre favicon en ligne, une petite vérification s’impose pour s’assurer qu’elle s’affiche bien partout. Voici deux méthodes simples pour la faire en toute tranquillité.

Méthode 1 : le test manuel (à l’ancienne mais efficace)

Voici une petite checkliste pour tester votre favicon à la main, pensez à ajouter votre site dans vos favoris par exemple. 

• Sur ordinateur : Chrome, Firefox, Safari, Edge.
• Sur mobile et tablette : iOS, Android.
• En mode sombre et clair (certains navigateurs changent l’arrière-plan).
• En l’ajoutant à vos favoris, onglets, raccourcis d’écran d’accueil, etc.
• En consultant l’historique de navigation.
• Et enfin… dans les résultats de recherche Google ! Oui, elle devrait y apparaître aussi.
  

Méthode 2 : utiliser un outil dédié (plus rapide, plus précis)

Si vous préférez aller droit au but et vérifier tout ça d’un coup, je vous conseille un outil bonus très pratique : Real Favicon Checker.

Il répond clairement à des questions qu’on ne pense pas forcément à se poser :

• Mon fichier favicon.ico est-il correct ?
• Est-ce que ma favicon s’affiche bien sur iOS ? Et le titre aussi ?
• Est-elle prête pour apparaître dans les résultats Google ?

L’outil scanne tout ça pour vous et vous propose des pistes d’amélioration si besoin.

Par exemple, ici, j’ai installéfile ma favicon via l’option « Icône du site » sur WordPress. Résultat : je découvre qu’il me manque un fichier PNG pour le raccourci bureau, un titre pour le raccourci Apple, et le fameux Web App Manifest.

En cas de souci : résoudre les bugs les plus courants

Voici les problèmes les plus fréquents, avec leurs solutions simples. En général, ça suffit largement à tout remettre dans l’ordre.

La favicon ne s’affiche pas du tout

Il y a plusieurs solutions qui s’offrent à vous :

• Videz le cache de votre navigateur, et celui de WordPress si vous utilisez un système de cache.
• Rafraîchissez la page de manière forcée (Ctrl + F5 ou Cmd + Shift + R).
• Vérifiez le format de votre favicon : privilégiez les formats ICO ou PNG.
  Si nécessaire, convertissez votre image avec un outil en ligne ou un générateur de favicon.
• Utilisez un outil comme Real Favicon Checker pour repérer rapidement ce qui bloque.
  

La favicon est floue ou mal alignée

Dans la majorité des cas, cela vient de la taille du fichier :

• Assurez-vous que votre favicon mesure bien 512 x 512 pixels, comme recommandé par WordPress. Si elle est trop petite, elle sera floue sur les écrans haute définition.
• Rappelez-vous, si elle n’est pas parfaitement carrée, elle risque d’être mal centrée ou rognée.
  

La favicon ne s’affiche pas dans les résultats Google

Pas forcément un bug, mais plutôt une question de critères :

• Google utilise ses propres règles pour afficher une favicon dans les résultats de recherche.
• Vérifiez que l’URL de votre favicon est bien structurée et déclarée dans le code du site.
• L’image doit être au bon format, accessible et valide.
• L’affichage peut prendre un peu de temps : patience, patience, cela met parfois quelques heures voire quelques jours. 

Conclusion : la petite icône qui fait toute la différence

J’espère que la favicon n’est plus un simple détail pour vous, mais que ça veut dire beaucoup. (Vous l’avez, j’espère 😉)

Ce petit visuel renforce l’image de votre marque, donne tout de suite un aspect plus pro à votre site, et aide vos visiteurs à vous retrouver facilement. 

Soignez sa création : bon format, bonne taille, bonne cohérence visuelle sur tous les supports.
Choisissez la méthode qui vous convient : via WordPress, avec un plugin, ou manuellement.
Et une fois en ligne, testez partout pour vous assurer que tout s’affiche correctement sur iPhone, Android et le web en général. 

Et vous, alors ? Un site sans favicon, ça vous perturbe aussi ?
Est-ce que vous comptez sur ce petit logo pour vous repérer dans votre navigation web quotidienne ? Dites-le-nous en commentaire !

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20000 personnes l'ont fait, pourquoi pas vous ?

Je m'inscris

À propos de l'auteur

Marine Larmier

Rédactrice, traductrice et transcréatrice avec plus de 10 ans d'expérience dans la création de contenu WordPress. Basée entre la France et la Nouvelle-Zélande, j'adore voyager, faire du yoga, regarder les couchers de soleil et découvrir la cuisine du monde. Si vous n'avez pas les mots, je les trouve pour vous !