Comment ajouter un favicon sur WordPress : 4 méthodes efficaces

Ça y est, c’est le grand jour. Vous venez de lancer votre site WordPress. Tout semble en ordre : les pages sont publiées, le thème est installé, le contenu est prêt. 

Et pourtant, dans l’onglet du navigateur, un carré gris ou un logo générique s’affiche à la place de votre identité visuelle.

Ce détail, souvent négligé, s’appelle un favicon. Il est petit, mais il en dit long sur le soin que vous apportez à votre présence en ligne.

Dans cet article, on vous explique tout ce qu’il faut savoir sur la favicon WordPress : ce que c’est, pourquoi elle compte, comment la créer correctement, et surtout comment l’ajouter à votre site via quatre méthodes différentes, des plus simples aux plus techniques.

Qu’est-ce qu’un favicon ?

Le terme « favicon » est la contraction de « favorite icon », soit l’icône des favoris. Il s’agit d’une petite image, généralement carrée, qui représente votre site web dans différents contextes numériques.

Historiquement, la favicon a été introduite par Microsoft Internet Explorer dès 1999. À l’époque, elle ne s’affichait que dans la barre des favoris, d’où son nom.

Depuis, son usage s’est largement étendu à l’ensemble des navigateurs modernes et des interfaces numériques. Aujourd’hui, ne pas en avoir revient à laisser une vitrine de magasin sans enseigne.

Dans WordPress, la favicon est officiellement désignée sous le nom d’« Icône du site ». Ce terme désigne aussi une fonctionnalité apparue avec la version 4.3 du CMS (sortie en août 2015), qui active automatiquement les favicons sur votre site web.

Et depuis la version 5.4 de WordPress, sortie en mars 2020, il y a même un favicon par défaut dès que vous installez le CMS, nous apprend la documentation officielle de WordPress.

Elle ressemble à ça, pour info : 

Au final, quelle que soit la terminologie utilisée, le rôle de la favicon sur WordPress est identique : représenter visuellement votre marque sur le web, en dehors même du contenu de vos pages.

Où apparaissent les icônes de site ?

Cette favicon WordPress, vous la croisez tous les jours sans forcément y prêter attention. Elle apparaît à différents endroits : 

• Dans les onglets du navigateur web (Chrome, Opera, Firefox, safari, etc.) de vos visiteurs.
• À côté du nom de votre site sur votre back office WordPress.
• Comme icônes d’application sur les appareils mobiles lors d’un enregistrement dans un navigateur ou sur un téléphone.
• Dans les favoris de votre navigateur, si vous y enregistrez un site internet qui vous intéresse.
• Dans les résultats de recherche de votre moteur de recherche favori.

Si vous tapez par exemple « Maintenance WP » sur Google, vous verrez notre superbe favicon juste au-dessus de l’URL du site de notre agence WordPress : 

Pourquoi ajouter un favicon sur WordPress ?

Certains propriétaires de site considèrent la favicon comme un accessoire décoratif. C’est une erreur. Elle remplit en réalité plusieurs fonctions concrètes :

• Elle renforce l’identité de marque. Lorsqu’un internaute a une dizaine d’onglets ouverts en même temps, la favicon est le seul élément visuel qui permet d’identifier votre site au premier coup d’œil. Sans elle, votre onglet reste anonyme.
• Elle améliore la confiance des visiteurs. Un site sans favicon WordPress peut sembler inachevé ou peu professionnel. À l’inverse, une icône bien conçue, cohérente avec votre charte graphique, renforce le sentiment que votre site est soigné et fiable. C’est un signal de sérieux, au même titre qu’une adresse e-mail professionnelle ou un nom de domaine personnalisé.
• Elle facilite la navigation. Pour les internautes qui consultent régulièrement votre site et l’ont mis en favoris, la favicon est un repère visuel immédiat. Elle réduit le temps de recherche et améliore l’expérience de navigation.
• Elle contribue à la mémorisation. Un favicon distincte et reconnaissable s’intègre progressivement à l’image que vos visiteurs ont de votre marque. C’est un détail qui participe à la cohérence globale de votre communication visuelle. Pensez à la favicon de YouTube, de Wikipedia ou de votre banque en ligne : vous les reconnaissez instantanément, sans même lire le titre de l’onglet. C’est précisément l’effet que vous devez chercher à produire.

La favicon influence-t-il le référencement ou l’expérience utilisateur ?

Arrêtons-nous à présent sur une question légitime que beaucoup de propriétaires de site WordPress se posent.

Une icône de favori peut-elle améliorer votre référencement naturel et l’expérience utilisateur (UX) vécue par vos visiteurs sur vos pages ?

Impact de la favicon WordPress sur le SEO

Sur le plan du référencement naturel (SEO), Google affiche la favicon d’un site directement dans les résultats de recherche, à côté du nom de domaine.

Un favicon présente et de qualité peut donc contribuer à améliorer le taux de clics (CTR, Click Through Rate), en rendant votre résultat plus identifiable et plus attrayant visuellement.

Cependant, il est important de noter que la favicon n’est pas un facteur de classement direct dans les algorithmes de Google. Elle n’améliore pas votre position dans les résultats de recherche, ni votre référencement WordPress.

En revanche, elle joue un rôle indirect : un CTR amélioré est un signal que les moteurs de recherche prennent en compte pour évaluer la pertinence d’une page.

Google précise également dans sa documentation officielle que pour qu’un favicon soit éligible à l’affichage dans les résultats de recherche, elle doit respecter certaines conditions : 

• Être accessible publiquement.
• Ne pas être bloquée par le fichier robots.txt.
• Être « visuellement représentatif de la marque de votre site ».
• Se présenter au format carré et mesurer au moins 8 x 8 pixels. Avec la fonction native de création de favicon sur WordPress, pas de soucis là-dessus. Votre icône de site fera 16 x 16 pixels, soit le double de ce que recommande Google.

Un favicon qui enfreint les règles de contenu de Google – image choquante, trompeuse ou inappropriée – peut être remplacée par une icône générique dans les résultats.

Quel impact sur l’UX ?

Sur le plan de l’expérience utilisateur (UX), l’impact est plus immédiat. Un favicon cohérente avec votre identité visuelle renforce la perception de qualité et de professionnalisme.

À l’inverse, l’absence de favicon ou l’utilisation d’une icône générique peut générer un sentiment de manque de soin, même inconsciemment chez le visiteur.

Prérequis et bonnes pratiques pour créer une image de l’icône de site fonctionnelle

Maintenant que vous connaissez mieux la favicon sur WordPress et son rôle, on va pouvoir s’intéresser à sa création.

Mais avant même d’ouvrir votre tableau de bord WordPress, un peu de patience. Il convient d’abord de préparer une image adaptée.

C’est une étape que beaucoup négligent, et qui est pourtant déterminante pour un résultat propre.

On fait le point sur les prérequis et les bonnes pratiques juste en-dessous.

Format recommandé pour votre favicon WordPress

WordPress accepte notamment les formats PNG, JPG, GIF et ICO. Nous vous recommandons le format PNG pour ses capacités de transparence et sa qualité d’affichage sur tous les types d’écrans.

Le format ICO sera principalement requis si vous comptez créer votre favicon manuellement (au format .ico, donc). C’est donc un peu plus technique, mais ce format présente plusieurs avantages, d’après la documentation officielle de WordPress : 

• Compatibilité avec la plupart des navigateurs modernes.
• Limite les risques d’erreurs 404 car « pratiquement tous les navigateurs modernes appelleront un fichier favicon.ico ».
• Un fichier .ico peut contenir plusieurs icônes.

Le format SVG, bien que de plus en plus utilisé pour les icônes sur le web, n’est pas encore nativement pris en charge par WordPress pour l’icône de site.

Taille et apparence idéale

Pour la taille, la dimension idéale pour votre favicon WordPress est d’au moins 512 × 512 pixels. C’est en tout cas la recommandation officielle du CMS.

Cette résolution garantit un rendu net sur les écrans haute densité (Retina, 4K) tout en permettant au CMS de générer automatiquement les différentes déclinaisons nécessaires selon les contextes d’affichage.

L’image doit également être carrée. Un favicon rectangulaire sera recadrée ou déformée. Vérifiez systématiquement que vos dimensions sont identiques en largeur et en hauteur.

Usage de la transparence

Si votre logo comporte un fond coloré spécifique, vous pouvez choisir de le conserver. En revanche, si vous souhaitez que votre favicon s’adapte à tous les contextes (fond clair ou foncé), optez pour un fond transparent en PNG.

Notez que certains contextes, comme l’affichage dans les résultats Google, appliquent un fond blanc par défaut sur les favicons transparentes.

Motif et cohérence avec votre identité visuelle

À 16 × 16 pixels (taille d’affichage réelle dans un onglet), les détails fins disparaissent. Du coup, choisissez un motif simple pour votre favicon WordPress.

Privilégiez une lettre, un pictogramme ou une version simplifiée de votre logo plutôt qu’une composition chargée. Une initiale stylisée sur fond coloré fonctionne généralement très bien. À l’inverse, un logo complet avec du texte devient illisible à cette taille.

Par ailleurs, votre favicon doit s’inscrire dans votre charte graphique : respectez vos couleurs de marque, votre typographie si vous utilisez une initiale, et l’esprit général de votre identité.

Un favicon bien pensée est une déclinaison logique de votre logo, pas une image choisie au hasard.

Voyons maintenant le cœur du sujet. Il existe plusieurs façons d’intégrer un favicon à votre site WordPress, selon votre version de WordPress et vos préférences techniques.

Comment ajouter un favicon sur WordPress : 4 méthodes décortiquées étape par étape

Avec le tableau de bord ou l’Outil de personnalisation de WordPress

Commençons par la méthode la plus simple, accessible et rapide. L’ajout d’un favicon via l’Outil de personnalisation de WordPress (Customizer).

Si vous êtes débutant ou que vous vous lancez avec WordPress, partez là-dessus, ça fait le job.

Pourquoi ? Eh bien tout simplement parce que « vous n’avez pas besoin de préparer vous-même le fichier favicon.ico, ni de modifier votre fichier de thème », détaille la documentation de WordPress. 

Dans le détail, suivez les étapes suivantes : 

• Connectez-vous à votre tableau de bord WordPress.
• Rendez-vous dans Réglages > Général.
• Cliquez sur le bouton « Choisir une icône du site », puis choisissez une image depuis votre Médiathèque (ex : votre logo), ou téléchargez-en une nouvelle.

Si votre image n’est pas parfaitement carrée, WordPress vous proposera un outil de recadrage. Ajustez si nécessaire, puis cliquez sur « recadrer l’image » quand vous avez terminé.

Votre favicon a bien été ajoutée, regardez :

Si vous utilisez un thème classique (qui ne repose pas sur des blocs), sachez que vous pouvez aussi ajouter un favicon sur WordPress en passant par le menu Apparence > Personnaliser, puis en vous rendant dans le menu « identité du Site » proposé sur l’Outil de Personnalisation (Customizer) de WordPress : 

Un aperçu en temps réel s’affiche directement dans le Customizer, ce qui vous permet de visualiser le rendu avant de valider. Profitez-en pour vérifier que l’icône reste lisible à petite taille dans l’aperçu de l’onglet.

Notez que le Customizer peut ne pas être disponible si vous utilisez un thème conçu exclusivement pour l’éditeur de Site (FSE — Full Site Editing).

Avec l’Éditeur de Site

En parlant de l’éditeur de Site, voyons comment procéder si vous utilisez un thème basé sur des blocs, par exemple le thème natif Twenty Twenty-Five.

Sur votre tableau de bord, allez dans Apparence > Éditeur. Cliquez ensuite sur le nom de votre site, en haut à gauche. Dans notre cas, notre site de test s’appelle « WordPress favicon » : 

Ensuite, sélectionnez le type d’en-tête de votre choix parmi les modèles proposés, puis cliquez sur la zone dédiée à l’insertion d’un logo : 

Choisissez l’image de votre choix dans la Médiathèque ou téléchargez-en une, puis cliquez  sur le petit bouton radio « Utiliser comme icône de site ». 

Terminez en cliquant sur le bouton « Enregistrer », en haut à droite :

L’interface évolue régulièrement avec les mises à jour de WordPress. Si vous ne trouvez pas l’option au premier essai, cherchez dans les paramètres globaux ou dans l’en-tête du site. Une alternative simple consiste à utiliser la barre de recherche intégrée à l’éditeur et à taper “Icône de site” pour accéder directement au bon réglage.

Avec un plugin de favicon WordPress

Si les méthodes natives ne fonctionnent pas avec votre thème, ou si vous souhaitez plus de contrôle, un plugin dédié est une bonne alternative.

L’extension Favicon by RealFaviconGenerator est l’une des plus recommandées. Elle génère automatiquement toutes les déclinaisons nécessaires de votre favicon (pour iOS, Android, Windows, navigateurs, etc.) à partir d’une seule image source.

Pour l’utiliser sur votre site, procédez de la sorte : 

1. Installez et activez le plugin depuis Extensions > Ajouter une extension.
2. Dans les réglages du plugin (menu Apparence > Favicon), téléchargez votre image source.
3. Sélectionnez votre image dans votre Médiathèque, puis cliquez sur le bouton « Générer le favicon ».

Vous êtes alors redirigé vers le site de RealFaviconGenerator. Vous pouvez notamment personnaliser l’affichage sur la page de résultats de Google, les navigateurs web de bureau et mobile.

Le menu appelé « Web App Manifest » permet de choisir comment votre favicon WordPress sera affiché sur mobile.

Lorsque vous avez terminé, cliquez sur le bouton « Generate and install favicon ». Le plugin va alors générer tous les formats et tailles de favicons directement dans WordPress pour vous.

Si tout va bien, vous verrez ceci affiché à l’écran :

Cette approche est particulièrement utile si vous souhaitez que votre icône s’affiche correctement sur tous les appareils et navigateurs, y compris les plus spécifiques.

C’est aussi la méthode à privilégier si vous gérez un site e-commerce ou une application web progressive (PWA), où la présence d’icônes adaptées à chaque plateforme est attendue par les utilisateurs.

Manuellement avec un morceau de code

Terminons avec la méthode la plus technique, dédiée aux utilisateurs à l’aise avec le code. Si besoin, sachez qu’il est possible d’ajouter un favicon manuellement sur votre site WordPress.

Avant de procéder à une quelconque manipulation sur votre site en ligne, sauvegardez ses fichiers et sa base de données à l’aide d’un outil dédié, par exemple WP Umbrella. Dans l’idéal, faites d’abord un test d’ajout de favicon sur WordPress sur un environnement de staging ou en local pour être sûr que tout fonctionne correctement.

Commencez par créer votre favicon via un logiciel d’édition graphique/d’image qui permet l’enregistrement de fichiers .ico. Sur sa documentation officielle, WordPress recommande par exemple Faviconer.

Mais il existe également des services en ligne qui vous permettront de créer gratuitement un favicon comme RealFaviconGenerator ou Favicon.io. Ce dernier permet par exemple de transformer un logo au format PNG vers le format .ico.

Ce qui vous permet de créer votre logo, au préalable, sur des outils comme Canva ou Adobe Illustrator.

Dans le détail, voici comment faire avec Favicon.io. Téléchargez votre image au format PNG dans le menu « Favicon Generator ».

Cela vous donne accès à un fichier zip avec les fichiers et le code à ajouter sur WordPress. Décompressez ce fichier zip qui comprend 7 fichiers au total : 

Ajoutez-les au répertoire racine de votre site soit via un client FTP (Filezilla, Cyberduck, Transmit), soit via le gestionnaire de fichiers proposé par l’interface serveur de votre hébergeur. 

Sur cPanel, il se trouve par ici :

Votre répertoire racine s’appelle généralement public_html, www ou htdocs, en fonction de votre hébergeur. Pour vous guider, c’est là où vous retrouvez aussi les répertoires tels que wp-content et wp-admin.

Pour terminer, ajoutez les lignes de code suivantes dans la balise head de votre code HTML. Ce morceau de code vous est proposé par Favicon.io lorsque vous téléchargez votre logo :

Intégrez ensuite ce code dans le fichier header.php, avant la fermeture de la balise </head>. Sur votre tableau de bord WordPress, allez dans Apparence > Editeur de fichiers des thèmes :

Terminez en cliquant sur le bouton « Mettre à jour le fichier ». 

Au moment de modifier les fichiers de votre thème, une bonne pratique consiste à utiliser un thème enfant. Dans ce cas, créez et modifiez la copie du fichier header.php qui se trouve dans votre thème enfant.

Comment retirer ou changer le favicon sur WordPress ?

Vous vous demandez comment changer le favicon sur WordPress ? La procédure pour modifier ou supprimer un favicon existante est similaire à celle de l’ajout.

Pour changer votre favicon, retournez dans la méthode que vous avez utilisée initialement (Customizer, Éditeur de site ou plugin) et téléchargez simplement la nouvelle image. L’ancienne sera remplacée.

Pour retirer un favicon, accédez aux mêmes paramètres et cliquez sur l’option de suppression ou de modification de l’icône de site. Dans le menu Réglages > Général, ça donne ça :

Dans le Customizer, un lien « Retirer » ou « Changer l’image » apparaît sous l’aperçu de l’icône actuelle.

Dans la pratique, vous pourrez être amené à changer votre favicon lors d’une refonte graphique, d’un changement de nom de marque ou d’une mise à jour de votre identité visuelle.

Dans ce cas, pensez également à mettre à jour votre favicon sur tous les autres endroits où elle est éventuellement déclarée manuellement.

Attention aux délais de cache. Après une modification, il est possible que votre ancienne favicon reste visible pendant quelques heures dans certains navigateurs. Videz le cache de votre navigateur (Ctrl + Maj + Suppr) et, si votre site utilise un plugin de cache comme WP Rocket ou W3 Total Cache, videz également le cache du site.

Comment vérifier que votre favicon fonctionne ?

Une fois la favicon ajoutée, il est conseillé de vérifier son bon affichage avant de considérer la tâche comme terminée. Plusieurs options s’offrent à vous en la matière :

• Dans votre navigateur. Ouvrez votre site dans un onglet et observez l’icône à gauche du titre de la page. Testez également en navigation privée pour éviter les interférences de cache.
• Sur mobile. Ajoutez votre site en raccourci sur l’écran d’accueil d’un smartphone Android et iOS pour vérifier que l’icône s’affiche correctement.
• Avec un outil en ligne. Le site RealFaviconGenerator propose un outil de vérification gratuit. Il analyse votre URL et vous indique si votre favicon est bien détectée et si elle s’affiche correctement dans différents contextes.

• Dans le code source. Affichez le code source de votre page d’accueil (clic droit > Afficher le code source) et recherchez la balise <link rel=”icon”. Sa présence confirme que la favicon est bien déclarée dans l’en-tête HTML. Si vous trouvez plusieurs balises de ce type, c’est le signe d’un doublon à corriger — gardez uniquement la déclaration issue de la méthode que vous avez choisie.

Résolution des bugs et erreurs courants

Dans certains cas, il arrive que la favicon ne s’affiche pas malgré une configuration apparemment correcte. Découvrez les problèmes les plus fréquents et leurs solutions : 

• La favicon ne s’affiche pas du tout. La cause la plus courante est un problème de cache. Commencez par vider le cache de votre navigateur et celui de votre plugin de cache. Si cela ne suffit pas, vérifiez que la balise <link rel="icon"> est bien présente dans le code source de votre page.
• La favicon affiche l’ancienne image. Même réflexe : videz le cache. Les navigateurs conservent souvent les favicons en mémoire pendant plusieurs heures, voire plusieurs jours. Une navigation en mode incognito permet de vérifier sans interférence de cache.
• L’image est floue ou pixelisée. Votre fichier source est trop petit. Recommencez avec une image d’au moins 512 × 512 pixels. WordPress redimensionne automatiquement l’image pour les différents contextes d’affichage.
• La favicon ne s’affiche pas sur Google. Google met parfois plusieurs semaines avant d’indexer et d’afficher la favicon d’un site dans ses résultats. Assurez-vous que votre favicon respecte les recommandations de Google. Si votre favicon reste absente des résultats après plusieurs semaines, vérifiez également que votre page d’accueil n’est pas bloquée par une directive noindex dans votre extension SEO favorite (Yoast, SEOPress, Rank Math, etc.).
• La favicon s’affiche différemment selon les navigateurs. Certains navigateurs, notamment les versions anciennes d’Internet Explorer ou de Safari, gèrent différemment les formats et les tailles de favicon. Si vous constatez des incohérences, utilisez un plugin comme RealFaviconGenerator qui produit automatiquement un pack multi-formats couvrant tous les cas de figure.

En conclusion, ajouter un favicon sur WordPress est une action rapide, mais qui produit des effets durables sur la perception de votre site.

Elle renforce votre identité visuelle, améliore l’expérience de navigation de vos visiteurs et contribue indirectement à votre visibilité dans les résultats de recherche.

Vous disposez désormais de quatre méthodes pour l’intégrer, des outils natifs de WordPress aux solutions plus techniques, en passant par les plugins spécialisés. Quelle que soit votre configuration, l’une d’elles correspond à votre situation.

Ces petits détails, souvent négligés, font pourtant la différence entre un site amateur et un site professionnel soigné.

Un favicon bien pensée, au bon format et cohérente avec votre identité de marque, est un investissement de quelques minutes qui vous représente en permanence sur le web.

Vous souhaitez aller plus loin dans l’optimisation de votre site WordPress ? Chez Maintenance WP, nous accompagnons les entreprises et les indépendants dans le développement, la maintenance et le référencement de leurs sites WordPress.

Besoin d’en savoir plus ? Notre équipe est à votre disposition pour répondre à vos questions.