Article mis à jour le 21 janvier 2026
Dimensions logo site web (header, favicon et formats optimaux) :
- Logo header site web : 250-300px de largeur × 70-100px de hauteur (500-600px @2x pour écrans Retina).
- Favicon : 32×32px minimum (ICO multi-résolution 16/32/48px ou SVG).
- Format recommandé : SVG pour header (vectoriel scalable), ICO ou PNG pour favicon, WebP pour réseaux sociaux (30% plus léger).
- Poids optimal pour site web : < 50 Ko pour performance Core Web Vitals.
Votre logo est la première impression visuelle de votre marque. Qu’il s’affiche sur votre site WordPress, votre page Facebook ou votre signature email, il doit rester net, lisible et rapide à charger.
Dans ce guide, je vous donne les dimensions exactes par plateforme (site web, Instagram, LinkedIn, YouTube, TikTok), les formats de fichier à privilégier en 2026 (SVG, PNG, WebP, ICO), et les bonnes pratiques techniques pour optimiser la performance de votre site.

Dimensions logo site web
Un logo de site web doit s’adapter à trois emplacements techniques : le header (en-tête), le favicon (icône navigateur), et parfois le footer (pied de page).
Logo header (en-tête de site)
Dimensions standard :
- Desktop : 250-300 pixels de largeur × 70-100 pixels de hauteur
- Mobile : 150-200 pixels de largeur × 50-70 pixels de hauteur
Écrans haute densité (Retina, 4K) :
- Doublez les dimensions : 500-600 × 140-200 pixels
- Le navigateur affichera automatiquement l’image réduite, mais avec une netteté parfaite
Format recommandé : SVG (vectoriel) ou PNG optimisé (< 50 Ko).
Pourquoi ces dimensions ?
Un logo trop grand ralentit le chargement de votre page (pénalité Core Web Vitals), un logo trop petit nuit à la lisibilité sur mobile.
Sur mes projets WordPress chez Adekoite, je standardise à 280 × 80 pixels pour le header, ce qui garantit un équilibre parfait entre visibilité et performance.
WordPress supporte nativement le format SVG depuis la version 5.0, mais de nombreux thèmes bridés ou mal configurés bloquent son upload par sécurité. Si vous envisagez une refonte de site internet, je m’assure que votre installation WordPress accepte les SVG (via plugin sécurisé ou whitelist serveur) et que vos logos s’affichent correctement sur tous les navigateurs.
Favicon (icône navigateur)
Dimensions 2026 :
- Minimum : 32 × 32 pixels (le 16×16 est obsolète sur écrans Retina)
- Recommandé : Fichier ICO multi-résolution contenant 16px, 32px et 48px
- Moderne : Favicon SVG (scalable, ultra-léger < 5 Ko)
Format : ICO (standard universel) ou SVG (navigateurs récents).
Note technique : le format ICO permet d’embarquer plusieurs résolutions dans un seul fichier (16/32/48px), ce qui évite la pixellisation selon le contexte d’affichage (onglet, favoris, barre d’adresse).
Logo footer (pied de page)
Dimensions : 120-150 pixels de largeur × 40-60 pixels de hauteur (généralement 50% plus petit que le header).
Format : SVG ou PNG optimisé.
Image de partage social (Open Graph) : lorsque vous partagez un lien sur Facebook, LinkedIn ou WhatsApp, ces plateformes affichent une image de prévisualisation.
Dimensions : 1200 × 628 pixels (ratio 1.91:1)
Format : PNG ou WebP (< 300 Ko)
Balise HTML : <meta property="og:image" content="url-image.png" />
Les balises Open Graph font partie du SEO technique on-page. Lors d’un audit SEO WordPress, je vérifie systématiquement que vos images de partage social (og:image) sont correctement déclarées, dimensionnées (1200×628px) et compressées. Un bon paramétrage Open Graph améliore votre CTR sur les réseaux sociaux de 30 à 50%.
Tableau récapitulatif : dimensions logo site web
| Emplacement | Dimensions standard | Écrans Retina (@2x) | Format | Poids max |
|---|---|---|---|---|
| Header desktop | 250-300 × 70-100 px | 500-600 × 140-200 px | SVG ou PNG | < 50 Ko |
| Header mobile | 150-200 × 50-70 px | 300-400 × 100-140 px | SVG ou PNG | < 50 Ko |
| Favicon | 32 × 32 px | ICO 16/32/48 px | ICO ou SVG | < 10 Ko |
| Footer | 120-150 × 40-60 px | 240-300 × 80-120 px | SVG ou PNG | < 50 Ko |
| Open Graph | 1200 × 628 px | — | PNG ou WebP | < 300 Ko |
Dimensions logo réseaux sociaux (Guide 2026)
Les réseaux sociaux imposent des contraintes techniques strictes. Voici les dimensions officielles mises à jour pour 2026.
Facebook / Meta
Photo de profil : 400 × 400 pixels minimum (affichée 170×170, mais uploadée en haute résolution pour éviter la compression algorithmique).
Photo de couverture : 820 × 312 pixels.
Image partagée (lien) : 1200 × 628 pixels (Open Graph).
Format : PNG ou JPG (< 2 Mo).
Photo de profil : 320 × 320 pixels minimum (affichée 110×110).
Post carré : 1080 × 1080 pixels.
Post vertical : 1080 × 1350 pixels (ratio 4:5).
Story / Reels : 1080 × 1920 pixels (ratio 9:16).
Format : JPG ou PNG (< 8 Mo).
Photo de profil (personnel) : 400 × 400 pixels.
Bannière profil : 1584 × 396 pixels.
Logo page entreprise : 300 × 300 pixels.
Image post : 1200 × 627 pixels.
Format : PNG (transparence) ou JPG.
YouTube
Photo de profil (chaîne) : 800 × 800 pixels.
Bannière chaîne : 2560 × 1440 pixels (zone sûre visible sur tous appareils : 1546×423 pixels).
Vignette vidéo : 1280 × 720 pixels (ratio 16:9).
Format : JPG ou PNG (< 6 Mo pour bannière).
Twitter / X
Photo de profil : 400 × 400 pixels.
Bannière : 1500 × 500 pixels.
Image tweet : 1200 × 675 pixels (ratio 16:9) ou 1200 × 628 (Open Graph).
Format : PNG, JPG ou GIF (< 5 Mo).
TikTok
Photo de profil : 200 × 200 pixels minimum.
Vidéo (ratio optimal) : 1080 × 1920 pixels (9:16 vertical plein écran).
Format : JPG ou PNG pour profil.
Quel format de fichier choisir pour votre logo ?
Le choix du format impacte directement la qualité visuelle, le poids du fichier et la performance de votre site.
SVG (Scalable Vector Graphics) : Format recommandé 2026
Définition : Format vectoriel (basé sur des formules mathématiques, pas sur des pixels).
Avantages :
- Zéro perte de qualité quel que soit le zoom ou la taille d’affichage
- Poids ultra-léger : 5-15 Ko en moyenne (vs 50-150 Ko pour PNG)
- Modifiable en CSS (changement de couleur, animation)
- Compatible 98% des navigateurs (Chrome, Firefox, Safari, Edge)
Inconvénients :
- Ne convient pas aux logos complexes avec photos ou dégradés subtils
- Nécessite un export propre depuis Illustrator, Figma ou Inkscape
Usage recommandé : Logo header site web, footer, email signature.
Mon conseil (Adekoite) : Sur tous mes projets WordPress, j’exporte les logos en SVG. Cela divise le poids par 10 et garantit une netteté parfaite sur écrans 4K, tablettes et mobiles.
PNG (Portable Network Graphics) — Standard universel
Avantages :
- Transparence alpha (fond transparent)
- Compression sans perte (qualité préservée)
- Compatibilité 100% (tous navigateurs, réseaux sociaux, print)
Inconvénients :
- Poids élevé (30-150 Ko selon complexité)
- Format bitmap : pixellisation au zoom
Usage recommandé : Favicon (si pas ICO), logos complexes (dégradés, ombres portées), réseaux sociaux.
Compression obligatoire : Utilisez TinyPNG, Squoosh ou ImageOptim pour réduire le poids de 60-80% sans perte visuelle. Visez < 100 Ko.
L’optimisation des images (logos, photos, icônes) représente 40% des gains de performance sur un site WordPress. Si votre site e-commerce WooCommerce affiche des dizaines de logos partenaires ou certifications, la compression automatique (via plugin Imagify ou ShortPixel) devient indispensable pour maintenir un temps de chargement compétitif.
WebP — Format moderne haute compression
Avantages :
- 30% plus léger que PNG à qualité visuelle identique
- Transparence alpha
- Support navigateurs modernes (Chrome, Firefox, Edge, Safari iOS 14+)
Inconvénients :
- Nécessite un fallback PNG pour Safari < iOS 14
- Moins universel que PNG pour le print
Usage recommandé : Images Open Graph (partage social), logos e-commerce, sites à fort trafic mobile.
Outil de conversion : Squoosh.app (Google), Cloudflare Polish, plugins WordPress (ShortPixel, Imagify).
ICO (Icon) — Standard favicon
Avantages :
- Multi-résolution : embarque 16px, 32px et 48px dans un seul fichier
- Compatibilité navigateurs anciens (IE, Edge Legacy)
Inconvénients :
- Usage limité au favicon uniquement
- Taille fixe (pas scalable comme SVG)
Usage recommandé : Favicon site web.
Générateur en ligne : Favicon.io, RealFaviconGenerator, Favicon Generator (gratuits).
À éviter en 2026 :
JPEG : Compression avec perte (artefacts), pas de transparence, inadapté aux logos (réservé aux photos).
GIF : Palette 256 couleurs (rendu médiocre), obsolète (remplacé par WebP pour animations), trop lourd pour un site web.
Récapitulatif : quel format pour quel usage ?
| Usage | Format prioritaire | Format alternatif | Poids cible |
|---|---|---|---|
| Logo header site | SVG | PNG optimisé | < 15 Ko (SVG) / < 100 Ko (PNG) |
| Favicon | ICO (16/32/48px) | SVG ou PNG 32px | < 10 Ko |
| Réseaux sociaux | PNG | WebP | < 300 Ko |
| Open Graph (partage) | WebP | PNG | < 200 Ko |
| Email signature | PNG | SVG (si client mail compatible) | < 50 Ko |
| Print (flyer, carte) | PDF vectoriel | PNG 300 DPI | — |
FAQ : Taille et format logo (2026)
Quelle taille de logo pour un site WordPress ?
250-300 pixels de largeur × 70-100 pixels de hauteur pour le header desktop. Pour les écrans Retina (MacBook, iPhone), doublez les dimensions (500×200px) et compressez le fichier en SVG ou PNG optimisé (< 100 Ko). Le format SVG est recommandé car vectoriel et ultra-léger (5-15 Ko).
L’intégration technique d’un logo fait partie du forfait de base lors d’une création de site WordPress. Si vous vous demandez combien coûte un site vitrine WordPress en 2026, sachez que l’optimisation des logos (export multi-format, compression, responsive) est incluse dans mes prestations dès 1 500 € HT.
Favicon : 16×16 ou 32×32 pixels ?
32×32 pixels minimum en 2026. Idéalement, utilisez un fichier ICO multi-résolution (16/32/48px dans un seul fichier) ou un favicon SVG pour une qualité parfaite sur tous écrans. Le 16×16 est obsolète sur écrans haute densité (Retina, 4K, tablettes).
PNG ou SVG pour un logo de site web ?
SVG est préférable pour 98% des cas : vectoriel (zéro pixellisation au zoom), poids 5-15 Ko (vs 50-150 Ko pour PNG), modifiable en CSS. Utilisez PNG uniquement pour logos complexes (photos, dégradés subtils) ou si contraintes techniques (CMS ancien). Compressez toujours avec TinyPNG ou Squoosh (visez < 100 Ko).
Quelle taille de logo pour partage Facebook/LinkedIn ?
1200 × 628 pixels (ratio 1.91:1), format PNG ou WebP (< 300 Ko). C’est la dimension Open Graph standard affichée lors du partage de lien sur Facebook, LinkedIn, Twitter/X. Ajoutez la balise HTML <meta property="og:image" content="url-image.png" /> dans le <head> de vos pages.
Comment optimiser le poids d’un logo pour la performance web ?
Ciblez < 100 Ko maximum pour le header. Utilisez SVG pour logos simples (5-15 Ko), PNG compressé avec TinyPNG ou Squoosh pour logos complexes (30-80 Ko), et WebP pour images réseaux sociaux (30% plus léger que PNG). Vérifiez l’impact avec Google PageSpeed Insights (score Core Web Vitals).
Mon logo s’affiche pixellisé sur iPhone/MacBook, pourquoi ?
Votre logo est probablement en 72 DPI (résolution écran standard) alors que les écrans Retina affichent en 144-220 DPI. Solution : exportez votre logo en dimensions doubles (ex : 600×200px au lieu de 300×100px) ou utilisez un SVG (vectoriel, donc toujours net).
Besoin d'intégrer votre logo sur un site WordPress performant ?
Chez Adekoite, j'intègre vos logos au format optimal (SVG header, ICO favicon, PNG/WebP réseaux sociaux) en respectant les standards de performance Google (Core Web Vitals, score Lighthouse 90+).
Mes services :
- Création de site vitrine WordPress (dès 1 500 € HT)
- Création de site e-commerce WooCommerce
- Refonte complète de site
- Optimisation performance et SEO technique
- Formation à la gestion de votre site WordPress
Discutons de votre projet → contact@adekoite.fr | 06 50 78 58 00
Cet article reflète mon expertise terrain acquise sur 100+ sites WordPress livrés depuis 2015. Les dimensions et formats recommandés sont testés et validés sur des projets réels.