Les formats de logo à avoir pour son site et ses réseaux

01Comprendre les formats de fichiers

Il existe deux grandes familles. Les formats vectoriels (SVG, AI, EPS, PDF vectoriel) décrivent le logo par des formes mathématiques : on peut l'agrandir à l'infini sans perte de netteté. Les formats matriciels (PNG, JPEG, WebP) sont composés de pixels : agrandis, ils deviennent flous.

Le fichier vectoriel est votre original. Tous les autres en découlent. Si vous ne possédez qu'un JPEG de votre logo, demandez la version vectorielle à votre graphiste : c'est la première chose dont un imprimeur ou un prestataire web aura besoin.

02Les versions indispensables

Un logo doit s'adapter à des espaces très différents : une large barre de navigation, un petit rond de profil Instagram, un fond noir, un tampon sur un papier de soie. Chaque situation demande sa version.

1. Version horizontale : le logo complet, en largeur. C'est celle de l'en-tête du site et des signatures e-mail.
2. Version carrée ou empilée : le nom sous le symbole, ou le monogramme seul. Pour les réseaux sociaux et les petits formats.
3. Version monochrome noire : pour les documents, les tampons, les fonds clairs.
4. Version monochrome blanche : pour poser le logo sur une photo ou un fond sombre.
5. Symbole ou monogramme seul : pour le favicon et les très petites tailles où le nom n'est plus lisible.

03Préparer le logo pour le site

Pour l'en-tête, utilisez la version horizontale en SVG si votre thème l'accepte, sinon en PNG transparent. Exportez le PNG au moins deux fois plus large que sa taille d'affichage : un logo affiché à 200 px de large doit être exporté à 400 px pour rester net sur les écrans haute définition.

Recadrez le fichier au ras du logo, sans grande marge transparente autour. Sinon, le logo paraît minuscule et décalé dans l'en-tête.

04Le favicon, la petite icône de l'onglet

Le favicon est la minuscule image affichée dans l'onglet du navigateur, les favoris et parfois les résultats de recherche Google sur mobile. À cette taille, un nom écrit en entier devient illisible : utilisez votre monogramme ou symbole, bien centré dans un carré.

Sur Shopify, le favicon se règle dans l'éditeur de thème, dans les paramètres du thème, à la rubrique du logo. L'éditeur du thème Dawn indique que l'image sera réduite à 32 × 32 px : envoyez un carré net, par exemple 512 × 512 px.

Sur WordPress, il s'appelle « Icône du site ». Selon votre thème, il se trouve dans Apparence › Personnaliser › Identité du site, ou dans les réglages de l'éditeur de site. WordPress demande une image carrée d'au moins 512 × 512 px.

05Les bonnes tailles par usage

Les réseaux sociaux affichent la photo de profil dans un cercle : centrez la version carrée avec une marge suffisante pour que rien ne soit coupé. Exportez toujours plus grand que la taille d'affichage, les plateformes réduisent l'image elles-mêmes.

06Ranger et partager votre kit logo

Réunissez toutes les versions dans un seul dossier partagé (Google Drive, Dropbox), avec trois sous-dossiers : web, impression, réseaux. Ajoutez votre charte graphique et vos codes couleur.

Le jour où un prestataire, un journaliste ou un revendeur vous demande votre logo, vous envoyez un lien plutôt qu'un fichier pris au hasard dans vos e-mails.

?Questions fréquentes