How to create an HTML signature for Apple Mail

By

It's not super intuitive, but you can make your own HTML signature for Apple Mail fairly easily. Screengrab: Cult of Mac
It's not super-intuitive, but you can make your own HTML signature for Apple Mail fairly easily.
Screengrab: Cult of Mac

We all like our email signatures to look fantastic. Apple Mail has let you make your special mark with an HTML-style email signature since OS X Lion.

The process of setting up an HTML signature in Apple Mail has only gotten more complex over the years, unfortunately. Now it takes a bit of patience and a sturdy sense of adventure, but it’s not too difficult.

If you want to create your own HTML signature for Apple’s Mail app on OS X Yosemite, keep reading.

How to create an HTML signature for Apple Mail

Click here to create a new HTML signature placeholder.
Click here to create a new HTML signature placeholder.
Screengrab: Cult of Mac

Create a placeholder Apple Mail signature

First up, you need to launch Apple Mail. Then head to the Mail menu. Choose Preferences, then click on the Signatures tab at the top right of the Preferences window. Click on the + button underneath that center pane to create a new signature. OS X will name it Signature #1, and add in your info. You can leave it as is, since you’ll be swapping it out with your HTML signature later.

Now, drag the signature you just created over to one of your email addresses in the left-hand pane to associate the signature with the email address. Close the preferences window and quit Mail.

Create an HTML signature

HTML is the next step. You’ll need to create your own HTML using a text editor. Don’t use Dreamweaver or any other WYSIWYG code editor, as it will tend to add excess code you don’t want. Your code will need inline CSS and should only have basic HTML stuff like divs, images, links and the like. Don’t use any html, head or body tags.

Here’s the HTML for my own signature here at Cult of Mac. Feel free to modify it to suit your own needs, or create your own.

<div id="sig" style="min-height: 50px; line-height: 17px; margin: 6px 0; padding: 8px; border-top: 1px #999999 dotted; border-bottom: 1px #999999 dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 11px; color: #606f78; min-width: 530px;"><img style="float: left; padding: 2px 6px 0 0;" src="http://www.cultofmac.com/LOGOHERE.jpg" alt="CultofMac Logo" />

<strong style="color: #606f78;">Rob LeFebvre</strong>. Culture Editor. <a style="color: #606f78; text-decoration: none; border-bottom: 1px #999999 dotted;" title="Visit CultofMac.com" href="http://www.cultofmac.com">Cult of Mac.com</a>

(408) 320-8874 | <a style="color: #606f78; text-decoration: none; border-bottom: 1px #999999 dotted;" href="mailto:roblef@cultofmac.com">roblef@cultofmac.com</a> |
@roblef | http://cultofmac.com/author/rob-lefebvre</div>

This is the file you need.
This is the file you need.
Screengrab: Cult of Mac

Replace the placeholder with your HTML signature

Now you need to find your placeholder signature, which is hidden in your Library folder. In the Finder, click on the Go menu, and hold the Option key down to see the Library folder. Choose that Library folder, and navigate to one of the following folders within.

  • If you’re using iCloud, go to ~/Library/Mobile Documents/com~apple~mail/Data/MailData/Signatures/
  • If not using iCloud, head to ~/Library/Mail/V2/MailData/Signatures/

This will be easier to find the folder you need if you enable List view in the Finder (View, As List, or Command-2). You can also just hit Command-G in the Finder and paste the above file paths in. Either way, your placeholder signature is the most recently modified file that ends with .mailsignature.

Open this file in your text editor (if you use TextEdit, be sure to set the Open and Save preferences to Display HTML files as HTML code instead of formatted text) and replace everything below the Mime-Version line with the HTML code you created above.

Lock the file if you're not using iCloud.
Lock the file if you’re not using iCloud.
Screengrab: Cult of Mac

If you’re using iCloud, don’t do this next step. However, if you’re not using iCloud to sync your email (meaning you found your signature file in the second file path above), you’ll need to Lock your file. To do so, click on the Editing arrow to the right of the file name in your text editor. Then check the Locked button in the drop-down dialog. Save the file and quit your text editor.

When you open Mail again — or quit and restart it — you’ll find your new signature in the place where you created that placeholder signature. You won’t be able to see the images in the Preferences pane, but when you create a new message, all the right stuff will show up where you want it.

How your new HTML email signature will look in the Preferences and a New Message.
How your new HTML email signature will look in the Preferences and a New Message.
Screengrab: Cult of Mac

Now you can make one of those fancy signatures you’ve long admired. Enjoy!

Thanks to Matt Coneybeare and Timmy Cai

  • Dutchman

    I find it hard to believe that you would say that creating a raw HTML signature and then hacking it into a plain text file “takes a bit of patience and a sturdy sense of adventure” and at the same time are selling the idea that creating a wiz-bang SWIFT app can be done by “anyone.”

    Hey, someone should make a signature app that does the whole process you went through. Should only take a couple of keystrokes, right?

  • Ingmar

    There is a significantly easier way of creating beautiful HTML signatures for Apple Mail: With a plugin called ‘Graffiti’ you don’t need to mess around with signature files anymore.
    Have a look at http://www.chungwasoft.com/graffiti/

    The developers also offer other great plugins for Mail.

    • Rob LeFebvre

      Checking this out now – thanks!

  • Eli Abra

    Agree with Dutchman, just did the recommended steps…got zilch

  • flowney

    There is an easier way. Instead of writing raw HTML, simply use Mail to construct a rich text signature in the body of an email message and then copy/paste that into your just created signature in Mail Preferences. Choose fonts, colors, etc. Use hypertext links, embed graphics, indentation and so on. Whatever you can do in the body of a rich text message can be used. The great thing about including images is that they don’t have to be on a web server somewhere.
    When you paste this rich text into the signature window and close Mail Prefs, Apple Mail writes all of the HTML for you.

    • Michael Vallance

      This makes more sense to me. How about some examples from Cult of Mac :-)

    • wetware

      flowney’s technique works and is very easy… thanks

  • Fabian

    Have a look at Graffiti, a Mail plugin, which makes the whole process extremely easy. You can find it at http://www.chungwasoft.com/graffiti/

  • ToNaDuvida

    I have just followed all the steps and that is what I got as a signature: Read more at http://www.cultofmac.com/305096/create-html-signature-apple-mail/#ulMm22egtOHSrDoO.99

    I did not understand the “if you use TextEdit, be sure to set the Open and Save preferences to Display HTML files as HTML code instead of formatted text”. Maybe my mistake was there? I am not using iCloud by the way.

    I also would like to insert my JPG logo in there and I am just wondering how to do that. I have my signature at a Word doc but have tried save it in HTML but did not work. What would be the editor to export to HTML?

    Thanks in advance!

  • David Stone

    Another option if you use Gmail/Google Apps.
    Create your signature in the signature panel of Gmail then simply copy paste into Mail > Signatures!
    This works and keep URLs to images etc.. intact.
    Only works if you use Safari. Chrome and Firefox don’t do have RTF pasteboard support.

  • Michael Vallance

    re. src=”http://www.cultofmac.com/LOGOHERE.jpg” alt=”CultofMac Logo” />

    What if I don’t have a web server with an associated image? Can create a path (i.e.. link) to an image on my Mac?
    Or embed an image within the signature?
    Thanks.