How to Create HTML email signature in macOS Mail App in macOS High Sierra

How to Create HTML Email Signature in macOS Mail App

Apple macOS Mail is a great email client and works very well but the one shortcoming is that it is not possible to create HTML email signatures in it’s Preferences. You can add and design signatures but the interface is very basic and simple. Follow these steps to create HTML email signatures in macOS Mail:

Step 1: Designing the HTML/CSS

html email signature

The image above is how my email signatures looks. It is a simple HTML table with two columns, one for the logo icon and the second column for details about myself. You can download my HTML email signature file as a starting point for designing your own.

You can design your own HTML email signature, hire a designer to do it for you or contact me to design it for you. I charge US$55 for 1 hour’s work to design a professional and appealing HTML email signature for you.

Keep in mind that not all email and webmail clients that you will be sending your emails to – with your HTML email signature – will support CSS and HTML as well as others. Keep the CSS and HTML as simple and basic as possible to make sure it is cross-client compatible. Consider these things:

  • Use tables for basic layout: The CSS float property is not supported in Gmail or Outlook, making CSS layouts impractical.
  • Use inline CSS: The style tag is not supported in Gmail, and support for CSS selectors is spotty.
  • Use only basic CSS properties: E-mail clients tend to be very picky about which CSS properties they support.
  • Use absolute URLs: Use full, absolute URLs to images and other resources.
  • Link to images: Don’t attach images to the email, rather upload them somewhere online and link to them.

How to reveal and copy HTML code in Safari

Here is how you can open your HTML signature file in Safari and copy it’s source code:

1. Open your HTML email signature file with Safari.

html email signature file

2. Go to Safari > Preferences.

safari preferences

3. On the “Advanced” tab, check “Show Develop menu in menu bar.”

safari show develop menu

4. On Safari’s menu bar, go to Develop > Show Page Source to reveal HTML code

safari show page source

5. Select all of the HTML code and copy

safari copy page source code

Step 2: Create Placeholder Signature in Mail

In your macOS Mail app, go to Preferences > Signatures and click the plus (+) button to add a new placeholder signature.

macos mail signature

You can also click and drag the signature from All Signatures to the mailbox/es you want it to be available to. When you’re done, close the Preferences and also quit macOS Mail app and continue to Step 3 below.

Step 3: Open the Signatures Folder

Go to your Finder app in macOS and hold down the Option (Alt) key on your Mac while clicking on Go in the menu bar at the very top. Then select Library folder to navigate to the Library folder. Then go to Mail > V5 > MailData > Signatures folder where all your email signatures are stored.

macos mail signatures folder

Step 4: Update Placeholder Signature

The email signatures files have long strings as filenames on them and their extension is .mailsignature. Locate the one – possibly by looking at the created date – and open it with TextEdit or drag and drop it into your TextEdit app on macOS to start editing.

macos mail signature file

These signature files are often locked by default. If you see it shows locked, click on the arrow in the title bar of the TextEdit window and unlock it.

Now edit your email signature file by writing HTML code or by pasting the HTML code you previously copied from your HTML email signature file. Make sure to leave the email headers at the top intact. So only change or replace the HTML code after the Mime-Version... part.

Step 5: Lock Updated Signature File

It is important that you lock your email signature file after editing and saving it. When you are done editing, save the file and then click on the arrow in the titlebar of the TextEdit app and lock the file again by checking/ticking the Locked checkbox.

macos mail lock signature file

Step 6: Check Installation

To check and test your signature, open  your macOS Mail app again. Then create a new email and select the Signature on the right to see if it displays correctly.

test macos mail html email signature

The images may not show up and the links may not work while you are composing the email but they will work and show when someone receives your email. Send yourself a test email to receive the signature and test it out to make sure everything works correctly.

Summing Up

Feel free to contact me if you run into any problems creating your very own Apple Mail signature. I’ll be pleased to see your creative HTML email signature so please post your link in the comment area. Cheers!

If creating your own HTML signature seems a bit too much work or you just don’t have the time for it, please consider having me do it for you. For a small fee, I will design a few different options for you to choose from, write up the HTML codes, host your custom email images and help guide you through the installation process. Contact me for more info.

Video of How to Create HTML Email Signature in macOS Mail App

Here is a full video with steps and instructions showing you how to create HTML email signatures in macOS Mail: