Create an HTML Signature Including Image Links in Mac Mail (OS10.8)

You might imagine that this subject would be rather straight forward and hardly worthy of an article of any sort.  Unfortunately, you would indeed be imagining.  Adding an HTML signature to Mac Mail is not as simple as pasting the html directly into the signature field of the client like in Gmail or Outlook.  With Apple Mail pasting HTML or images directly into the signature field just doesn’t work very well. In fact, the process for setting an html signature with images in mac Mail is remarkably un-Mac-like.

“What is this guy talking about!” you may be asking yourself.  “You can paste images into Mac Mail signatures and they work just fine”, you say?  I wish they did, but they do not. Any images that are included in the signature will usually be included in the message as attachments.  I’m sure you’ve encountered many an email with a company logo that is part of the signature being tagged as an attachment.  This will not do. So how do we address this issue? Here I will outline exactly that.

Create Your HTML Signature
First you need to establish what you want your signature to be and create it using basic HTML markup.  The benefit of having an HTML signature is that it allows you to have control over custom formatting and include images with URLs. Images that you want as part of your signature should be uploaded to the web and hrefs must be absolute.

Once you are satisfied with the formatting of your HTML signature you can proceed. Let’s save the HTML file as  “my_sig.html” to avoid any confusion later on.

Create a Temporay Signature in Mac Mail
Open Mac Mail and go to Preferences. Select the Account you would like to add your HTML signature to. Click the ‘+’ to create a signature. This will be a Temporary Signature. Type in a few obscenities if you want, no one is looking.  Creating this signature will generate the mailsignature file that we will be editing to allow for a proper HTML signature. Ultimately we’ll be overwriting most of the contents of this mailsignature file.

Moving on…

Close preferences and then quit Mail so that it doesn’t overwrite any changes we make to the mailsignature file in the Library – which is our next destination..

Locate your “.mailsgnature file”

Command Shift -G  and enter: ~/Library/Mail/V2/MailData/Signatures

or
Navigate in the Finder to Macintosh HD/Users/<your account name>/Library. Scroll down and select and open the Mail folder inside you’ll find the folder V2, open that and find the folder “Maildata” inside of which you’ll find “Signatures”

Here you will find your signature file which ends in “.mailsignature”

(NOTE: If you have signatures configured with your Mac Mail accounts, you will see more than one file ending in “.mailsignature” in the “Signatures” folder.  The file with the most recent creation date is the one you are looking for.)

Edit Your “.mailsignature” File
Open the file ending in “.mailsignature” in your favorite HTML editor. Select All and Copy the code from your “my_sig.html” HTML file and Paste it into your “.mailsignature” file replacing the main body of code, yet leaving the header block of meta data code intact. Save and close your file.

Lock Your File
Next we want to Lock this file to ensure that Mac Mail never overwrites it.
In the finder Select the “.mailsignature” file (the one we just saved, located in the “Signatures” folder) Select the file and press CMND-i
or
go to the menubar and selct File–>Get Info

An info window for our signature file will open.  There, at the bttom of the General information itemL Check “Locked”. Close the info window – your file is now locked.

Check It Out!
Now let’s go back to Mail and take a look at our signature.
Open Mail, go to Preferences and select the Account you previously added your Temporary Signature to.

You will now see your new HTML Signature. But wait… Blimey!
Why aren’t the images showing up? Isn’t what this whole exercise was about?!?

Don’t worry – It’s all good. Close the Preference window and compose a new message. You will see in your message your new signature the way you intended it to be. Send a test meassage to yourself. If you are satisfied – start sending emails and show off your new HTML signature!

What a pain in the @$$ that was, huh?

Mountain Lions are particularly stubborn about signatures

Additional Notes: Please note that you can make some text edits to your HTML signature right in the Mac Mail preference pane, but if you want to change any of the images, links or other aspects of the HTML you’ll have to go back and edit your file ending in “.mailsignature”)

Also, when formatting your HTML email stick to the following rules to avoid headaches:
DO use inline CSS and stick to basic CSS properties.
DO use absolute URLs and links to images.
DON’T use HTML, HEAD, and BODY tags.