Signature email HTML : le format qui s'affiche partout

Dernière mise à jour :

En résumé : une signature email se code en table HTML avec styles inline — pas en flexbox ni en CSS externe — parce qu'Outlook pour Windows rend le HTML avec le moteur de Microsoft Word, pas un navigateur. Le générateur produit ce HTML (tables, styles inline, polices système, aucun SVG) : de 1 860 à 2 483 caractères selon le template, loin du plafond de 10 000 de Gmail.

Toutes les autres pages de ce site partent d'un client mail — Gmail, Outlook, Apple Mail. Celle-ci part du format lui-même, parce que c'est le vrai cœur du produit : le générateur ne fabrique pas « une signature Gmail » ou « une signature Outlook », il fabrique un HTML unique qui doit s'afficher pareil dans tous.

Le HTML d'email n'est pas le HTML du web. Un client mail ne rend pas une page comme un navigateur : il en garde un sous-ensemble, en jette une partie, et le plus contraignant impose sa loi à tous les autres. Comprendre ce sous-ensemble, c'est comprendre pourquoi une signature pro se construit en tableau et pas en div modernes — et pourquoi une signature bricolée dans Word finit cassée chez le destinataire.

Génère ta signature maintenant →
Gratuit pour le template Modern · 9,90 € pour les 5 autres
Ouvrir le générateur

Le code HTML d'une signature, commenté

Voici une signature complète, valide et copiable telle quelle. Chaque bloc est commenté pour montrer à quoi il sert et pourquoi il est écrit ainsi. Remplacez les valeurs, gardez la structure.

<!-- Structure en table : le seul layout rendu pareil par tous les clients -->
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif;color:#0f172a;font-size:13px;line-height:1.5">
  <tr>
    <!-- Colonne identite, separee par une barre d'accent (border, pas de flexbox) -->
    <td style="padding-right:18px;border-right:3px solid #6366f1">
      <div style="font-size:17px;font-weight:700">Camille Roy</div>
      <div style="color:#6366f1;font-weight:600">Consultante RGPD</div>
      <div style="color:#475569">Roy Conseil</div>
    </td>
    <!-- Colonne contacts : mailto: et tel: = cliquables sur mobile -->
    <td style="padding-left:18px;vertical-align:middle">
      <div><a href="mailto:camille@royconseil.fr" style="color:#64748b;text-decoration:none">camille@royconseil.fr</a></div>
      <div><a href="tel:+33612345678" style="color:#64748b;text-decoration:none">06 12 34 56 78</a></div>
      <div><a href="https://royconseil.fr" style="color:#6366f1;text-decoration:none;font-weight:600">royconseil.fr</a></div>
    </td>
  </tr>
  <!-- Logo : URL absolue HTTPS, jamais colle depuis le disque -->
  <tr><td colspan="2" style="padding-top:10px">
    <img src="https://signature-email-pro.com/uploads/logo.png" alt="Roy Conseil" width="120" style="width:120px;height:auto;display:block;border:0">
  </td></tr>
  <!-- Mentions legales : du TEXTE, pas une image (art. R123-237) -->
  <tr><td colspan="2" style="padding-top:8px;font-size:11px;color:#94a3b8">
    Roy Conseil EI · SIREN 123 456 789 · RCS Bordeaux
  </td></tr>
</table>

Rien d'exotique là-dedans : deux cellules côte à côte, une barre d'accent qui n'est qu'un border-right, des liens mailto: et tel: en texte réel. C'est précisément ce dépouillement qui le rend robuste.

Pourquoi une table et des styles inline, pas du flexbox

La règle tient en une phrase : le client mail le plus contraignant décide de tout, et c'est Outlook pour Windows. Depuis Outlook 2007, Microsoft affiche le HTML des messages avec le moteur de rendu de Microsoft Word, pas celui d'un navigateur. Word ne connaît ni flexbox, ni grid, ni position. Une signature construite en flexbox s'effondre en une seule colonne chez tout destinataire sous Outlook Windows — soit une bonne part des entreprises françaises.

D'où les trois partis pris de tout HTML d'email sérieux :

  • La structure en <table> : les cellules d'un tableau sont le seul système de colonnes que Word, Gmail, Apple Mail et les webmails rendent de la même façon. Les deux colonnes de l'exemple ci-dessus sont deux <td>, pas un conteneur flex.
  • Les styles en ligne (style="…" sur chaque balise) : les éditeurs de signature de Gmail et d'Outlook web suppriment le <style> du <head>, les feuilles externes et les attributs class. Seul ce qui est écrit directement sur la balise survit au collage.
  • Aucun SVG, aucune police web : Word n'affiche pas les SVG et ne télécharge pas de @font-face. On reste sur des polices système (Arial, Helvetica) et, pour les icônes sociales, sur des lettres stylées plutôt que des pictogrammes vectoriels.

Le site caniemail.com documente client par client ce qui passe et ce qui casse : c'est la référence pour vérifier une propriété CSS avant de s'y fier dans un email.

Les quatre erreurs qui cassent l'affichage

Une signature qui « marche chez moi » et casse chez le destinataire tombe presque toujours dans l'un de ces quatre pièges. Ils sont invisibles depuis votre propre écran — c'est ce qui les rend coriaces.

ErreurCe qui se passe chez le destinataireLe réflexe correct
Image insérée depuis le disqueLe logo part en pièce jointe (encodé dans le message) ou s'affiche en carré casséRéférencer le logo par une URL HTTPS absolue et publique
CSS externe ou <style> dans le <head>Gmail et Outlook web les suppriment ; la mise en forme disparaît au collageTout mettre en styles inline sur chaque balise
Largeurs en %Le moteur Word recalcule les pourcentages : les colonnes se décalent, l'image pousse le texteDes largeurs fixes en px, modestes
Police web (Google Fonts, @font-face)Ignorée par la plupart des clients ; retour à une police par défaut aléatoireDes polices système (Arial, Helvetica, Georgia)

Le fil rouge : chacune de ces erreurs vient de code qui suppose un navigateur. Un client mail n'en est pas un.

Coller ce HTML dans Gmail, Outlook et Apple Mail

Le HTML une fois obtenu, l'installation dépend du client — et chaque procédure a ses pièges, documentés en détail :

Dans les quatre cas, le même HTML sert. C'est tout l'intérêt d'un format standard : vous le générez une fois, vous le collez partout.

Obtenir le HTML sans écrire une ligne de code

Écrire ce HTML à la main est faisable, mais chaque modification — un numéro qui change, un logo à caler — vous ramène dans le code, avec le risque de casser une balise et de ne le découvrir que dans la boîte du destinataire.

Le générateur fait l'inverse : vous remplissez un formulaire (nom, poste, contacts, couleur, logo), il produit le HTML compatible email décrit sur cette page — tables, styles inline, polices système, zéro SVG — et vous le copiez en un clic. Le template Modern est gratuit ; les cinq autres et l'hébergement du logo sont à 9,90 € en paiement unique. Vous obtenez le même HTML propre, sans écrire une ligne.

Questions fréquentes

Signature HTML ou signature en image, que choisir ?

Le HTML, sans hésiter. Une image (PNG exporté de Canva) ne se sélectionne pas, ne se clique pas, disparaît chez tout destinataire qui bloque les images, et reste illisible pour un lecteur d'écran faute de texte alternatif. Le HTML garde le nom, le téléphone et les liens sous forme de texte réel — cliquable, copiable et accessible.

Un HTML de signature, ça pèse combien ?

Très peu. Les six templates complets du générateur pèsent entre 1 860 et 2 483 caractères, logo référencé par URL. Gmail plafonne les signatures à 10 000 caractères. Le poids ne devient un problème que si vous encodez l'image en base64 dans le code au lieu de la référencer par une URL.

Le HTML gère-t-il le mode sombre ?

Partiellement, et c'est une limite du format plus que du générateur. Gmail mobile inverse les couleurs du HTML qui ne déclare pas de fond : un logo noir sur PNG transparent y disparaît. La parade est d'utiliser des couleurs déclarées et un logo à fond clair. Le détail est sur la page « signature avec logo ».

Prêt à créer ta signature ?

2 minutes, 0 inscription, copie le HTML et colle dans Gmail / Outlook / Apple Mail.

Ouvrir le générateur →