Créa-blog

00 jours et 00:00:00
Créa-code arrive !

Ressources pour développeur web

Comment ajouter une signature en HTML pour Apple Mail

Temps de lecture : 11 minutes
Accueil HTML5 Comment ajouter une signature en HTML pour Apple Mail

Créer une signature professionnelle dans l’application Mail de votre Mac est un excellent moyen d’améliorer votre image. Ce tutoriel vous explique, pas à pas et compréhensible par tous, comment insérer une signature HTML personnalisée avec photo, comme celle utilisée par Crea-Troyes, même si Apple ne facilite pas cette opération !

✅ Ce guide fonctionne sur macOS Sequoia, VenturaMontereySonoma, et les versions antérieures jusqu’à Catalina.

Pourquoi créer une signature HTML dans Apple Mail ?

Une signature bien faite peut :

  • Donner une image professionnelle
  • Présenter vos coordonnées de manière claire
  • Intégrer un logo ou une photo
  • Ajouter des liens vers vos réseaux sociaux ou site
  • Favoriser le branding de votre entreprise

Mais l’app Mail d’Apple ne propose que des signatures très limitées, sans support natif du HTML complexe. Il faut donc ruser. Et c’est ce que nous allons faire !

Signature en HTML pour Mail d'Apple

Ce que ne permet pas l’interface native de Mail

L’éditeur de signature dans les Préférences > Signatures ne permet pas :

  • d’insérer du HTML personnalisé
  • d’ajouter plusieurs images côte à côte
  • d’utiliser des bordures ou marges CSS
  • d’intégrer des liens stylisés ou des polices précises

Apple Mail nettoie tout code HTML enrichi, sauf si vous passez par la méthode « fichier .mailsignature« . Voici comment faire pour y arriver …

Ce dont vous avez besoin avant de commencer

  • Un Mac avec Mail installé (évidemment)
  • Un éditeur de texte (TextEdit, BBEdit, Visual Studio Code…)
  • Une connexion Internet (si vous hébergez vos images en ligne)
  • Le HTML de votre signature (voir ci-dessous)
  • Un peu de rigueur… mais rien de très technique !

Créer une signature vide dans Apple Mail

Avant de modifier le fichier, vous devez créer une signature « vide » dans Mail. Elle va créer un fichier que nous allons modifier par la suite.

Étapes :

  1. Ouvrez Mail.
  2. Cliquez sur Mail > Réglages (ou Préférences) > Signatures.
  3. Sélectionnez le compte où vous voulez la signature.
  4. Cliquez sur le bouton +.
  5. Donnez-lui un nom, par exemple Mail pro.
  6. Dans la zone de texte, tapez n’importe quoi : par exemple ---.
  7. Faites glisser le nom de cette signature sur Gmail également pour assigner votre signature à tous vos comptes gérés par Mail d’Apple.

📌 Astuce : Ne fermez pas encore Mail. Laissez-le ouvert jusqu’à la dernière étape.

Trouver le fichier de votre signature

Maintenant, direction le Finder pour aller modifier le fichier réel.

Mail d'apple

Étapes :

  1. Dans le Finder, cliquez sur le menu Aller > Aller au dossier (ou Cmd + Maj + G).
  2. Collez ce chemin :
~/Library/Mail/

🔁 Le dossier peut s’appeler V9V10, ou V11 selon votre version de macOS. Choisissez le plus récent.

Le chemin devrait ressembler à celui ci-dessous :

~/Library/Mail/V10/MailData/Signatures/
  1. Vous y verrez plusieurs fichiers avec l’extension .mailsignature.
Dossier pour la signature avec Mail d'Apple

Comment identifier le bon fichier :

  • Triez par date de modification.
  • Le fichier le plus récent est votre signature « vide ».
  • Ouvrez-le avec un éditeur de texte pour vérifier : il doit contenir le texte ---.
Dossier de la signature dans Mail d'Apple

Éditer le fichier .mailsignature et coller votre HTML

Une fois que vous avez trouvé le bon fichier, vous pouvez remplacer tout le contenu HTML, mais pas l’en-tête du fichier.

Exemple du début de fichier :

Mime-Version: 1.0
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

Ne touchez pas à ces lignes ! Effacez uniquement ce qui vient après.

Exemple de code HTML de signature à coller :

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif; background: #ffffff; color: #000000; width: 100%; max-width: 600px;">
  <tr>
    <td valign="top" style="padding: 0 20px; width: 100px; text-align: center;">
      <img src="https://crea-troyes.fr/img/emoji.jpg" alt="Logo" width="80" height="80" style="height:80px; border-radius: 50%; display: block;margin: 10px 0;">
      <img src="https://crea-troyes.fr/img/logo.webp" alt="Logo" width="80" height="80" style="height:80px; border-radius: 50%; display: block;">
    </td>
    <td valign="middle" style="font-size: 14px; line-height: 1.4; border-left:3px solid #07C; padding-left:20px;">
      <strong style="font-size: 16px; display: block; margin-bottom: 10px;">GUILLIER Alban</strong>
      <span style="display: block; color:#777; border-bottom: 2px solid #07C; padding-bottom: 10px; margin-bottom: 10px; line-height: 1.5;">
        Directeur de l'agence Crea-troyes.<br>Freelance et formateur web.
      </span>
      <p style="line-height: 1.6; margin: 0;">
        Mail : <a href="mailto:contact@crea-troyes.fr" style="color: #07C; text-decoration: none;">contact@crea-troyes.fr</a><br>
        Téléphone : <a href="tel:+33633925437" style="color: #07C; text-decoration: none;">06 33 92 54 37</a><br>
        Site web : <a href="https://crea-troyes.fr" style="color: #07C; text-decoration: none;">https://crea-troyes.fr</a><br>
        Twitter : <a href="https://twitter.com/creatroyes" style="color: #07C; text-decoration: none;">@creatroyes</a>
      </p>
    </td>
  </tr>
</table>

Ajuster ce code HTML avec vos propres coordonnées.

💾 Enregistrez le fichier et fermez votre éditeur.

Empêcher Apple Mail d’écraser votre signature

Apple Mail remplace automatiquement les signatures modifiées si vous rouvrez l’app sans précaution.

Pour éviter cela :

  1. Cliquez droit sur le fichier .mailsignature.
  2. Choisissez Lire les informations (Cmd + I).
  3. Cochez la case Verrouillé en bas de la fenêtre.

🔐 Cela empêche Mail d’écraser votre HTML la prochaine fois qu’il lira ce fichier.

Verrouiller la signature de Mail d'Apple

Redémarrer Mail et tester la signature

  1. Fermez complètement Apple Mail (clic droit sur l’icône > Quitter).
  2. Rouvrez Mail.
  3. Rédigez un nouveau message.
  4. Dans la barre de signature (si activée), sélectionnez votre signature Mail pro.

🎉 Vous devriez voir votre signature HTML avec photo, liens et mise en forme intacte.

Nous allons maintenant découvrir :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?
  • Comment créer une image emoji personnalisée sur Mac avec Image Playground
  • Une alternative gratuite pour ceux qui ne veulent pas passer par iOS 17+
  • Des astuces supplémentaires pour héberger ses images de signature
  • Une FAQ pour répondre aux blocages fréquents

Créer un emoji personnalisé sur Mac avec Image Playground

Depuis macOS Sonoma couplé à iOS 17, Apple introduit une fonctionnalité ludique et très utile pour personnaliser vos emails : Image Playground. Cet outil permet de créer des stickers-emoji personnalisés que vous pouvez intégrer dans vos signatures ou emails pour une touche plus humaine et sympathique.

Où le trouver ?

Image Playground est disponible :

  • dans l’app Messages sur iPhone (iOS 17 minimum),
  • depuis l’application sur Mac,
  • dans certaines apps macOS (Sonoma requis),
  • ou directement depuis le champ « emoji » (Cmd + Ctrl + Espace) quand le support est actif.

Que pouvez-vous faire avec ?

  • Personnaliser un emoji de votre avatar
  • Ajouter des accessoires (lunettes, chapeau…)
  • Changer les expressions ou le style artistique
  • Enregistrer et exporter en PNG ou JPEG

Utilisation dans une signature :

  1. Créez votre emoji et enregistrez-le dans le Finder (glisser-déposer).
  2. Hébergez-le, par exemple, sur votre site (ex : https://crea-troyes.fr/img/emoji.jpg).
  3. Remplacez le lien <img src="..."> dans votre HTML de signature.

🔁 Ces emojis sont parfaits pour humaniser vos emails ou créer une ambiance décontractée sans perdre en professionnalisme.

Alternative gratuite à Image Playground : Bitmoji

Si vous ne disposez pas d’un iPhone ou que votre Mac n’est pas à jour, Bitmoji est une excellente alternative gratuite :

Bitmoji, c’est quoi ?

  • Une application mobile (iOS/Android)
  • Vous créez un avatar à votre image
  • Vous pouvez générer des stickers (émotions, costumes, textes…)

Étapes pour l’utiliser sur Mac :

  1. Téléchargez l’app Bitmoji sur votre smartphone.
  2. Créez votre avatar.
  3. Dans l’app, choisissez un sticker.
  4. Partagez-le sur votre adresse mail ou AirDrop.
  5. Enregistrez l’image sur votre Mac.
  6. Hébergez l’image sur votre site ou un CDN.
  7. Intégrez-la comme une image classique dans votre signature HTML.

💬 Bitmoji est particulièrement utile pour un style plus fun et accessible, notamment dans les emails internes, newsletters ou contacts clients créatifs.

Où héberger vos images pour la signature HTML ?

Apple Mail ne supporte pas les images locales (en file://). Il faut obligatoirement héberger vos images en ligne.

🧾 Voici quelques options gratuites :

PlateformeAvantagesInconvénients
Votre site perso (ex : crea-troyes.fr)Contrôle total, pas de pubRequiert FTP ou admin
Imgur.comGratuit, rapide, sans inscriptionImages publiques, parfois compressées
CloudinaryTrès bon pour développeursLimite gratuite
Google Drive / DropboxAccessible si bien configuréURL parfois complexes

💡 Astuce : Pour un rendu rapide, pensez à optimiser les images (poids < 100 Ko) avant l’upload. Utilisez TinyPNG pour compresser vos fichiers.

Que mettre (ou ne pas mettre) dans une signature d’e-mail ? Bonnes pratiques et erreurs à éviter

Une bonne signature d’e-mail doit à la fois refléter votre professionnalisme et contenir les informations essentielles pour que votre correspondant puisse vous recontacter facilement. Voici ce qu’elle doit contenir :

  • ✅ Votre nom complet, en gras si possible
  • ✅ Votre fonction ou votre rôle professionnel
  • ✅ Le nom de votre entreprise ou marque
  • ✅ Un lien vers votre site web professionnel
  • ✅ Vos coordonnées principales (email, téléphone, lien LinkedIn ou Twitter)
  • ✅ Votre logo ou une photo de vous pour humaniser l’échange
  • ✅ Une charte graphique sobre, cohérente avec votre image

En revanche, évitez les erreurs classiques qui nuisent à la lisibilité ou à la réputation de vos mails :

  • ❌ N’ajoutez pas trop de couleurs ou de polices fantaisistes : restez lisible
  • ❌ Évitez les citations personnelles, souvent mal perçues en contexte professionnel
  • ❌ Ne mettez pas d’images trop lourdes (au-delà de 150 Ko), cela ralentit l’ouverture
  • ❌ Bannissez les GIF animés, qui peuvent sembler non professionnels
  • ❌ N’insérez pas de fichiers joints dans la signature (vCard, PDF, etc.)
  • ❌ Évitez les signatures trop longues : limitez-vous à 5-6 lignes de texte

💡 Conseil : testez votre signature en l’envoyant à différentes boîtes mail (Gmail, Outlook, Yahoo, etc.) pour vérifier son rendu. Et pensez à ajouter un lien de désabonnement si vous envoyez des emails en masse via un outil d’emailing.

FAQ – Problèmes fréquents et solutions

Ma signature ne s’affiche pas dans Mail !

Vérifiez que le fichier .mailsignature est verrouillé (clic droit > Lire les infos > cocher “verrouillé”).

Je ne trouve pas le bon fichier de signature

Ouvrez le bon dossier : ~/Library/Mail/V10/MailData/Signatures/
Triez les fichiers par date de modification
Ouvrez celui dont le contenu contient le --- que vous aviez tapé.

Les images ne s’affichent pas ?

Vos images doivent être hébergées en HTTPS
Vérifiez que les liens fonctionnent en les ouvrant dans un navigateur
Évitez les URL temporaires (comme celles de Google Drive non partagées publiquement)

Ma signature s’affiche mal chez mes destinataires (Gmail, Outlook) ?

Utilisez du HTML simple et table-based (comme fourni ici)
N’utilisez pas de CSS externe ou de JavaScript
Privilégiez les balises <table> plutôt que <div> pour garantir la compatibilité.

Comment changer ma signature plus tard ?

Déverrouillez le fichier, modifiez-le, puis reverrouillez-le après sauvegarde.
Vous pouvez créer plusieurs fichiers .mailsignature et les tester.

Une signature HTML, c’est pro et ça impressionne !

Grâce à ce tutoriel complet, vous savez désormais :

  • Créer une signature HTML avec photo dans Apple Mail
  • Modifier un fichier .mailsignature en toute sécurité
  • Ajouter des éléments visuels comme emojis ou avatars personnalisés
  • Héberger proprement vos images
  • Résoudre les bugs les plus courants

Vous venez de franchir un niveau supérieur dans la personnalisation de votre communication numérique ✨

Le support d’Apple à propos de La signature dans Mail.

Live on Twitch