Préparer votre logo pour le site web, la signature e-mail et le favicon

Pour préparer un logo pour un site web, faites d’un fichier maître un petit kit : un SVG optimisé pour l’en-tête et le pied de page, des versions PNG en deux ou trois largeurs pour les signatures e-mail, les documents et les formulaires d’envoi, une photo de profil carrée, un jeu de favicons avec ses balises HTML et les couleurs de la marque en valeurs exactes. À partir du SVG du graphiste, SchweizerIMG crée chacun de ces fichiers dans votre navigateur, en quelques traitements.

Ce cas d’utilisation donne la liste de contrôle et l’ordre de travail. Pourquoi le fichier maître doit être un vecteur est expliqué dans SVG ou PNG pour un logo, et quelles tailles d’icônes attendent navigateurs et écrans d’accueil dans les tailles de favicon expliquées. Un logo pas encore publié — une nouvelle identité avant sa date de lancement — ne quitte jamais votre appareil pendant le travail ; voir la page sécurité.

Le kit logo : les fichiers dont le site d’une PME a besoin

Avant de commencer : demander les bons fichiers au graphiste

• Le fichier maître en SVG, avec le texte vectorisé. SchweizerIMG ne charge jamais de polices externes et dessine le texte restant avec ses polices intégrées ; un logotype dans une police particulière pourrait sinon changer.
• Le symbole seul, sans le logotype. Il devient le favicon et la photo de profil, là où un logo complet est trop petit pour être lu.
• Une version claire pour les fonds sombres — un pied de page sombre, un thème e-mail sombre.
• Les valeurs de couleur utilisées par le graphiste, surtout pour l’impression. Les couleurs prélevées dans un fichier sont des valeurs d’écran.

Préparer un logo pour site web, étape par étape

Chaque étape est un traitement, et un traitement est une opération. Continuer avec un autre outil transmet un résultat sans le télécharger entre-temps — voir enchaîner les outils.

1. 1

   Optimiser le SVG

   Ouvrez Optimiser un SVG et ajoutez le fichier maître. Sûr (conserve ids, classes et styles) est le bon préréglage si votre site met le logo en forme par CSS ; sinon Agressif (le plus léger). Laissez Vérifier que le résultat est identique activé, et conservez le titre et la description : les lecteurs d’écran les lisent. Les scripts et fichiers liés sont d’abord supprimés.

2. 2

   Exporter les versions PNG et WebP

   Dans SVG en PNG, JPG, WebP ou AVIF, réglez Taille selon sur Largeur et indiquez plusieurs largeurs, par exemple 400 et 800 — une image chacune, en un traitement. Laissez l’arrière-plan transparent. Choisissez PNG pour l’e-mail et les documents, puis refaites un traitement en WebP pour les pages web.

3. 3

   Créer une photo de profil carrée

   Exportez le symbole dans une largeur, puis ouvrez Agrandir le canevas avec Obtenir : Carré et une couleur de remplissage de votre marque. Laissez de l’espace autour du signe : beaucoup de photos de profil s’affichent en cercle.

4. 4

   Créer le jeu de favicons

   Ouvrez Favicon et icônes d’app avec le SVG du symbole, ajoutez un peu d’espace et une couleur d’arrière-plan pour les icônes Apple et adaptatives, et indiquez l’emplacement des fichiers sur le site. Téléchargez le jeu et collez les balises de snippet.html dans le <head>.

5. 5

   Noter les couleurs de la marque

   Ouvrez un PNG du logo dans Pipette et palette, prélevez les couleurs exactes ou laissez l’outil extraire la palette, et créez les variables CSS (.css), le JSON et une image de nuancier (.png). Chaque couleur est fournie en HEX, RGB, HSL, HSV et OKLCH.

Seulement un JPG ou un PNG du logo ? Le nettoyer ou le vectoriser

Beaucoup de PME n’ont plus leur logo que sous forme d’image tirée d’un ancien site ou d’un e-mail. Deux outils aident, dans des limites claires :

• Arrière-plan transparent : Supprimer la couleur d’arrière-plan rend transparent un arrière-plan régulier d’après sa couleur — sans IA. Couleur d’arrière-plan sur auto la détecte sur les bords. Relié aux bords (conserve les zones enclavées) garde le blanc à l’intérieur des lettres comme le O ; Partout dans l’image le supprime aussi là. Augmentez la Tolérance pour un JPG avec du bruit de compression, et laissez Lisser les bords activé. Un dégradé ou une photo en arrière-plan ne s’enlève pas proprement.
• De nouveau un vecteur : Image en SVG (vectorisation) reconstruit les logos simples en aplats sous forme de formes ; le préréglage Logo (jusqu’à 8 couleurs unies) convient à la plupart. Le résultat est une reconstruction, pas le fichier du graphiste : vérifiez-le en grand et en petit, et partez de la source la plus grande et la plus nette dont vous disposez. Les plans qui comprennent Image en SVG (vectorisation) figurent sur la page des tarifs.

Avant la mise en ligne : le dernier contrôle

• En-tête sur un téléphone et un écran haute densité : le SVG doit être net, le logotype lisible.
• Fonds clairs et sombres : un logo foncé sur un PNG transparent disparaît dans un thème e-mail sombre — utilisez-y la version claire.
• L’onglet et l’écran d’accueil : le favicon doit être reconnaissable à 16 pixels et ne pas être coupé sur un téléphone.
• Des noms de fichier cohérents : par exemple muster-ag-logo-800.png, pour que vos collègues prennent le bon fichier.
• Un dossier pour le kit : SVG maître, exports, jeu de favicons et fichier de couleurs ensemble, pour que la prochaine mise à jour parte des mêmes fichiers.

Les agences qui préparent de tels kits pour plusieurs clients trouveront la méthode complète sur la page consacrée aux agences.

Questions fréquentes

Quels fichiers de logo le site d’une PME doit-il avoir ?

Un SVG optimisé pour le site, des PNG transparents en deux ou trois largeurs pour l’e-mail et les documents, une photo de profil carrée, un jeu de favicons et les valeurs de couleur. Un seul SVG maître suffit pour tout créer.

Puis-je faire un favicon à partir d’un logo avec un long logotype ?

Prenez plutôt le symbole ou une initiale : un logotype est illisible à 16 pixels. S’il n’y a pas de symbole, Favicon et icônes d’app crée aussi le jeu à partir d’un texte ou d’un emoji sur une couleur de la marque.

Comment trouver les valeurs HEX des couleurs de ma marque ?

Ouvrez le logo dans Pipette et palette et prélevez les couleurs. Pour l’impression, demandez au graphiste les valeurs définies : les valeurs CMJN affichées sont approximatives.

Puis-je supprimer le fond blanc d’un logo en JPG ?

Oui, si le fond est régulier : Supprimer la couleur d’arrière-plan le rend transparent et enregistre le résultat en PNG, WebP ou AVIF. Le logo peut ensuite se poser sur n’importe quelle couleur.

Prêt à mettre de l’ordre dans votre logo ? Ouvrez les outils vectoriels et les outils de création, consultez les formats d’image pris en charge ou créez un compte gratuit.