Favicon WordPress qui ne change pas (thème Hub, Elementor) : toutes les méthodes

L’ancien favicon qui ne veut pas mourir

Tu as changé ton favicon. Tu as téléversé ta nouvelle icône, cliqué sur Publier, rechargé la page. Et là, surprise : l’ancien favicon s’affiche toujours dans l’onglet du navigateur. Tu recommences. Même résultat.

C’est l’un des bugs les plus rageants de WordPress, surtout sur les sites construits avec un builder comme Elementor ou un thème premium type « Hub ». Le coupable n’est presque jamais ce que tu crois. Dans 90 % des cas, c’est soit un cache trop agressif, soit une mauvaise source : tu changes le favicon à un endroit, mais c’est un autre réglage qui pilote réellement l’icône.

Le favicon, c’est cette petite image dans l’onglet du navigateur, l’« icône du site ». Voici, dans l’ordre, toutes les méthodes pour le changer, puis pourquoi il reste parfois bloqué.

Méthode 1 — Le Customizer WordPress (la méthode universelle)

C’est la méthode native, celle qui marche sur n’importe quel thème. WordPress appelle le favicon « Icône du site ».

1. Va dans Apparence → Personnaliser.
2. Ouvre l’onglet Identité du site.
3. Repère la section Icône du site → clique sur Sélectionner l’icône du site.
4. Téléverse ton image (ou choisis-la dans la médiathèque).
5. Clique sur Publier en haut.

Ton image doit être carrée et faire au moins 512 × 512 px. Format PNG (idéal, gère la transparence) ou JPG. Une image rectangulaire ou trop petite sera rognée ou floue.

Si ton favicon change ici, c’est gagné. Si rien ne bouge malgré la publication, passe à la suite : ton thème ou Elementor reprend la main par-dessus.

Méthode 2 — Les réglages du thème

Beaucoup de thèmes premium (dont les thèmes « Hub » et les thèmes orientés builder) ont leur propre champ favicon dans leurs options. Et ce champ écrase celui du Customizer.

1. Cherche dans le menu d’admin une entrée du type Options du thème, Theme Settings, Theme Panel ou le nom du thème.
2. Ouvre la section Général, Logo & Favicon ou Identité.
3. Si un favicon y est défini, c’est probablement lui qui s’affiche, pas celui du Customizer.
4. Remplace-le par ta nouvelle image, puis Enregistre.

C’est une cause de blocage classique : tu mets à jour le Customizer, mais le thème impose le sien. Vérifie toujours cet endroit avant d’aller plus loin.

★ Méthode 3 — Elementor (souvent LA solution)

Si ton site est construit avec Elementor (et a fortiori avec le Theme Builder d’Elementor pour l’en-tête, le pied de page, etc.), c’est très souvent Elementor qui pilote le favicon. Tu peux changer le Customizer et les options du thème autant que tu veux : tant que tu n’as pas touché le réglage d’Elementor, rien ne bouge. D’où cette impression d’un favicon « bloqué », impossible à changer.

Voici le chemin exact :

1. Ouvre n’importe quelle page avec Elementor (bouton « Modifier avec Elementor »).
2. En haut à gauche de l’éditeur, clique sur le menu hamburger (les trois barres ☰).
3. Clique sur Réglages du site (Site Settings).
4. Dans le panneau, ouvre Identité du site (Site Identity).
5. Repère le champ Favicon → clique pour choisir ton image (téléverse-la ou prends-la dans la médiathèque).
6. Clique sur Mettre à jour (Update) en bas du panneau.

C’est le réglage le plus souvent oublié. Si tes méthodes 1 et 2 « semblaient ignorées », c’est presque sûr que la réponse est ici. Note que ce panneau Réglages du site ne s’affiche qu’avec Elementor (pas la version gratuite minimale dans tous les cas) — si tu ne le trouves pas, vérifie d’abord que l’éditeur s’ouvre correctement. Si l’éditeur reste bloqué au chargement, règle ça d’abord : on détaille la marche à suivre dans Elementor bloqué au chargement.

Méthode 4 — Un plugin dédié (rendu pro multi-plateformes)

Si tu veux un favicon impeccable partout (onglet desktop, écran d’accueil iOS, Android, tuiles Windows), un plugin spécialisé fait le travail proprement.

Le plus connu : Favicon by RealFaviconGenerator.

1. Installe-le depuis Extensions → Ajouter (cherche « RealFaviconGenerator »).
2. Active-le, puis va dans Apparence → Favicon.
3. Téléverse une image source de bonne qualité (idéalement 512 × 512 px ou plus).
4. Le service génère tous les formats (iOS, Android, Windows, etc.) et injecte le code nécessaire dans le <head>.
5. Enregistre.

Avantage : un seul outil produit l’ensemble des tailles et formats attendus par chaque plateforme. Inconvénient : c’est une source de plus. Si tu l’utilises, désactive le favicon des autres méthodes pour éviter qu’ils se battent (voir plus bas).

Méthode 5 — En code, pour les cas avancés

À réserver aux personnes à l’aise avec le code, et toujours via un thème enfant (sinon ta modif saute à la prochaine mise à jour du thème).

Deux approches :

• Le hook wp_head dans le functions.php de ton thème enfant :

  function peechy_favicon_perso() {
    echo '<link rel="icon" href="' . get_stylesheet_directory_uri() . '/favicon.png" type="image/png">';
  }
  add_action('wp_head', 'peechy_favicon_perso');

• Le code <link> directement dans le <head> du template (header.php), si tu maîtrises la structure du thème.

Prudence : modifier functions.php sur le thème parent peut casser le site et sera écrasé à la prochaine update. Travaille sur un thème enfant, sauvegarde avant, et garde un accès FTP pour revenir en arrière si l’écran blanc apparaît.

Pourquoi le favicon reste bloqué (le vrai cœur du problème)

Tu as changé le favicon « au bon endroit » et il ne bouge toujours pas ? Voici les vraies raisons, par ordre de fréquence.

1. Le cache navigateur (le suspect numéro un)

Le favicon est mis en cache de façon très agressive par les navigateurs. Bien plus que le reste du site. Résultat : tu vois l’ancien alors que le serveur sert déjà le nouveau.

• Fais un hard refresh : Cmd + Shift + R (Mac) ou Ctrl + Shift + R (Windows).
• Teste en navigation privée : si le nouveau favicon apparaît là, c’est 100 % un cache navigateur.
• Ouvre directement tondomaine.com/favicon.ico dans l’onglet : ça force le navigateur à recharger le fichier source.
• En dernier recours, vide complètement le cache du navigateur ou teste sur un autre appareil.

2. Le cache plugin ou serveur

Si tu utilises un plugin de cache (WP Rocket, LiteSpeed Cache, W3 Total Cache, WP Super Cache), il sert peut-être une version figée de tes pages, code du favicon inclus.

→ Purge le cache depuis le tableau de bord du plugin (souvent un bouton « Vider le cache » / « Clear cache » dans la barre d’admin).

3. Le cache CDN (Cloudflare & co)

Si ton site passe par un CDN comme Cloudflare, le favicon est aussi mis en cache à ce niveau-là.

→ Cloudflare : Caching → Configuration → Purge Everything. Attends quelques minutes, puis refais un hard refresh.

4. Le conflit de sources (le piège classique sur Elementor)

C’est LA cause sournoise. Le Customizer, le thème, Elementor et un plugin peuvent chacun définir un favicon. Quand plusieurs sont remplis, ils se battent : un seul gagne, et ce n’est pas forcément celui que tu viens de modifier.

→ La règle : garder UNE seule source pilote, et vider les autres.

• Site sous Elementor ? Garde Elementor comme source unique, et vide le champ favicon du Customizer, des options du thème et du plugin.
• Pas d’Elementor ? Garde le Customizer (ou le thème) et vide le reste.

Une seule source remplie = plus de conflit, plus de surprise.

5. Format ou taille incorrecte

Une image non carrée, trop petite (< 512 px) ou dans un format exotique peut être refusée, rognée bizarrement, ou affichée floue. Repars d’un PNG carré, 512 × 512 px minimum, et re-téléverse.

Checklist rapide « il ne change toujours pas »

Dans l’ordre : identifie la bonne source (Elementor le plus souvent), change l’icône là, purge tous les caches, puis vérifie en navigation privée. Si tu testes hors cache et que c’est bon, le combat est gagné — ce n’est plus qu’une question de temps que le cache des visiteurs expire.

Quand passer la main

Un favicon coincé, ce n’est pas grave en soi. Mais c’est souvent le symptôme d’un site où personne ne sait plus quelle couche pilote quoi : thème premium + Elementor + plugins de cache + CDN, chacun avec ses réglages, parfois contradictoires. Quand on en arrive là, le moindre changement devient une partie de cache-cache.

C’est exactement ce qu’évite un site bien construit et bien entretenu. Si tu veux aller plus loin, on a aussi un guide pour optimiser un site WordPress sous Elementor et un guide complet d’optimisation WordPress qui couvrent ces couches une à une.

Tu veux qu’on s’occupe de ton site sans prise de tête ? Demande un audit gratuit.