# Taille de logo pour les sites web, les réseaux et l’impression

[Canonical HTML page](https://gradiently.design/fr/guide/logo-sizes)

On demande la bonne taille de logo comme s’il existait un seul chiffre. Ce n’est pas le cas : il y a un fichier maître et une taille raisonnable pour chaque endroit où il apparaît. Voici ces endroits, avec les dimensions et les fichiers à utiliser.

## The short version

- Il n’existe pas une seule bonne taille de logo ; gardez un fichier vectoriel maître et exportez à partir de lui pour chaque endroit où le logo apparaît.
- Sur un site web, utilisez un logo SVG et fixez sa taille par la hauteur en CSS pour qu’il reste net sur tous les écrans.
- Pour les photos de profil sur les réseaux, envoyez une image carrée et gardez le logo bien au centre, car la plupart des plateformes recadrent les photos de profil en cercle.
- Quand vous exportez un logo en PNG, faites-le au moins deux fois plus grand que sa taille d’affichage pour qu’il reste net sur les écrans haute densité.
- Pour l’impression, utilisez un PDF ou un SVG vectoriel, ou un fichier matriciel à 300 dpi à la taille d’impression finale.

Il n’existe pas une seule **taille de logo** qui fonctionne partout. Gardez votre logo en fichier vectoriel maître, un SVG ou un PDF, qui s’agrandit à l’infini sans flou, et exportez à partir de lui pour chaque usage : un SVG dimensionné par la hauteur pour l’en-tête de votre site, une version carrée pour les photos de profil, une version horizontale pour les bannières et un fichier à 300 dpi pour l’impression. Ce qui change d’un endroit à l’autre, c’est la surface et la part que le logo doit en occuper.

## Partez d’un fichier maître, pas d’une taille

Les fichiers vectoriels décrivent des formes plutôt que des pixels : le même fichier est net sur un téléphone comme sur une devanture. Tous les autres fichiers doivent être exportés depuis ce maître, jamais depuis une capture d’écran ou un vieux PNG. Si vous n’avez qu’un petit logo matriciel, faites-le redessiner en vectoriel avant toute chose ; cela vous évitera des soucis à chaque travail suivant.

| Fichier | Type | À utiliser pour |
| --- | --- | --- |
| SVG | Vectoriel | Sites web, apps, et comme maître pour les écrans |
| PDF | Vectoriel | Imprimeurs, signalétique et tout ce qui part chez un fournisseur |
| PNG avec transparence | Matriciel | Présentations, documents, posts sur les réseaux et e-mails |
| JPG | Matriciel | Seulement quand un fond plein convient, jamais pour un logo posé sur de la couleur |

Deux fichiers vectoriels et un PNG transparent couvrent presque toutes les demandes. [SVG ou PNG](https://gradiently.design/fr/guide/svg-vs-png) détaille le compromis.

## Taille de logo pour un site web

Sur un site web, dimensionnez le logo par la hauteur et non par la largeur, pour qu’un logotype large et un symbole compact s’alignent sur la même ligne dans votre en-tête. Utilisez le SVG pour qu’il reste net sur les écrans haute densité, et donnez-lui une largeur maximale raisonnable pour les petits téléphones.

```html
<a class="logo" href="/">
  <img src="/logo.svg" alt="Fern Studio" width="120" height="32">
</a>

<style>
  .logo img {
    height: 32px;   /* set by height */
    width: auto;
    max-width: 40vw; /* never crowds a small phone */
  }
  @media (min-width: 768px) {
    .logo img { height: 40px; }
  }
</style>
```

Les attributs width et height réservent l’espace pour que la page ne saute pas pendant le chargement du logo. Les hauteurs indiquées sont un point de départ ; ajustez-les à votre en-tête.

Votre favicon est un fichier à part, carré et simplifié, pas le logo complet réduit. Les navigateurs l’affichent en très petit, si bien qu’il devient en général une seule lettre ou un symbole. [Le design de favicon](https://gradiently.design/fr/guide/favicon-design) liste les fichiers exacts, et les [consignes de Google sur les favicons](https://support.google.com/webmasters/answer/9290858) demandent une icône carrée dont la taille est un multiple de 48 pixels.

## Taille de logo pour les réseaux sociaux

Les réseaux sociaux utilisent votre logo à deux endroits très différents : la petite photo de profil et la couverture ou bannière large. Ils demandent des versions différentes du logo, pas le même fichier tassé dedans.

### Photos de profil

- Envoyez une image **carrée**. La plupart des plateformes recadrent les photos de profil en cercle, et les coins disparaissent.
- Utilisez votre version **icône ou empilée**, pas un long assemblage horizontal. Un logotype large devient illisible dans un petit cercle.
- Gardez le logo à peu près dans les **deux tiers centraux** du carré, avec un espace égal tout autour.
- Placez-le sur une **couleur unie ou un fond calme** qui remplit le carré, pour que le cercle paraisse voulu.
- Vérifiez-le à sa taille réelle sur votre propre téléphone avant de le changer partout.

Une image de profil carrée avec le logotype fern centré sur un dégradé vert, laissant de l’espace autour pour un recadrage circulaire

Un logotype court, centré avec des marges généreuses, résiste au recadrage circulaire.

Une bannière de profil LinkedIn large avec les mots Fern Studio et Plantes pour petits espaces sur le même dégradé vert

La bannière peut porter le nom complet et une ligne sur vous, car elle en a la largeur.

### Couvertures et bannières

Les images de couverture sont larges et recadrées différemment sur téléphone et sur ordinateur, et la photo de profil chevauche souvent un coin. Gardez votre logo et vos mots près du centre, et laissez le fond aller jusqu’aux bords.

- Couverture Facebook 1640×624: 1640 × 624
- Bannière LinkedIn 1584×396: 1584 × 396
- En-tête X 1500×500: 1500 × 500
- Bannière YouTube 2560×1440: 2560 × 1440

Quatre bannières courantes, à l’échelle. Elles sont toutes bien plus larges que hautes : un logo horizontal ou une simple ligne avec le nom leur convient le mieux.

Sur les posts, le logo est une signature, pas le titre. Un bon point de départ consiste à le garder petit, dans un coin constant, à la même taille sur chaque post, pour qu’il construise la reconnaissance sans faire concurrence au message. [Les tailles d’images pour les réseaux sociaux](https://gradiently.design/fr/guide/social-media-image-sizes) donnent toutes les tailles de posts.

## Taille de logo pour l’e-mail et l’impression

| Usage | Dimensions | Fichier du logo |
| --- | --- | --- |
| En-tête d’e-mail | 1200×600 | PNG, exporté au double de sa taille d’affichage |
| Signature e-mail | 600×200 | Petit PNG ; beaucoup de messageries bloquent le SVG |
| Aperçu de lien (Open Graph) | 1200×630 | Logo gardé près du centre, PNG ou JPG |
| Carte de visite | 1050×600 à 300 dpi | PDF vectoriel issu du maître |
| Flyer A5 | 1748×2480 à 300 dpi | PDF vectoriel issu du maître |
| Affiche A4 | 2480×3508 à 300 dpi | PDF vectoriel issu du maître |

Les formats d’impression sont indiqués en pixels à 300 dpi. Les logos vectoriels s’impriment nets à toute taille ; les logos matriciels demandent 300 dpi à la taille d’impression finale.

L’e-mail est le cas délicat : beaucoup de messageries n’affichent pas les images SVG, utilisez donc un PNG transparent. Exportez-le au double de la largeur d’affichage voulue, puis fixez la largeur d’affichage dans le HTML, pour qu’il reste net sur les écrans de téléphone haute densité. Pour l’impression, lisez [la résolution d’image pour l’impression](https://gradiently.design/fr/guide/image-resolution-for-print) avant d’envoyer quoi que ce soit à un imprimeur, et voyez [le design de signature e-mail](https://gradiently.design/fr/guide/email-signature-design) pour la signature elle-même.

> **Exportez au double de la taille d’affichage** Un PNG affiché sur 200 pixels de large doit être exporté en 400. Les écrans haute densité placent deux pixels physiques ou plus dans chaque pixel CSS, et un logo exporté exactement à la taille d’affichage y paraît flou.

## Toutes les tailles à partir d’une seule création

Le plus fastidieux dans les tailles de logo, ce n’est pas le logo, c’est de reconstruire à chaque fois la couverture, le post, la story et la carte autour de lui. Dans Gradiently, vous pouvez demander les autres tailles au Designer, ou avec Pro décliner une création à toutes les tailles en une étape, et votre fond se rend à neuf dans chaque format au lieu d’être recadré. Les tailles personnalisées vont de 200 à 8 000 pixels quand un fournisseur demande quelque chose d’inhabituel. [Les déclinaisons de logo](https://gradiently.design/fr/guide/logo-variations) indiquent quelle version du logo placer dans chacune.

## FAQ

### Quelle taille doit faire un logo ?

Il n’y a pas une seule taille. Gardez un fichier vectoriel maître et exportez une version par usage : SVG pour les sites, PNG carré pour les photos de profil, bannières larges pour les couvertures et PDF vectoriel pour l’impression.

### Quelle est la meilleure taille de logo pour un site web ?

Utilisez un SVG et fixez sa hauteur en CSS pour qu’il s’adapte à votre en-tête sur tous les écrans. Indiquez les attributs width et height pour que la page ne bouge pas pendant le chargement.

### Quelle taille de logo pour une photo de profil sur les réseaux sociaux ?

Envoyez une image carrée et gardez le logo dans les deux tiers centraux, car la plupart des plateformes recadrent les photos de profil en cercle. Utilisez votre logo icône ou empilé plutôt qu’une version large.

### Quelle résolution pour un logo destiné à l’impression ?

Utilisez un PDF ou un SVG vectoriel, qui s’imprime net à toute taille. Si vous n’avez qu’un fichier matriciel, il lui faut 300 dpi à la taille d’impression finale.

### Pourquoi mon logo est-il flou ?

Il a sans doute été exporté à sa taille d’affichage, ou agrandi à partir d’un petit fichier. Exportez les PNG au double de la taille d’affichage depuis un maître vectoriel, ou utilisez le SVG sur le web.