Ajouter logo favicon WordPress : formats, tailles et placements
Pour ajouter logo favicon WordPress sans flou ni pixellisation, préparez un logo en PNG (ou SVG maîtrisé) et une icône en 512×512 px. Chargez un logo d’environ 250 à 350 px de large pour l’affichage standard, prévoyez une version 2× pour écrans Retina, et un favicon carré 512×512 que WordPress déclinera en plusieurs tailles.
Choisir des formats adaptés au logo et au favicon
En formation, 8 sites sur 10 que je vois utilisent un logo PNG transparent, ce qui suffit dans la majorité des cas. Le JPG ne gère pas la transparence et amène souvent des bords sales sur les en‑têtes colorés.
Évitez d’envoyer un logo en 4000 px « pour être tranquille ». WordPress l’affichera en plus petit, mais le poids restera élevé et vous perdrez des points en performance.
Tailles et résolutions recommandées selon les emplacements
Les largeurs exactes varient avec votre thème, mais les fourchettes ci‑dessous tiennent bien en pratique. Travaillez toujours en 1× et 2× pour la netteté sur écrans haute densité.
| Emplacement | Taille recommandée (px) | Format | Poids visé | Notes utiles |
|---|---|---|---|---|
| Logo en‑tête desktop | Largeur 250–350 (hauteur auto) | PNG (ou SVG maîtrisé) | < 60–90 Ko | Prévoir une version 2×, ex. 600 px pour un affichage à 300 px. |
| Logo en‑tête mobile | Largeur 160–220 | PNG | < 40–70 Ko | Version 2×, ex. 440 px pour un affichage à 220 px. |
| Logo sur fond sombre | Mêmes tailles | PNG | Identique | Version inversée/blanche pour header sombre ou transparent. |
| Logo pied de page | Largeur 160–240 | PNG | < 40–70 Ko | Souvent plus petit que dans l’en‑tête. |
| Favicon (Icône du site) | 512 × 512 (carré) | PNG | < 50–80 Ko | WordPress génère automatiquement les tailles nécessaires. |
Retenez la règle simple pour la netteté Retina : préparez un visuel deux fois plus grand que la taille d’affichage réelle et laissez le thème le réduire via CSS.
Tutoriel pas à pas pour ajouter logo et favicon dans WordPress
- Préparer les fichiers sources. Exportez votre logo en PNG fond transparent, largeur 300 px (et une version 600 px pour la 2×), puis un favicon en 512×512 px. Erreur fréquente : exporter sur fond blanc « provisoire » et découvrir un halo autour des lettres sur l’en‑tête sombre.
- Ajouter le logo avec un thème de blocs (Éditeur du site). Allez dans Apparence > Éditeur, ouvrez le modèle d’en‑tête et insérez/éditez le bloc « Logo du site ». Réglez la largeur d’affichage (ex. 300 px) et vérifiez le résultat sur desktop et mobile. Erreur fréquente : réduire le logo via l’outil de recadrage de l’éditeur d’images au lieu d’ajuster la largeur du bloc, ce qui dégrade la netteté.
- Ajouter le logo avec un thème classique (Personnaliser). Allez dans Apparence > Personnaliser > Identité du site (ou En‑tête selon le thème), chargez le logo et ajustez le curseur de taille. Sur des thèmes complets comme Kadence, des réglages par appareil existent ; voyez la prise en main du thème Kadence pour les options typiques. Erreur fréquente : forcer une hauteur fixe trop petite, qui écrase le logo sur mobile.
- Gérer les variantes clair/sombre et le sticky header. Si votre en‑tête devient collant ou transparent, préparez une version claire et une version sombre. De nombreux thèmes permettent de définir un logo alternatif pour le sticky. Erreur fréquente : laisser un seul logo sombre qui disparaît sur un fond de menu noir.
- Ajouter le favicon (Icône du site). Dans un thème classique : Apparence > Personnaliser > Identité du site > Icône du site, puis chargez un PNG carré 512×512 px et validez le recadrage. Dans un thème de blocs : ouvrez l’Éditeur du site, puis les Réglages du site et renseignez l’« Icône du site ». Erreur fréquente : envoyer un rectangle non carré, recadré à la volée avec des bords coupés.
- Vérifier sur plusieurs appareils et purger le cache. Ouvrez le site dans un navigateur privé, vérifiez l’onglet de la page (favicon), le raccourci mobile et le rendu du logo sur mobile/Retina. Purgez le cache du site/CDN si vous utilisez un plugin de cache. Erreur fréquente : croire que « le favicon ne marche pas » alors que l’ancien est encore en cache navigateur.
SVG : si vous choisissez ce format, sécurisez‑le (sanitization) et testez sur votre thème. Sans garde‑fou, un SVG peut embarquer du code et WordPress bloque son upload par défaut pour cette raison.
Emplacements et cas particuliers dans le thème
Les en‑têtes transparents demandent un logo contrasté. Prévoyez une version claire et une sombre, et activez l’option « logo alternatif » quand votre thème le permet, notamment pour le menu qui change de couleur au scroll.
Sur un thème de blocs, gérez le logo directement dans les modèles et les parties de modèle. Si vous hésitez entre ancien et nouvel éditeur, l’article thèmes de blocs et Éditeur du site : faut-il s’y mettre ? vous aidera à trancher.
Sur les thèmes classiques riches en options, chaque emplacement peut avoir son propre champ de logo (desktop, mobile, sticky). C’est fréquent sur Kadence, Astra et consorts.
Si vous refondez l’en‑tête et le pied de page, organisez vos emplacements avant d’optimiser les images. Ce tutoriel sur créer un en‑tête et un pied de page personnalisés vous aidera à structurer zones et versions du logo.
Netteté, poids et performance : éviter le flou et le baveux
La netteté dépend d’abord de la taille d’affichage. Servez un fichier 2× et laissez le thème afficher le logo à la moitié pour les écrans denses. Inutile d’aller au‑delà : au‑dessus de 2×, vous augmentez le poids sans gain visible.
Évitez d’étirer un petit fichier pour le faire rentrer dans un grand en‑tête. C’est l’erreur la plus fréquente que je croise en formation : un PNG 150 px affiché à 320 px sera irrémédiablement flou.
Compressez sans casser les bords fins : sur un logo avec typos légères, un PNG un peu plus lourd sera souvent plus net qu’un JPG agressivement compressé.
Pour la cohérence de marque, gardez la même variante du logo dans l’onglet, l’en‑tête et les aperçus enregistrés. La lisibilité du favicon reste prioritaire, surtout sur fond sombre des navigateurs mobiles.
Si vous travaillez votre visibilité dans des résultats enrichis ou des moteurs génératifs, la cohérence visuelle du logo complète vos autres signaux. Cet article sur le géoréférencement dans les moteurs génératifs détaille plutôt l’aspect contenu et données, mais l’identité doit rester alignée.
Erreurs courantes et corrections rapides
- Logo flou sur mobile : exportez une version 2× (ex. 600 px pour un affichage à 300 px) et réglez la largeur via le bloc/logo du thème.
- Favicon illisible : simplifiez. En 16–32 px, un logo complexe devient une tache. Utilisez l’initiale ou un pictogramme clair en 512×512, haut contraste.
- Contour clair « fantôme » autour du logo : supprimez l’arrière‑plan dans l’éditeur d’images et exportez en PNG transparent, sans halo.
- Logo trop lourd : retirez les marges vides, réduisez à 300–350 px de large, compressez modérément, servez une version mobile dédiée si le thème le permet.
- Couleurs ternes : exportez en sRGB et évitez les profils CMJN. Vérifiez le rendu sur Chrome et Safari.
- SVG non accepté : c’est normal côté WordPress core. Si vous tenez à l’SVG, autorisez‑le proprement et nettoyez le fichier, ou restez en PNG.
Questions fréquentes
Dois‑je fournir un fichier ICO pour le favicon ?
Non. Un PNG carré 512×512 px suffit ; WordPress génère les différentes tailles pour les navigateurs et appareils. L’ICO ne pose pas de problème, mais il est devenu inutile dans la plupart des cas.
Mon logo est net en PNG mais flou sur le site : pourquoi ?
Le plus souvent, il est affiché plus grand que sa taille réelle. Exportez une version 2× et laissez le thème l’afficher à la moitié de sa largeur. Vérifiez aussi que le thème ne force pas une hauteur fixe trop petite.
Le favicon ne se met pas à jour malgré un nouvel upload : que faire ?
Videz le cache du site et du CDN, puis forcez le rafraîchissement du navigateur ou testez en navigation privée. Certains navigateurs mémorisent longtemps l’ancienne icône, le nouveau favicon finira par s’afficher après purge.
Se former pour aller plus vite sur WordPress
Si vous voulez mettre en place logo, favicons et en‑têtes complets sans tâtonner, la formation WordPress débutant couvre l’Éditeur du site, les thèmes classiques et les bonnes pratiques d’images, en petits groupes et en direct.
