📌 Comment ajouter un favicon dans WordPress : 3 façons pour tout site

Un site sans favicon donne une impression d’inachevé. Un visiteur ouvre cinq onglets, cherche le vôtre parmi eux et ne le trouve pas parce qu’à la place d’une icône, il voit un espace réservé gris du navigateur. Un détail? Oui. Mais ce sont ces détails qui forgent la perception: on a pris soin de vous ou on a bricolé à la va-vite.

WordPress a simplifié l’ajout d’une icône de site au point de le réduire à quelques clics, pourtant la moitié des propriétaires de site ignorent cette fonctionnalité ou, après avoir téléchargé l’image, constatent que le favicon ne s’affiche pas. La raison en est presque toujours le cache du navigateur ou une taille de fichier incorrecte.

Voici trois méthodes efficaces pour ajouter un favicon dans WordPress: via l’outil de personnalisation (la plus simple), manuellement par code, et via une extension. Ainsi qu’un récapitulatif des exigences de taille et de format pour que l’icône s’affiche partout: dans les onglets, les favoris, sur iPhone et Android.

💡 Aperçu rapide:

• Qu’est-ce qu’un favicon et pourquoi votre site en a besoin: reconnaissance de marque, confiance, navigation par onglets
• Exigences relatives au fichier: une image carrée de taille standard, au format PNG, ICO ou SVG
• Méthode 1: téléchargement via «Site» → Personnaliser (2 minutes, sans extension)
• Méthode 2: insertion manuelle via functions.php ou header.php (pour ceux qui modifient les thèmes)
• Méthode 3: installer l’extension Site Favicon (si l’outil de personnalisation est indisponible)
• Que faire si le favicon ne s’affiche pas: cache du navigateur, ancien ICO, CDN

Pourquoi votre site a besoin d’un favicon et quelles sont les exigences

Un favicon (abréviation de favorite icon) est une petite icône que le navigateur affiche à gauche du titre de la page dans l’onglet, dans les favoris et dans l’historique de navigation. Un utilisateur qui a une dizaine d’onglets ouverts retrouve votre site en une fraction de seconde, précisément grâce au favicon, et non grâce au texte du titre.

La seconde fonction est moins évidente: le favicon contribue à construire une micro-marque. Lorsqu’une personne ajoute une page aux favoris ou place le site sur l’écran d’accueil de son smartphone, c’est l’icône du site qui apparaît. Sans favicon, WordPress affiche à la place un espace réservé gris ou une capture d’écran de la page, ce qui donne un aspect négligé.

Exigences de taille et de format

Depuis 2014, WordPress prend en charge le téléchargement d’une icône de site via l’outil de personnalisation. Les exigences sont standard:

• Taille: 512×512 pixels. WordPress génère automatiquement des copies réduites pour les navigateurs (32×32, 180×180 pour l’icône tactile Apple, 192×192 et 512×512 pour Android). Vous n’avez pas besoin de télécharger des fichiers séparés pour chaque résolution; le cœur du système le fait tout seul. Pour en savoir plus sur les exigences relatives à l’icône de site, consultez la documentation officielle de WordPress.
• Format: PNG (recommandé), ICO ou SVG. Le PNG offre la meilleure qualité sur les écrans retina. L’ICO, un format hérité des anciens navigateurs, n’est pratiquement plus nécessaire en 2026.
• Quoi utiliser comme favicon: un logo reconnaissable dans un carré et lisible même fortement réduit. Trois ou quatre lettres sur un fond coloré fonctionnent mieux qu’une illustration complexe.

La règle principale lors de la préparation du fichier: il doit être carré. WordPress recadrera de force une image non carrée, et le résultat pourrait ne pas vous convenir.

Comment ajouter un favicon dans WordPress: 3 méthodes

Méthode 1: via l’outil de personnalisation, la plus simple

Cette méthode fonctionne sur toute version moderne de WordPress avec un thème classique. Pour les thèmes bloc (FSE), le chemin est légèrement différent; je vais vous montrer les deux.

Thème classique (Personnalisation):

• Connectez-vous à l’administration de WordPress.
• Allez dans Apparence → Personnaliser.
• Sélectionnez la section Identité du site. Dans certains thèmes, elle s’appelle «Informations sur le site» ou «Icône et logo du site».
• Trouvez le champ Icône du site. Cliquez sur «Sélectionner l’icône du site» et téléchargez un PNG carré; WordPress attend une image d’au moins 512×512, conformément à la documentation.
• Si nécessaire, recadrez l’image à l’aide de l’éditeur intégré et cliquez sur «Enregistrer les modifications».

Thème bloc (Éditeur de site, WordPress 5.9+):

Si le thème prend en charge l’édition complète du site, l’outil de personnalisation est remplacé par l’éditeur de site. Allez dans Apparence → Éditeur, ouvrez le panneau Styles ou Paramètres, trouvez la section Icône du site et téléchargez la même image carrée. La logique est identique, l’interface est différente.

Après avoir enregistré, ouvrez le site dans une nouvelle fenêtre de navigation privée; le favicon devrait apparaître dans l’onglet. S’il n’apparaît pas immédiatement, pas de panique: les navigateurs mettent en cache les favicons de manière agressive. Plus d’informations à ce sujet dans la section FAQ ci-dessous.

Méthode 2: manuellement via functions.php

Une option pour ceux qui modifient un thème enfant et ne souhaitent pas dépendre de l’outil de personnalisation. Ajoutez le code suivant au fichier functions.php du thème enfant ou via l’extension Code Snippets:

1
/**
2
 * Include favicon via wp_head.
3
 * The favicon.png file should be in the root of the child theme.
4
 */
5
add_action( 'wp_head', 'sdstudio_add_favicon' );
6
 
7
function sdstudio_add_favicon() {
8
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10
    echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11
}

Ce qui se passe ici: le hook wp_head insère deux balises <link> dans le <head> de chaque page. La première est un favicon standard pour les navigateurs, la seconde est une icône tactile Apple pour les appareils Apple (iPhone, iPad). La fonction get_stylesheet_directory_uri() renvoie l’URL du thème enfant; le favicon doit être placé à cet endroit, à la racine du dossier du thème.

Renommer le fichier en favicon.ico n’est pas nécessaire. WordPress fonctionne très bien avec le PNG, et les navigateurs le comprennent sans problème. L’essentiel est d’avoir un carré de taille standard.

Si vous liez le favicon non pas depuis le thème mais depuis la racine du site, remplacez get_stylesheet_directory_uri() par home_url() et ajustez le chemin:

1
$favicon_url = home_url( '/favicon.png' );

Après avoir ajouté le code, téléchargez favicon.png dans le dossier correspondant via FTP ou le gestionnaire de fichiers de l’hébergement. Vérifiez le résultat dans une fenêtre de navigation privée.

Méthode 3: via une extension

Si l’outil de personnalisation ne vous permet pas, pour une raison quelconque, de télécharger une icône de site (cela arrive avec les thèmes personnalisés et obsolètes), installez l’extension Site Favicon, qui est minimaliste et gratuite. Installez-la de manière standard: Extensions → Ajouter → recherchez «Site Favicon» → Installer → Activer. Après l’activation, un élément de menu Réglages → Site Favicon apparaît dans l’administration, où vous pouvez télécharger une icône et voir un aperçu immédiatement.

Une autre option est All in One SEO. Si l’extension SEO est déjà présente sur le site, vérifiez ses paramètres: il y a une section de téléchargement d’icône de site qui fait la même chose sans extension supplémentaire. Mais nous ne recommandons pas d’installer une suite SEO lourde uniquement pour un favicon; Site Favicon remplit cette tâche, pèse moins lourd et n’ajoute pas de charge supplémentaire.

Après avoir configuré le favicon avec l’une des trois méthodes, vérifiez que l’icône s’affiche bien: ouvrez le site en mode navigation privée et regardez l’onglet du navigateur.

La vidéo ci-dessus est une démonstration étape par étape des trois méthodes sur un site WordPress réel. Si après lecture vous avez encore des doutes sur l’une des étapes, regardez la vidéo: à 1:15, ils montrent le téléchargement via l’outil de personnalisation, à 3:40, la méthode manuelle.

⁉️🤔 Foire aux questions

Pourquoi le favicon ne s’affiche-t-il pas après le téléchargement via l’outil de personnalisation?

Dans la plupart des cas, le problème vient du cache du navigateur. Les favicons sont mis en cache de manière agressive; le navigateur peut conserver l’ancienne version pendant plusieurs jours. Ouvrez le site en mode navigation privée (Ctrl+Maj+N dans Chrome): si l’icône apparaît, le problème vient effectivement du cache. Videz le cache de votre navigateur ou attendez qu’il expire naturellement. La deuxième raison la plus courante est que le favicon a été téléchargé au format ICO alors que le navigateur attend du PNG. Depuis la version 4.3, WordPress préfère le PNG; téléchargez un carré de taille standard en PNG, comme l’exige la documentation, et le problème disparaîtra.

Puis-je utiliser mon logo comme favicon?

Vous pouvez et vous devriez; c’est une pratique standard. Mais tous les logos ne conviennent pas. Vérifiez l’aspect de votre logo à petite échelle: si les détails se fondent en une masse illisible, créez une version simplifiée. Un bon exemple est l’icône de WordPress (un W sur fond bleu): reconnaissable même à très petite taille. Un logo horizontal avec dix lettres de texte se transformera en une bande grise lorsqu’il sera fortement réduit; pour le favicon, utilisez uniquement le symbole sans le texte.

Pourquoi WordPress exige-t-il un favicon de cette taille précise?

Pour WordPress, oui. Le cœur du système accepte exactement cette taille comme source et génère automatiquement toutes les copies réduites nécessaires; la documentation officielle confirme l’exigence minimale de 512 px de chaque côté. Si vous téléchargez un favicon plus petit (par exemple, 128×128), la mise à l’échelle jusqu’à 512 pixels se fera avec une perte de qualité, et sur les écrans retina, l’icône paraîtra floue. L’exception est si vous liez le favicon manuellement via du code (méthode 2): vous pouvez alors préparer plusieurs tailles et les spécifier avec des balises <link> distinctes.

Comment supprimer ou remplacer un favicon?

Le remplacement se fait via la même interface que celle utilisée pour le téléchargement: Personnaliser → Identité du site → Icône du site → «Supprimer», puis téléchargez-en un nouveau. L’ancienne icône persistera dans le cache du navigateur pendant un certain temps (jusqu’à plusieurs jours); c’est normal. Pour une suppression complète, utilisez le bouton «Supprimer» dans la même interface, après quoi WordPress cessera d’afficher les balises du favicon et le navigateur reviendra à l’espace réservé gris.

Un favicon influence-t-il le SEO?

Directement, non. Google n’utilise pas la présence ou l’absence d’un favicon comme facteur de classement. Indirectement, oui: un site avec un favicon paraît plus professionnel, et les utilisateurs sont moins susceptibles de le confondre avec des concurrents lorsqu’ils naviguent entre les onglets. Cela réduit le taux de pogo-sticking (retour aux résultats de recherche), ce que les moteurs de recherche prennent en compte indirectement. De plus, Google affiche parfois les favicons dans les résultats de recherche mobile; l’icône rend l’extrait visuellement plus visible, ce qui améliore le CTR.

Quelle méthode choisir: un algorithme rapide

Si vous avez un thème standard avec un outil de personnalisation, utilisez la méthode 1. C’est deux clics, et WordPress gère tout le travail technique: redimensionnement, génération des balises, prise en charge Apple et Android. Neuf sites WordPress sur dix résolvent la question du favicon exactement de cette manière.

Un thème personnalisé sans prise en charge de l’icône de site? Liez-la via functions.php (méthode 2); le code en trois lignes vous donne un contrôle total sur les tailles et le format. Réservez l’extension (méthode 3) aux cas où ni l’outil de personnalisation ni la modification du thème ne sont disponibles, par exemple si le site est sur une installation multisite avec des permissions restreintes ou si vous travaillez avec un constructeur de page qui ne donne pas accès à functions.php.

Et surtout: après avoir téléchargé le favicon, vérifiez le site dans une nouvelle fenêtre de navigation privée du navigateur. Ne vous fiez pas à une fenêtre normale; l’ancienne version ou l’espace réservé lui-même peut y être en cache. Vous voyez l’icône dans l’onglet? C’est terminé.