Une favicon WordPress bien choisie aide immédiatement à reconnaître un site parmi plusieurs onglets ouverts. Je vous montre comment sélectionner une icône lisible, l’ajouter dans WordPress selon votre thème et résoudre les problèmes d’affichage les plus courants. Vous verrez aussi pourquoi un simple logo réduit n’est pas toujours une bonne favicon.
L’essentiel pour une icône de site efficace
- Format recommandé : une image carrée d’au moins 512 × 512 pixels.
- Design lisible : un symbole simple, contrasté et sans petit texte.
- Thème classique : réglage dans Apparence, Personnaliser et Identité du site.
- Thème bloc : réglage dans Apparence, Éditeur et Identité.
- Problème d’affichage : le cache du navigateur est souvent responsable.
Pourquoi l’icône du site compte vraiment
La favicon est la petite image visible dans l’onglet du navigateur, les favoris et parfois les raccourcis mobiles. Elle ne remplace pas le logo affiché dans l’en-tête, car elle doit rester identifiable à une taille parfois proche de 16 × 16 pixels.
Sur un site éditorial comme Pchq.fr, cette petite marque visuelle facilite le retour vers un onglet déjà ouvert. Elle renforce aussi la cohérence de l’identité graphique, même si elle n’est pas un facteur de classement direct dans Google. Je la considère comme un détail d’interface discret, mais important, au même titre que le titre de page ou la couleur des boutons.
Le logo complet fonctionne rarement tel quel. À cette échelle, un nom de marque long devient illisible et les détails disparaissent. Je préfère généralement isoler un symbole, une initiale ou une forme distinctive plutôt que de réduire tout le logo dans un carré.
Choisir un fichier qui reste lisible en petit
WordPress demande une image carrée d’au moins 512 × 512 pixels pour l’icône du site. Cette résolution laisse assez de marge pour les différents usages, mais elle ne garantit pas à elle seule un bon résultat. Une image complexe restera confuse, même si elle est techniquement assez grande.
Les caractéristiques d’une bonne favicon
- Un fond uni ou transparent avec un contraste net.
- Un seul élément principal, facilement reconnaissable.
- Des formes épaisses plutôt que des traits très fins.
- Aucun slogan ni texte de petite taille.
- Une composition centrée avec une marge suffisante sur les bords.
Le PNG est le choix le plus simple pour la majorité des sites WordPress. Il gère la transparence et donne de bons résultats dans les navigateurs actuels. Le format ICO reste utile pour une configuration manuelle ou une compatibilité ancienne, mais il n’est généralement pas nécessaire avec la fonction native d’icône du site.
| Format | Usage conseillé | Point d’attention |
|---|---|---|
| PNG | Choix courant dans WordPress | Prévoir une image carrée et légère |
| ICO | Configuration manuelle ou ancienne | Moins pratique à gérer dans la Médiathèque |
| SVG | Icône vectorielle dans une intégration maîtrisée | La prise en charge dépend du thème et de la configuration |
Avant de téléverser l’image, je la teste à 32 × 32 puis 16 × 16 pixels. Si le symbole ne se distingue plus dans cet aperçu, il faut simplifier le dessin. C’est une étape rapide qui évite de découvrir trop tard une icône nette dans la Médiathèque, mais illisible dans un onglet.
Ajouter la favicon dans WordPress selon votre thème
Avec un thème classique
Dans le tableau de bord, ouvrez Apparence > Personnaliser > Identité du site. Choisissez ensuite l’option « Icône du site », téléversez votre image ou sélectionnez-la dans la Médiathèque, puis publiez la modification.
WordPress affiche normalement un aperçu avant validation. Utilisez-le pour vérifier que le sujet principal reste bien visible dans le carré. Cette méthode ne demande ni extension ni modification de fichier et reste, selon moi, la solution la plus sûre pour un thème classique.
Avec un thème basé sur des blocs
Les thèmes modernes basés sur des blocs proposent généralement le réglage dans Apparence > Éditeur > Identité. Selon l’interface utilisée, vous pouvez aussi sélectionner le bloc « Logo du site », ouvrir ses réglages et activer « Utiliser comme icône de site ».
Après avoir choisi l’image, cliquez sur Enregistrer. Le logo et l’icône peuvent utiliser le même fichier, mais ce n’est pas toujours le meilleur choix. Un logo horizontal est adapté à l’en-tête, tandis qu’une favicon doit être pensée pour un format carré et minuscule.
Quand l’option n’apparaît pas
Un ancien thème ou une configuration particulière peut ne pas afficher le réglage prévu. Dans ce cas, commencez par vérifier que vous utilisez bien le bon menu d’apparence et que le thème actif est à jour. Installer une extension uniquement pour une favicon me paraît rarement justifié, puisque WordPress intègre cette fonction depuis longtemps.
La configuration manuelle doit rester un dernier recours. Elle peut consister à placer un fichier à la racine du site et à ajouter une balise dans l’en-tête, par exemple :
Si vous choisissez cette voie, utilisez de préférence un thème enfant ou une méthode prévue par votre hébergeur. Modifier directement le fichier du thème parent peut faire disparaître votre changement lors de la prochaine mise à jour.
Vérifier l’affichage et corriger les problèmes courants
Après l’enregistrement, ouvrez le site dans un nouvel onglet et contrôlez plusieurs pages. Une favicon peut apparaître sur la page d’accueil mais manquer ailleurs si le thème ou le code personnalisé génère plusieurs en-têtes. Dans une installation WordPress normale, l’icône doit être disponible sur l’ensemble du site.
Si l’ancienne image reste visible
Le navigateur conserve souvent l’ancienne icône dans son cache, c’est-à-dire une copie locale destinée à accélérer le chargement. Testez le site en navigation privée, rechargez la page avec forçage du cache ou vérifiez-la depuis un autre navigateur.
Les extensions de cache WordPress et certains CDN peuvent également servir une ancienne version. Purgez leur cache après la modification, puis attendez quelques minutes avant de conclure que la favicon ne fonctionne pas.
Si l’image est floue ou mal cadrée
Le problème vient généralement du fichier source. Une image trop petite, non carrée ou remplie de détails sera agrandie ou recadrée de manière peu flatteuse. Recréez une version à partir d’un fichier propre de 512 × 512 ou 1024 × 1024 pixels, puis recentrez le symbole.
Lire aussi : Thème enfant Astra - Votre guide complet pour une personnalisation réussie
La petite checklist finale
- L’image est-elle carrée et suffisamment grande ?
- Le symbole reste-t-il reconnaissable à 16 pixels ?
- Le contraste fonctionne-t-il sur un onglet clair comme sur un onglet sombre ?
- Le cache du navigateur, du site ou du CDN a-t-il été vidé ?
- L’icône apparaît-elle sur ordinateur et sur mobile ?
Je conseille aussi de vérifier l’affichage dans Chrome, Firefox et Safari. Les navigateurs ne rafraîchissent pas toujours l’icône au même moment, ce qui peut donner l’impression d’une erreur alors que la nouvelle image est bien en place.
Une favicon réussie se reconnaît quand le site devient minuscule
Pour ce type d’élément, la simplicité fait presque toujours la différence. Préparez une image carrée, utilisez la fonction native de WordPress, puis testez-la dans un véritable onglet plutôt que de vous fier uniquement à l’aperçu de l’administration.
Mon conseil final est simple : choisissez un signe qui représente votre marque sans chercher à tout faire tenir dans 16 pixels. Une icône claire, contrastée et cohérente avec votre univers visuel donnera une impression plus professionnelle qu’un logo complet illisible.
