Ajouter une signature HTML sous Gmail, Yahoo! Mail et Hotmail

Si vous utilisez Gmail, Yahoo Mail, Outlook.com, Thunderbird ou un autre client de messagerie moderne, vous avez probablement déjà voulu ajouter une signature HTML un peu plus propre qu’un simple bloc de texte.

Une signature HTML permet d’ajouter une mise en page, des liens, un logo, un numéro de téléphone, une adresse de site, des icônes sociales ou un petit appel à l’action.

À l’époque, je recommandais l’extension WiseStamp. Elle faisait très bien le travail, notamment sous Firefox, avec un éditeur WYSIWYG et plusieurs signatures. Mais WiseStamp est aujourd’hui devenu un outil largement commercial. Pour une signature personnelle ou professionnelle simple, on peut très bien faire mieux : gratuit, open-source, portable et sans extension propriétaire.

La bonne méthode consiste à créer une signature HTML légère, compatible email, puis à la copier dans l’éditeur de signature de votre webmail.

Pourquoi les signatures HTML sont pénibles dans les webmails

Une signature HTML n’est pas une mini-page web moderne. Les clients email sont beaucoup plus stricts, plus capricieux, et parfois franchement archaïques.

Ce qui fonctionne dans un navigateur peut être cassé dans Gmail, Outlook ou Yahoo Mail. Les clients email filtrent le HTML, retirent certains styles, modifient les images, réécrivent les liens, ou ignorent des propriétés CSS modernes.

Pour cette raison, il faut privilégier :

• du HTML simple ;
• des styles inline ;
• des tableaux HTML pour la mise en page si nécessaire ;
• des images hébergées en HTTPS ;
• des liens absolus ;
• une largeur raisonnable ;
• peu de couleurs ;
• aucun JavaScript ;
• aucune police exotique indispensable.

MDN rappelle que les styles inline s’appliquent directement à l’élément via l’attribut style. Dans l’email HTML, c’est souvent la méthode la plus fiable, car beaucoup de clients email filtrent ou réécrivent les styles dans <style>. MDN : attribut style

La méthode simple : créer un fichier HTML puis copier la signature

La méthode la plus fiable est étonnamment simple :

1. Créer un fichier HTML local avec la signature.
2. L’ouvrir dans le navigateur.
3. Sélectionner la signature rendue visuellement.
4. La copier.
5. La coller dans l’éditeur de signature de Gmail, Yahoo Mail, Outlook.com ou Thunderbird.
6. Envoyer un email de test.

Il ne faut pas coller le code source HTML directement dans Gmail. Gmail ne propose pas un éditeur de code HTML brut dans ses paramètres. Il faut copier le rendu visuel depuis le navigateur, puis le coller dans le champ de signature.

Gmail permet de créer et gérer des signatures depuis Paramètres → Voir tous les paramètres → Général → Signature. La documentation Google explique aussi que l’on peut créer plusieurs signatures et choisir celle utilisée pour les nouveaux emails ou les réponses. Aide Gmail : créer une signature

Exemple de signature HTML simple et compatible

Voici une signature HTML volontairement simple, avec une image, un nom, une fonction, un site web et quelques liens.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; color: #222222;">
  <tr>
    <td style="padding-right: 14px; vertical-align: top;">
      <img src="https://www.example.com/logo.png" width="72" height="72" alt="Logo" style="display: block; border: 0; border-radius: 50%;">
    </td>

    <td style="vertical-align: top;">
      <div style="font-size: 16px; font-weight: bold; color: #111111;">Matt Biscay</div>
      <div style="margin-top: 2px; color: #555555;">Développeur WordPress & WooCommerce</div>

      <div style="margin-top: 8px;">
        <a href="https://www.skyminds.net/" style="color: #2563eb; text-decoration: none;">www.skyminds.net</a>
      </div>

      <div style="margin-top: 6px; color: #555555;">
        <a href="mailto:contact@example.com" style="color: #2563eb; text-decoration: none;">contact@example.com</a>
        <span style="color: #999999;"> · </span>
        <a href="https://mattbiscay.com/hire-me/" style="color: #2563eb; text-decoration: none;">Me contacter</a>
      </div>
    </td>
  </tr>
</table>Langage du code : HTML, XML (xml)

Remplacez les valeurs par vos propres informations, puis enregistrez le fichier en signature.html.

Ouvrez-le dans votre navigateur, sélectionnez la signature affichée, copiez-la, puis collez-la dans l’éditeur de signature de votre webmail.

Pourquoi utiliser un tableau HTML ?

Dans une page web moderne, on éviterait d’utiliser des tableaux pour la mise en page. En email HTML, c’est différent.

Les clients email, notamment Outlook, gèrent encore mieux les tableaux simples que des mises en page modernes en flexbox ou grid. Pour une signature qui doit s’afficher correctement partout, un petit tableau reste souvent plus robuste.

Can I email, qui suit la compatibilité des fonctionnalités HTML/CSS dans les clients email, montre que le support CSS varie fortement selon les clients et versions.

Donc oui, le tableau HTML sent un peu les années 2000. Mais dans l’email, les années 2000 ne sont jamais vraiment parties. Elles se cachent juste derrière Outlook.

Créer une signature sans image

Si vous voulez une signature plus légère et moins fragile, supprimez l’image. Les images peuvent être bloquées, mal redimensionnées, ou s’afficher en pièce jointe selon les clients.

Voici une version 100 % texte HTML :

<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #222222;">
  <div style="font-size: 16px; font-weight: bold;">Matt Biscay</div>
  <div style="color: #555555;">Développeur WordPress & WooCommerce</div>

  <div style="margin-top: 8px;">
    <a href="https://www.skyminds.net/" style="color: #2563eb; text-decoration: none;">www.skyminds.net</a>
  </div>

  <div style="margin-top: 4px; color: #555555;">
    <a href="mailto:contact@example.com" style="color: #2563eb; text-decoration: none;">contact@example.com</a>
  </div>
</div>Langage du code : HTML, XML (xml)

Pour une signature professionnelle, cette version suffit souvent. Elle charge vite, ne dépend d’aucune image, et elle survit mieux aux clients email agressifs.

Ajouter des icônes sociales sans alourdir la signature

Les icônes sociales peuvent vite transformer une signature en sapin de Noël. Si vous en ajoutez, limitez-vous aux liens vraiment utiles.

Exemple avec des liens texte, plus robustes que des icônes :

<div style="margin-top: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px;">
  <a href="https://github.com/example" style="color: #2563eb; text-decoration: none;">GitHub</a>
  <span style="color: #999999;"> · </span>
  <a href="https://www.linkedin.com/in/example/" style="color: #2563eb; text-decoration: none;">LinkedIn</a>
  <span style="color: #999999;"> · </span>
  <a href="https://mastodon.social/@example" rel="me" style="color: #2563eb; text-decoration: none;">Mastodon</a>
</div>Langage du code : HTML, XML (xml)

Pour Mastodon, rel="me" peut servir à vérifier votre profil lorsque le lien est présent sur votre site ou dans une page que Mastodon peut lire. Dans une signature email, l’intérêt est plus limité, mais le lien reste propre.

Héberger les images correctement

Si vous utilisez un logo ou une photo, hébergez l’image sur une URL publique en HTTPS.

Exemple :

<img src="https://www.example.com/images/logo-email.png" width="72" height="72" alt="Logo" style="display: block; border: 0;">Langage du code : HTML, XML (xml)

Évitez :

• les images en local comme file:///Users/matt/logo.png ;
• les images énormes redimensionnées uniquement en HTML ;
• les images hébergées derrière une authentification ;
• les images en HTTP non sécurisé ;
• les signatures composées d’une seule grande image.

Une bonne image de signature doit être légère, lisible et dimensionnée à la bonne taille. Si elle s’affiche en 72 × 72, inutile d’envoyer un PNG de 2000 pixels. Votre correspondant n’a pas demandé un poster.

Installer une signature HTML dans Gmail

Pour Gmail :

1. Ouvrez votre fichier signature.html dans un navigateur.
2. Sélectionnez la signature rendue visuellement.
3. Copiez-la avec Ctrl+C ou Cmd+C.
4. Ouvrez Gmail.
5. Allez dans Paramètres → Voir tous les paramètres.
6. Dans l’onglet Général, trouvez Signature.
7. Créez une nouvelle signature.
8. Collez la signature dans l’éditeur.
9. Choisissez la signature pour les nouveaux messages et/ou réponses.
10. Enregistrez les modifications.

La documentation Gmail confirme que les signatures se gèrent depuis les paramètres généraux, et que Gmail permet de créer plusieurs signatures. Aide Gmail : ajouter ou modifier une signature

Ensuite, envoyez-vous un email de test et vérifiez le rendu sur ordinateur et mobile.

Installer une signature HTML dans Yahoo Mail

Dans Yahoo Mail, la signature se configure dans les paramètres du compte. La méthode reste la même : copier le rendu visuel de la signature HTML depuis le navigateur, puis le coller dans l’éditeur de signature Yahoo.

Yahoo indique que l’on peut activer une signature dans les paramètres de rédaction et la personnaliser pour ses emails sortants. Aide Yahoo Mail : signature email

Comme toujours, testez ensuite avec un email réel. Certains styles peuvent être simplifiés au collage.

Installer une signature HTML dans Outlook.com

Hotmail et Live Mail ont été remplacés par Outlook.com. Le titre historique de cet article mentionnait Hotmail, mais aujourd’hui il vaut mieux parler d’Outlook.com.

Dans Outlook.com, allez dans les paramètres, cherchez Signature électronique, puis collez la signature rendue depuis votre navigateur.

Microsoft documente l’ajout et la modification d’une signature dans Outlook, avec la possibilité de définir une signature par défaut pour les nouveaux messages et les réponses/transferts. Support Microsoft : créer une signature dans Outlook

Outlook reste l’un des clients les plus exigeants avec le HTML email. Gardez donc votre signature simple. Plus elle est sobre, moins Outlook aura d’occasions de faire son numéro.

Installer une signature HTML dans Thunderbird

Thunderbird est plus confortable si vous voulez utiliser directement un fichier HTML.

Vous pouvez créer un fichier signature.html, puis le sélectionner dans les paramètres du compte Thunderbird comme fichier de signature.

La documentation Thunderbird explique que l’on peut attacher une signature depuis un fichier, notamment HTML, dans les paramètres du compte. Support Thunderbird : signatures

C’est probablement l’une des méthodes les plus propres si vous utilisez un client de bureau et que vous aimez garder votre signature versionnée ou éditable.

Alternatives gratuites et open-source à WiseStamp

Si vous ne voulez pas écrire le HTML à la main, vous pouvez utiliser un générateur open-source.

MySigMail

MySigMail est un générateur de signature email open-source pour Gmail, Outlook, Apple Mail et autres clients. Le dépôt GitHub le présente comme un générateur open-source permettant de créer des signatures professionnelles.

L’auteur a aussi relancé une version v2 côté client, pensée pour la personnalisation et l’usage local :présentation de MySigMail v2.

Inkly

Inkly est un générateur de signature email open-source construit avec Nuxt et Tailwind CSS. Le projet est publié sous licence Apache-2.0.

Il peut être intéressant si vous voulez un outil simple, moderne et auto-hébergeable.

FreeSign

FreeSign est un générateur HTML de signatures email publié sur GitHub sous licence MIT. Le projet se présente comme un générateur gratuit de signatures HTML professionnelles.

Comme toujours avec les projets GitHub, vérifiez l’activité, la licence, le code et les dépendances avant de l’utiliser pour une équipe.

Générateur interne pour une organisation

Si vous gérez les signatures d’une association, d’une entreprise ou d’une équipe, vous pouvez aussi utiliser ou adapter un générateur interne open-source.

Par exemple, certains projets GitHub permettent de définir une charte commune, puis de laisser chaque utilisateur remplir ses informations. C’est souvent mieux qu’une collection de signatures bricolées au pixel près par vingt personnes différentes, avec vingt nuances de bleu “officiel”.

Créer votre propre générateur minimal

Pour un usage personnel, pas besoin d’un SaaS. Un simple fichier HTML suffit.

Mais pour une équipe, vous pouvez créer un mini générateur interne avec :

• un formulaire HTML ;
• un template de signature ;
• un bouton “copier la signature” ;
• une prévisualisation ;
• un export HTML.

Le grand avantage : vous gardez la charte graphique, vous évitez les outils payants, et vous ne confiez pas les coordonnées de toute l’équipe à une plateforme tierce.

Bonnes pratiques pour une signature HTML

Une bonne signature email doit rester légère, claire et utile.

• Gardez une largeur raisonnable, par exemple 400 à 600 pixels.
• Utilisez des styles inline.
• Hébergez les images en HTTPS.
• Ajoutez des attributs width et height aux images.
• Ajoutez un texte alternatif à chaque image.
• Évitez les arrière-plans complexes.
• Évitez les animations GIF lourdes.
• Limitez les icônes sociales.
• Gardez des contrastes lisibles.
• Testez sur mobile.

Pour les liens externes, vous pouvez utiliser :

rel="noopener noreferrer"Langage du code : JavaScript (javascript)

Si vous ouvrez un lien dans un nouvel onglet avec target="_blank", noopener évite que la page ouverte puisse accéder à la page d’origine via window.opener. MDN documente ce comportement pour la valeur noopener. MDN : rel noopener

Ce qu’il vaut mieux éviter

Évitez de transformer votre signature en carte de visite interactive, flyer commercial, bannière publicitaire et arbre de Noël réunis.

À éviter :

• une seule grande image contenant toute la signature ;
• du JavaScript ;
• des vidéos ;
• des polices web indispensables ;
• des trackers inutiles ;
• des images trop lourdes ;
• des citations longues ;
• quinze liens sociaux ;
• des disclaimers juridiques de trois kilomètres.

Une signature doit aider le destinataire. Si elle prend plus de place que votre message, elle a probablement gagné contre vous.

Tester le rendu de la signature

Après installation, envoyez-vous un email de test vers plusieurs comptes :

• Gmail ;
• Outlook.com ;
• Yahoo Mail ;
• Thunderbird ;
• Apple Mail ;
• mobile iOS ;
• mobile Android.

Vérifiez :

• l’alignement ;
• la taille des images ;
• les liens ;
• le rendu mobile ;
• le mode sombre ;
• la présence éventuelle d’images en pièces jointes ;
• la lisibilité sans images.

Le mode sombre mérite une attention particulière. Certains clients inversent les couleurs ou modifient le rendu. Évitez donc les logos transparents illisibles sur fond sombre, sauf si vous avez testé.

Une signature HTML prête à adapter

Voici une version complète, sobre et facile à personnaliser :

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.45; color: #222222; max-width: 520px;">
  <tr>
    <td style="padding-right: 14px; vertical-align: top;">
      <img src="https://www.example.com/logo-email.png" width="72" height="72" alt="Logo" style="display: block; border: 0; border-radius: 50%;">
    </td>

    <td style="vertical-align: top;">
      <div style="font-size: 16px; font-weight: 700; color: #111111;">Prénom Nom</div>
      <div style="margin-top: 2px; color: #555555;">Fonction ou activité</div>

      <div style="margin-top: 8px;">
        <a href="https://www.example.com/" style="color: #2563eb; text-decoration: none;">www.example.com</a>
      </div>

      <div style="margin-top: 4px; color: #555555;">
        <a href="mailto:contact@example.com" style="color: #2563eb; text-decoration: none;">contact@example.com</a>
        <span style="color: #999999;"> · </span>
        <a href="tel:+33123456789" style="color: #2563eb; text-decoration: none;">+33 1 23 45 67 89</a>
      </div>

      <div style="margin-top: 8px; font-size: 13px;">
        <a href="https://www.linkedin.com/in/example/" style="color: #2563eb; text-decoration: none;">LinkedIn</a>
        <span style="color: #999999;"> · </span>
        <a href="https://github.com/example" style="color: #2563eb; text-decoration: none;">GitHub</a>
      </div>

      <div style="margin-top: 10px; font-size: 12px; color: #777777;">
        Disponible pour projets WordPress, WooCommerce et optimisation de performance.
      </div>
    </td>
  </tr>
</table>Langage du code : HTML, XML (xml)

Remplacez les informations, testez dans un navigateur, puis copiez le rendu dans votre webmail.

Mémo rapide

# Méthode simple.
1. Créer signature.html.
2. Ouvrir le fichier dans le navigateur.
3. Sélectionner la signature rendue.
4. Copier.
5. Coller dans Gmail, Yahoo Mail, Outlook.com ou Thunderbird.
6. Envoyer un email de test.

# Bonnes pratiques HTML email.
- Styles inline.
- Images en HTTPS.
- Liens absolus.
- Largeur raisonnable.
- Tableau HTML simple si mise en page en colonnes.
- Pas de JavaScript.
- Pas de CSS moderne indispensable.
- Pas de signature en une seule grande image.

# Alternatives open-source.
- MySigMail : https://github.com/antonreshetov/mysigmail
- Inkly : https://github.com/HugoRCD/inkly
- FreeSign : https://github.com/helloleo-ai/html-email-signature-generatorLangage du code : PHP (php)

Conclusion

WiseStamp a longtemps été une solution pratique pour créer une signature HTML dans Gmail, Yahoo Mail, Hotmail ou AOL Mail. Mais aujourd’hui, son modèle payant le rend moins intéressant si vous voulez simplement créer une signature propre.

La meilleure alternative consiste à créer une signature HTML simple, à la tester dans un navigateur, puis à copier le rendu dans votre client email.

Si vous préférez un générateur, des projets open-source comme MySigMail, Inkly ou FreeSign permettent de créer ou auto-héberger un outil de génération de signatures sans dépendre d’un SaaS payant.

En résumé : une bonne signature HTML doit être légère, lisible, compatible et facile à maintenir. Ce n’est pas une page d’accueil miniature. C’est une poignée de main, pas un feu d’artifice.

Report a typo