Générateur gratuit de signature e-mail HTML pour Gmail et Outlook

La signature e-mail est le bloc avec vos prénom et nom, votre poste, votre entreprise et vos coordonnées que votre logiciel de messagerie ajoute à la fin de chaque message envoyé. Le générateur la construit comme un tableau HTML dont les styles sont écrits directement sur chaque élément : la signature collée garde donc ses couleurs, ses espacements et ses liens.

Seuls deux champs sont obligatoires : Prénom et nom et E-mail. Ajoutez le reste quand il sert au destinataire : téléphone, site web, adresse, bouton vers votre agenda ou profils sur les réseaux sociaux.

La norme internationale UIT-T E.123 décrit comment écrire les coordonnées sur le papier à en-tête et les cartes de visite. Elle recommande d’écrire le numéro avec le signe plus et l’indicatif du pays, sans parenthèses, de placer l’adresse e-mail avec son libellé sous le numéro de téléphone et d’écrire le site web sans le préfixe http://[1]. La mise en page Colonne d’étiquettes suit cet ordre : téléphone, puis e-mail et site web en dessous.

Un champ laissé vide n’apparaît pas dans la signature. Les noms ci-dessous sont les libellés des champs de l’éditeur, et le texte gris de chaque champ vide montre un exemple de saisie.

• Poste et Nom de l’entreprise partagent une ligne, séparés par un point.
• Le champ Téléphone accepte un numéro écrit comme vous le souhaitez. La signature l’affiche tel quel, et le lien d’appel ne garde que les chiffres et le signe plus. Un lien tel: ne peut contenir ni espaces ni mots au milieu du numéro[2].
• L’adresse du champ Site web s’affiche dans la signature telle que vous la saisissez, par exemple www.entreprise.fr. Si https:// manque, le générateur l’ajoute seulement au lien.
• Le champ Avatar / logo (URL de l’image) reçoit l’adresse d’une image publiée sur un site. Une fois l’adresse collée, vous choisissez la forme (Circulaire, Arrondi, Carré) et la taille : 40, 56 ou 72 px. Une image d’au moins 144 px de côté reste nette sur les écrans haute densité.
• La Ligne au-dessus du nom accueille un texte court en majuscules, par exemple le nom de l’entreprise ou un slogan.
• L’Étiquette du nom est une courte mention dans un cadre ovale à côté du nom, par exemple MBA ou des pronoms.
• La Ligne supplémentaire accueille une phrase sur ce que vous faites.
• Adresse et Données formelles sont des champs sur plusieurs lignes : la touche Entrée crée aussi une nouvelle ligne dans la signature. Les données formelles, comme le numéro SIRET, l’immatriculation au RCS ou le numéro de TVA intracommunautaire, apparaissent en petits caractères au-dessus de la mention légale.

Le générateur propose huit mises en page. Dans la section Apparence, chacune s’affiche en miniature avec vos données et vos couleurs. Changer de mise en page n’efface aucun champ :

• Standard : coordonnées les unes sous les autres, avec téléphone, e-mail et site sur une ligne avec libellés.
• Bandeau supérieur : nom, poste et avatar sur un bandeau de la couleur d’accent, le reste en dessous.
• Colonne d’étiquettes : téléphone, e-mail et site les uns sous les autres, avec les libellés dans une colonne à part.
• Centré : tout est centré, l’avatar au-dessus du nom.
• Compact : nom, poste, entreprise et contact sur une ligne, réseaux sociaux et mention légale en dessous.
• Deux colonnes : avatar, nom et poste d’un côté, contact, réseaux et boutons de l’autre, séparés par une ligne verticale.
• Minimaliste : nom, poste, entreprise, e-mail et téléphone, sans site, avatar ni boutons.
• Barre inférieure : coordonnées en haut, boutons et nom de l’entreprise sur une barre de la couleur d’accent en dessous.

Si vous remplissez un champ que la mise en page choisie n’affiche pas, un avertissement avec le nom de ce champ apparaît sous l’aperçu.

La section Boutons permet de régler deux boutons. Le premier a un fond de la couleur d’accent, et vous saisissez son texte et son adresse dans les champs Texte du bouton et Lien CTA. Le second a un simple contour et utilise les champs Texte du second bouton et Lien du second bouton. Chaque bouton a besoin d’un texte et d’un lien. Si l’un des deux champs reste vide, le bouton n’apparaît pas dans la signature.

Le lien peut ouvrir une page, un nouvel e-mail (mailto:contact@entreprise.fr) ou un appel (tel:+33123456789). Inutile de commencer l’adresse web par https://, le générateur l’ajoute. Les adresses qui commencent par javascript:, data:, vbscript: ou file: sont refusées, un bouton avec un tel lien n’apparaît donc pas.

L’Arrondi des boutons propose trois options : Sans arrondi, Léger et Complet. Outlook pour Windows ne gère pas les coins arrondis en CSS[3], les boutons y ont donc toujours des angles droits. Les mises en page Compact et Minimaliste n’affichent pas de boutons. Le même lien, par exemple vers votre agenda de rendez-vous, peut figurer sur une carte de visite sous forme de code créé avec le générateur de codes QR.

Dans la section Réseaux sociaux, cliquez sur le nom d’un service sous Ajouter un profil, et l’éditeur ajoute un champ pour l’adresse du profil. Vous avez le choix entre 12 services : LinkedIn, Instagram, Facebook, TikTok, YouTube, X (Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram et Pinterest. Seuls les services avec une adresse apparaissent dans la signature, et le bouton en forme de croix à côté d’un champ supprime le profil. Les profils apparaissent dans la signature dans le même ordre que dans l’éditeur. Un nouveau profil s’ajoute en fin de liste, et vous changez l’ordre en faisant glisser un profil par la poignée à côté de son champ. Au clavier, sélectionnez la poignée et déplacez le profil avec les flèches haut et bas.

L’adresse complète du profil n’est pas nécessaire. Dans les champs Instagram, Facebook, TikTok, YouTube, X, GitHub, Dribbble, Behance, Telegram et Pinterest, @identifiant suffit : le générateur en tire l’adresse du profil. LinkedIn demande l’adresse, car les profils de personnes et d’entreprises n’ont pas le même chemin (/in/ et /company/). Dans le champ WhatsApp, saisissez votre numéro avec l’indicatif du pays : le générateur le transforme en lien https://wa.me/ composé uniquement de chiffres, au format décrit par les pages d’aide WhatsApp[4].

Des icônes à la place des noms

L’option Afficher des icônes à la place des noms remplace les noms par des icônes de 16, 20 ou 24 px en trois couleurs : Couleurs de la plateforme, Foncées ou Blanches, ces dernières pour un fond de signature sombre. Les icônes sont des images PNG hébergées sur arteontools.com. Une icône SVG écrite directement dans le code ne s’affiche ni dans Gmail, ni dans Outlook, ni dans Yahoo Mail[5], et Gmail supprime les images enregistrées en base64[6]. Chaque icône porte le nom du service en texte alternatif : si un logiciel de messagerie bloque les images, le destinataire voit ce nom.

Couleurs

Vous choisissez la Couleur d’accent parmi cinq échantillons prêts ou dans le sélecteur du navigateur, qui s’ouvre d’un clic sur le carré de couleur. Vous pouvez aussi saisir un code HEX dans le champ à côté du carré, par exemple celui de votre charte graphique. Le champ accepte le code avec ou sans le signe #, en six ou en trois caractères, par exemple #1d4ed8 ou 14c. La Couleur du texte et la Couleur de fond se règlent de la même façon, sans échantillons. La couleur d’accent s’applique au nom, aux liens, aux boutons, à la bordure et aux barres des mises en page Bandeau supérieur et Barre inférieure. La couleur de fond remplit toute la signature. Vérifiez un texte clair sur fond coloré avec le vérificateur de contraste des couleurs et convertissez un code couleur de votre charte avec le convertisseur HEX en RVB. Si votre charte donne les couleurs en RVB, obtenez le code HEX avec le convertisseur RVB en HEX, et passez d’abord les couleurs d’impression en CMJN en RVB avec le convertisseur CMJN en RVB. Vous pouvez relever la couleur d’accent de votre logo avec l’extracteur de couleurs d’image et trouver des nuances assorties avec le générateur de palettes de couleurs.

Police et taille du texte

Vous avez le choix entre Arial, Verdana, Tahoma, Trebuchet MS et Georgia, des polices que Microsoft fournit avec Windows[7]. Si l’appareil du destinataire n’a pas la police choisie, le logiciel de messagerie utilise sa propre police sans empattement, ou avec empattement pour Georgia, car c’est ainsi que le générateur l’écrit.

La Taille du texte a trois niveaux : Petit 12 px, Standard 13 px et Grand 14 px. Le nom est 2 px plus grand que le reste du texte et la mention légale 2 px plus petite. Outlook indique la taille des polices en points, et 13 px valent 9,75 pt, ce que vous pouvez vérifier avec le convertisseur px en pt.

Sens du texte

L’option Sens du texte réglée sur De droite à gauche dispose la signature comme l’exige un texte en arabe ou en hébreu. Le générateur ajoute alors l’attribut dir="rtl", que Gmail, Outlook et Apple Mail prennent en charge[8]. Les numéros, adresses e-mail et sites restent de gauche à droite pour que les chiffres ne s’inversent pas. Arial et Tahoma contiennent les lettres arabes[9], contrairement à Verdana, Georgia et Trebuchet MS[10].

Bordure de la signature

Sous Bordure de la signature, cochez les côtés où doit apparaître une bordure de la couleur d’accent : Gauche, Droite, Haut et Bas. Un côté seul mesure 4 px, et cocher les quatre dessine un cadre complet de 2 px.

La section Style de texte affiche une ligne pour chaque élément de la signature : Prénom et nom, Poste, Entreprise, Coordonnées, Réseaux sociaux et Mention légale. Vous choisissez la couleur dans le sélecteur du navigateur d’un clic sur le carré de couleur. Dès qu’un texte a sa propre couleur, le bouton Rétablir la couleur par défaut apparaît à côté du carré. Les boutons moins et plus changent la taille de 2 px par clic, et la taille du texte en pixels s’affiche entre eux. Vous pouvez la réduire ou l’augmenter de 4 px au maximum par rapport à la taille de base.

La section Espacement règle la Marge interne de la signature (8, 16 ou 24 px) et les écarts entre les éléments par pas de 2 px, de 0 à 32 px. Seuls les écarts des éléments présents dans la signature et dans la mise en page choisie sont visibles :

• Sous le nom
• Sous le poste
• Sous la ligne supplémentaire
• Au-dessus des coordonnées
• Au-dessus des réseaux sociaux
• Au-dessus du bouton
• Au-dessus de la mention légale

La section Mention légale contient un champ pour le texte affiché en plus petit à la fin de la signature, par exemple une mention de confidentialité. Le champ est vide au départ, et le bouton Insérer une mention d’exemple insère une mention de confidentialité prête, que vous pouvez modifier. Un champ vide n’ajoute rien à la signature.

L’option Afficher une ligne de séparation entre les coordonnées et la mention légale apparaît quand la signature contient une mention légale ou des données formelles, et ajoute une ligne horizontale au-dessus d’elles. Le Style de ligne peut être continu, tireté ou pointillé, l’épaisseur de 1, 2 ou 3 px, et la Couleur de ligne au choix, avec un bouton Par défaut qui rétablit le gris clair #e5e7eb. La ligne apparaît dans les mises en page Standard, Bandeau supérieur, Colonne d’étiquettes et Centré. Dans la mise en page Deux colonnes, un filet fin qui lui est propre sépare la mention légale du reste.

Cliquez sur Copier la signature (Gmail / Outlook). Le bouton copie la signature avec sa mise en forme : couleurs, liens et images restent en place après le collage. Trois étapes de collage s’affichent alors sous l’aperçu, les mêmes que ci-dessous, avec un sélecteur Gmail ou Outlook. Si vous modifiez la signature après l’avoir copiée, l’éditeur vous rappelle de la copier à nouveau.

Gmail dans le navigateur

1. En haut à droite, cliquez sur l’icône des paramètres, puis sur Voir tous les paramètres.
2. Dans la section Signature, collez la signature dans la zone avec Ctrl + V, ou Cmd + V sur Mac.
3. Au bas de la page, cliquez sur Enregistrer les modifications.

Une signature Gmail peut contenir jusqu’à 10 000 caractères, et l’image insérée compte aussi dans cette limite[11].

Nouvel Outlook pour Windows et Outlook sur le web

1. Sélectionnez Paramètres, puis Comptes et Signatures.
2. Ajoutez une nouvelle signature, donnez-lui un nom et collez la signature dans la zone de modification.
3. Sélectionnez Enregistrer.

Dans Outlook classique pour Windows, ouvrez un nouveau message et, dans le menu Message, sélectionnez Signature, puis Signatures[12].

L’aperçu montre la signature telle que la dessine un navigateur. Les logiciels de messagerie comprennent moins de HTML, et chacun à sa façon, c’est pourquoi le générateur évite les éléments qu’ils n’affichent pas. Certaines différences dépendent toutefois de ce que vous saisissez :

• Une image enregistrée dans l’adresse elle-même (data:image/png;base64,…) n’apparaît pas dans Gmail[6]. Le code base64 est utile dans les fichiers HTML et CSS, comme le montre le convertisseur image en Base64, mais le champ de l’avatar attend l’adresse d’un fichier : l’éditeur affiche donc un avertissement quand vous collez du code base64. Avec le convertisseur Base64 en image, vous retrouvez le fichier image à partir de ce code, puis vous le publiez sur votre site.
• Gmail n’affiche pas les images SVG pour les comptes Google[13] : convertissez d’abord en PNG un logo enregistré en SVG, par exemple avec le convertisseur SVG en PNG.
• Outlook pour Windows n’affiche pas les images WebP[14] : enregistrez le logo et la photo en PNG ou en JPG, par exemple avec le convertisseur WebP en PNG.
• Outlook pour Windows bloque par défaut le téléchargement automatique des images depuis Internet[15]. Tant que le destinataire ne l’autorise pas, il voit les noms des services à la place des icônes et aucun avatar.
• L’adresse de l’image doit mener directement au fichier. Un lien de partage Google Drive ou Dropbox ouvre une page d’aperçu, et l’image ne s’affiche pas.

Le générateur enregistre vos données et réglages dans le navigateur (localStorage) à chaque modification, séparément pour chaque version linguistique de la page. Si vous revenez avec le même navigateur, la signature vous attend dans son dernier état enregistré. Les données de la signature ne sont pas envoyées à notre serveur.

Le bouton Exporter la configuration enregistre données, couleurs, mise en page, espacements et styles de texte dans un fichier .json, et Importer la configuration charge ce fichier sur un autre ordinateur ou chez un collègue qui ne modifie que ses propres données. L’import vérifie chaque valeur : une couleur qui n’est pas écrite en HEX et une police absente de la liste conservent les réglages d’avant l’import.

Le bouton Rétablir les valeurs par défaut vide, après confirmation, tous les champs et rend à la signature son apparence de départ. L’opération est irréversible : exportez d’abord votre configuration.

Tous ces boutons se trouvent dans la carte de l’aperçu, sous le bouton de copie. Vous y trouverez aussi Copier le code HTML (code brut pour un éditeur HTML) et Télécharger en HTML (le fichier signature-email.html). Le sélecteur au-dessus de l’aperçu, avec un soleil (Clair) ou une lune (Sombre), affiche la signature sur fond clair ou sombre.