UPDATE 10-20-2012: If you are on Snow Leopard, Mac OS X 10.6, continue reading. This tutorial will also work for users on Tiger, OS X 10.4 and Leopard, OS X 10.5. To see the entire list of tutorials that I have written on creating and installing HTML signatures into various mail applications, go to HTML Signature Installation Help.
Since I started freelancing, I wanted my e-mail signature to be a bit more useful and appealing to look at. I wanted something more professional and attractive so people can easily surf to my website through clicking on the e-mail signature link. (Thanks to my design friend, John who showed me how to do this with Apple Mail).
Apple Mail allows you to control the font, color, and even insert images (but as attachment only) into a signature. But to have total control over the design of the new e-mail signature and having images in it without them being attachments, I had to first design my new e-mail signature with HTML and CSS outside of Apple Mail, and then save that HTML file as a Mail signature. Here’s how it’s done.
Step 1: Designing the HTML/CSS
Before we begin, here are some basic but important notes to keep in mind as you design your signature. One major obstacle in designing HTML e-mail templates is that there are literally dozens of different e-mail clients out there (most if not all can’t handle CSS and HTML as well as our internet browsers can) so you have to keep your design and codes as simple and straightforward as possible.
- 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. Campaign Monitor has a great summary of CSS support in e-mail to use for reference.
- Use absolute URLs. Relative paths won’t work for an e-mail signature. So all your links need to be absolute URLs.
- Link to images. I personally dislike e-mail signature images as attachments (it makes it easy to mistaken that image as a legitimate attachment). Because of this, I recommend linking to your images by placing them on a web server rather than including them as attachments.
- Exclude HTML, HEAD, and BODY tags. When we get ready to save your HTML signature into Mail, make sure that only the relevant HTML is included in your document.
For my signature, I used a two-column table. I have my logo on the left and the text on the right. I placed each element inside its own SPAN division to have the text float left without it breaking off to its own line and so that I could use inline CSS to format each element. If you use a DIV instead of a SPAN, each element will start in a new line.
Step 2: Saving the Signature into Mail
Once you have created the HTML for your e-mail signature, the next step is to get the signature into Mail.
- In Mail, open Preferences and click on the Signatures icon.
- Create a new signature by clicking on the plus icon (you can just leave the signature blank for now).
- Quit Mail.
- In Safari, open the HTML file that you created.
- In Safari, go to File > Save As. Then, navigate to Your Home Folder > Library > Mail > Signatures. We want to overwrite the signature that you just created in Mail. Click on the existing signature file, make sure that the format is set to Web Archive, and hit Save. (If there are multiple files in this folder, switch the save dialog to the list view. The signature that you just added in Mail should be the file that was last modified just a few minutes ago.)
- Re-open Mail. Done!
Summing Up
Feel free to contact me if you run into any problems creating your very own Apple Mail signature. I’m very interested in seeing all the creative signatures that others are creating so please post your link in the comment area. Cheers!
UPDATE 08-30-2012: Due to the high number of recent requests to create custom email signatures, I created a service section for signature design and development. If you would like me to create a signature for you, please visit www.mydesignpad.com/htmlsignature/ for more info.
71 comments »
August 19th, 2013
Wonderful! Worked perfectly. Thank you!
September 5th, 2013
My signatures appear as they should in the library and are correct in the signatures panel of Mail preferences. However when I use the signature the links and formatting are gone. They work perfectly fine in one email account but not the other. What have I done wrong?
Thank you!!!
October 8th, 2013
Work perfect. Thanks.
November 27th, 2013
Every time I re-open Mail, it overwrites the .mailsignature file with the original one. I’m not sure why or how to fix that. Suggestions?
November 27th, 2013
Nevermind, I found your page for 10.8 (I’m in 10.9, but same issue) and saw that you have to lock the file. Works like a charm now, thanks!
March 8th, 2014
Thanks for the useful information. I was also having problems linking an image in 10.6.8 and mail version 4.6. In the end I opened the html in Safari, selected all and copied. I then created a new mail signature and pasted. It maintained all the links including that to my image. Thanks again Tim for making this information available.
March 11th, 2014
Hey,
I did a mail signature for our account but I seem to have a problem when attaching stuff. It goes into the mail signature table and breaks the whole signature apart. PLEASE HELP ME! I can mail you a pic to show you what I mean
May 14th, 2014
Hi Tim,
I am running a work computer with OS 10.6.8 and I’m using Apple Mail Version: 4.6 (1085).
Can I use GOOGLE DOCS to create my signature? How do I do it once I’ve created it.
Thank you!
Tyler
May 20th, 2014
Tyler, what you need is to write up the html codes. What program you use to write it doesn’t matter.
May 23rd, 2014
[…] Creating an attractive html signature in apple mail […]
February 26th, 2015
Hello – thanks so much for this! Everything worked great…except that the image I put in my signature is hosted by a free site (imageshack) and when I send an email it becomes clickable and brings the receiver to that website. Is there a way to keep the image but disable the link? Hopefully that makes sense the way I worded it.
Thanks!
March 3rd, 2015
Nicole, as long as you can edit the html codes, you should be able to disable the link by getting rid of the “a” tag while keeping the “img” part that is wrapped within it.
April 27th, 2015
HI
Thanks for the tutorial. However, I cannot make it work.
The images in my signature appear as a blue square with a question mark. What can I be doing wrong???
Thanks
July 31st, 2015
Hi Tim, this fixed the issue I was having. Thanks so much for posting this solution!
March 26th, 2016
Hi i am trying to get rid of the issue of apple mail taking the image out of my signature and turning it in to an attachment and html signature is supposed to make that happen from what i am reading, and I doing something wrong in code or is that just a myth that this could be possible in the apple mail program
May 29th, 2016
Kevin, yes, html signature would fix that problem with mac mail. For more info about html signatures and the services that I offer, chick here: http://mydesignpad.com/htmlsignature/
July 26th, 2016
Hi Tim, I’m trying to navigate from Safari to the folder you referenced, “navigate to Your Home Folder > Library > Mail > Signatures” but I can’t find it…even using terminal to show hidden files…can you help? Thanks very much! JB
August 2nd, 2016
Hello,
I’m trying to put a signature that was designed in Windows/ Outlook for a PC, on Apple mail. Each time I copy it over to Apple Mail, the format changes and the image doesn’t show. Are you able to help at all?
Thanks v much
August 19th, 2016
Emily, for the email signature to work, it have to be created using proper HTML coding or else the design and layout will not stick.
April 25th, 2017
Everything works great , thank you. My problem is when answering or forwarding messages the signature appears on the middle of the former text and I have to tab the text down every time….
January 4th, 2019
Missing from the instructions is how to generate proper basic html code for your signature. If you don’t know how to code, you can use a simple visual web editor program like KompoZer (http://kompozer.sourceforge.net/) to build and save your signature in HTML. When you are done, open this file with a text editor like note pad or text wrangler and delete the line or 2 of meta and header text at the top. The file should start with this:
and end with this:
Then follow Tim’s instructions (great tutorial Tim)
Once you get it into your macmail, you can adjust the text a little (text edits, font size etc.). Happy sigs