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

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.

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.

<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>

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 liste les fichiers exacts, et les consignes de Google sur les favicons 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.

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.

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 donnent toutes les tailles de posts.

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

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 avant d’envoyer quoi que ce soit à un imprimeur, et voyez le design de signature e-mail pour la signature elle-même.

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 indiquent quelle version du logo placer dans chacune.