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

by

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.

13 Comments

  1. Karen on said:

    So very confused! “First you need to establish what you want your signature to be and create it using basic HTML markup.” I have no idea what this is. I googled and I need a bunch of code? What?

  2. Scott on said:

    Hey thanks for putting this together. I have had a number of problems with Outlook for Mac, so finally decided to use Mail. The only issue I had with Mail is the signature and you fixed it. THANKS.

  3. Jim on said:

    Using Mail 9.2/El Capitan now. Not having much success with this. There are some changes in where stuff is now: mailsignature files are now in ~/Library/V3. There are the webarchive files mentioned above, but a new one was NOT created when I made the new ‘dummy’ sig, only the V3 directory had the new file.

    However, one CAN make an image into a link using the command-k method. The problem is that it is not easy to see that one actually has an image selected before using that menu item.

    Any chance you can update this blog entry? Please! ;-)

  4. Julie on said:

    Hi, I am having difficulty creating an email signature with images only (main signature and then social media icons) and having each icon link to the specific website. I see your instructions above but how and in what program do you create a HTML version of your email signature with images? Thank you. Julie

  5. Sylvia on said:

    Thank you so much for this tutorial! It was exactly what I was looking for, and it worked like a charm! :)

  6. Stella on said:

    Thanks for this. The only article I found dealing with Mail 6.5. Why they had to change .webarchive to .mailsignature beats me?! I wasn’t quite sure which bits to replace in the .mailsignature file. So I did as the following example which seems to work:

    Message-Id:
    Mime-Version: 1.0 (Mac OS X Mail 6.5 \(1508\))
    Content-Type: multipart/related;
    type=”text/html”;
    boundary=”Apple-Mail=_B8D56470-073D-473E-91B8-438702C2676E”

    –Apple-Mail=_B8D56470-073D-473E-91B8-438702C2676E
    Content-Transfer-Encoding: 7bit
    Content-Type: text/html;
    charset=us-ascii

    [ADD YOUR HTML HERE]

    –Apple-Mail=_B8D56470-073D-473E-91B8-438702C2676E
    Content-Transfer-Encoding: base64
    Content-Disposition: attachment;
    filename=”Your Signature.webarchive”
    Content-Type: application/x-webarchive;
    name=”Your Signature.webarchive”
    Content-Id:

    [REMOVE THE GOBBLEDEGOOK TEXT FROM HERE]

    –Apple-Mail=_B8D56470-073D-473E-91B8-438702C2676E–

  7. Aldo Ellul on said:

    Hi,

    Thanks for this, very useful and detailed.

    I tried everything and all seems fine with the exception that the image is not being loaded when creating a new email.

    I can’t seem to make this work.

    Your assistance on the image issue is greatly appreciated.

    Thanks.

    Aldo

  8. James on said:

    Hi Philipp,

    Thanks a lot for taking the time to write this up. I wouldn’t have known where to start…

    I’m having no problem with desktop clients, but once this goes into mobile apps, the does not appear as I anticipated it would. I have tested this with both iOS Mail and iOS Gmail Apps.

    Have I done something wrong or is this currently an anticipated result?

    Thanks again, talk soon,
    James

    • James on said:

      *…goes into mobile apps, the <img> does not appear as I anticipated it…

  9. Cory on said:

    perfect and so easy. thanks for the procedure.

  10. Michael on said:

    What do you mean when you say “the process for setting an html signature with images in mac Mail is remarkably un-Mac-like.”? They didn’t include what should be a feature of any mail program forcing anyone who wants to do this to go through some convoluted workaround in an effort to make things “easy to use”. Exactly what I’ve come to expect from Apple products.

  11. WD on said:

    I tried this. It works, but the URL hyperlink I use goes blue (formatted, it was grey). And Gmail just removes the formatting altogether.

    Is there any way around this?

    Thanks. Great explanation, by the way.

    • Philipp on said:

      There are several ways to format a link, maybe you can just try another method to get your link-color. some examples you can try:

      Text

      or

      Text

      or

      Text

      also the signature should NOT have a or tag in the signature. Just start with the content.

Leave a Reply to Stella Cancel reply

Your email address will not be published. Required fields are marked