How To: Make an HTML Email Signature For Apple Mail

mail-image

My good friend and designer, James LaCroix, showed me awhile back how to make an html email signature for Apple’s Mail program (something it doesn’t do easily). Since I set up that signature I have had a few folks inquire how I made it, so I thought I show the steps here. NOTE: These directions work with Apple’s Tiger and Leopard.

Step One: HTML, AVATARS and YOUR INFO

Create your signature in html format. You can use something like Apple’s Textedit, my favorite Textmate, or something more visually based like Dream Weaver.

You will need to upload your avatar to your server, or host it on something like a box.net account (you’ll have to make sure it’s public if you use this). My avatar is set to 42×42.

You can download a basic template here.

Step Two: FAKE SIGNATURE

Next, you want to navigate to Mail’s preferences (or hit the shortcut ?,). Click the signature tab at the top. Here you want to create a new signature, and give it a fancy name since it will be for your new fancy signature. I have called mine FAKE for purposes of the tutorial. This will serve as a place-holder for your new HTML signature. Now drag title of your signature to whatever email account you want to be able to use it with (or drag it to all).

Signatures

Step Three: WEBARCHIVE

Next, open your HTML file in safari, and click “save as” in the menubar. Next, go to your home folder—>Library—>Mail—>Signatures. In there you will see the signature you created in Mail’s preferences (you can see what the most recent signature is using quick-look in Leopard, or look at the “date modified”). The title of the FAKE signature you created will look something like “8D2D5125-757A-482F-A291-EFDFEE476000.” Copy that title, and make that the title of the Webarchive file you just created. You do this so when you drop that webarchive file into signatures folder it will overwrite the FAKE signature. Once you move your webarchive Signature to the signature folder, and click replace and you should be good. Restart Mail.

filetype

Now, when you go to write an email make sure you have your new signature selected from the panel in your message window and everything should look slick. Let me know if you have any questions or suggestions.

New Message

UPDATE:
A reader has sent in this tip and think it may solve some of the problems people are having. Let me know if it works for you:

“There must be written text before and after the HTML entry!” … i don’t know why this works, but i’ve spend a long time trying out all kinds of methods, and then came across this side (http://www.macosxhints.com/article.php?story=20070407214643680) and implemented only the part where this is mentioned … worked great! I believe, that those who did get it to work might have had text before and after, but may not have realized that it this is why it worked..

60 responses to “How To: Make an HTML Email Signature For Apple Mail”

  1. Hey guys – glad it helped!

    @John – yes this works with both Tiger and Leopard. I have done it on both OS’s. And it is done the same way for both of them as well.

  2. So I tried it – although I tried to use a HTML file with CSS (instead of inline SPAN styles) – and it really didn’t work – it changed the font and the color of the text in the email….

    Any ideas?

  3. Please keep me in your prayers… I have not yet converted to Mac. I’m almost ready to make my decision but I’ve counted the cost and it is currently too high.

    May God have mercy on me, a Dell user.

    And what rhymes with Dell…?

    • Hell… Also… for anyone readying this and i'm hoping by now you have a mac…. despite the price, the technology is the better investment you won't have to replace a mac for years if you just take care of it.. the processing will most likely never fail. as apposed to PC … which from the very start not as fast as a Mac… brand new PC have trouble outperforming even a USED Mac

  4. Everytime I try this the image or Avatar that I use is missing, instead there is a blue box with a question mark. I tried hosting the image file and also locally on my mac but it still won’t work. Any ideas anyone??

  5. @James – Have you tried sending an email to yourself, I’ve found that the icon doesn’t show up until you actually mail it out. I am not really sure why? Also did you use the method above or the suggested css method in the comments? I wasn’t able to get the image to show with the css method.

  6. This almost worked perfectly! I have a beautiful signature, but none of the links work. It’s as if a photograph of my signature was taken. Any ideas? Anyways, I was dying to know how to do this under Leopard and now I do. My signature is gorgeous! Also, two other tips for Safari users: 1) Replace the “ALT” tag in the template provided here with the”TITLE” tag. Safari uses “TITLE” for floating tool-tips and not “ALT.” Also, ensure you save your signature as a “Web Archive” and not “Page Source.” You’ll have a choice. If anyone can help me, drop me a line. Enjoy and thanks again!

  7. OK…maybe it was my fault about the bad links I noted in the above posting. 1) When you compose a message after following these steps, it may appear that your sig links are not “hot.” However, I’ve found that if you send out a message (note: I’ve only verified this under Hotmail and OS X), the links are indeed clickable by the recipient (except for the “aim” link). 2) There’s a slight chance that there’s something about that Signature creation option in Mail that says “Use the same font as the message above” (or whatever the exact text says). This time, I un-checked that box when I made my signature and maybe that made my signature work. Maybe it made a difference in things working this time and then again, maybe I’m wrong. 3) Lastly, I found that composing a message in Mail after you’ve done this will show your signature with unclickable links. However, if you then select one of your OLDER signatures and then GO BACK to your latest signature, suddenly all of your signature links work. Strange. Maybe it’s a bug. Maybe not. I’m using Leopard. Good luck to all!

  8. Brian – Thanks for the tip on the tags. I am not sure why your links wouldn’t be working. The only thing I can think of is that either your div tag is messed up or you have an open-ended tag somewhere in the code. Otherwise I’m not sure.

  9. Good tutorial!

    One thought that a couple of people have hit on is making sure that the signature looks good in mail clients other than Mail.app, since most people who receive your e-mails will be viewing them in Outlook or through a web-based e-mail service.

    Two basic tips are to use tables for layout rather than CSS, and use only inline css rather than stylesheets. Campaign Monitor has a good summary of CSS support in e-mail clients, Litmus can help you test your signature, and I recently wrote about designing e-mail signatures that display correctly on all e-mail platforms.

    Hope this helps!

  10. Dude I’ve been trying to figure this out for the last hour… I have everything set up, but I don’t have a “Signatures” folder in Library – Mail. Is it something funky with OS X 10.5.2 or because I’m a n00b?

  11. Jake – haha, I don’t know whether you’re a n00b or not but I like that you gave me only two choices! I think there’s a third one. You should be able to create a signature folder in root-user-library-mail and that should be all that’s needed. let me know if that works.

  12. not sure if this post is still hot.

    but for some reason my code shows in my signature. I cannot get it to show as an image at all, either when I open in safari or create it as a signature. I uploaded it to my myspace page and it looks great, but I am obviously missing a step, which I have read over and over and over again.

    Thanks.

  13. Hi,
    I have successfully made a signature and have loaded it on mail signatures. It works great while testing it on firefox and when i sent it to myself in mail. but when i sent it to my gmail and hotmail and also someone elses hotmail, the skype, ichat and aim links are non clickable. My research surrests that it is only the links that do not have a direct website like my links to facebook and website and not because html is sometimes not supported.
    Are the links just meant to be skype:username or do that have to have www. in front or something?
    Hope someone can help.

  14. Everything works for me, except for the picture part. Numerous friends have been commenting on this, suggesting that I put a .jpg in my signature instead of .tiff which they can't read being non-Mac-users.

    However, whenever I try to paste pictures in differently, somehow, Mail automatically converts every .jpg automatically back into .tiff format again. Why on earth is that?!

    When following the whole procedure as described, I get the fancy signature style apart from the picture: still blue blocks with question marks. What to do?

  15. The pictures won't display in my signature… I've tried .gif and .jpg neither of them work.

  16. this works for me, with the small nit that my newly created signature appears at the top of the email message, and if i start to type a message, the signature is on top of my message

  17. Thank You for an amazing post. I don't usually comment on items on the interwebz but I found this post to be completely relevant and helpful for Creatives that are out and about. Heads up!

  18. Help! I can't seem to get this to work using textedit. Am I doing something wrong? When I download the template, I don't know how to add my logo. I went to box.net and uploaded my logo but it still doesn't work.
    I had it working a month ago. I used the trial version of textmate. A friend was playing on my computer and screwed with the signature in mail and now I can't figure out how I did it. Do I have to use textmate? At this point I would have to pay for it and I really didn't want to do that.
    AAAAAAAAHHHHHHHHHHH!!!!!!!!!!

  19. Hi there!

    I did it!

    Do everything you did. Open the page in Safari, highlight all and copy. Finally paste into you current (no image) signature in Mail. And voila!!!
    Hope this helps you too!

  20. Hello,
    For some reason I can not get this to work.. I have tried it numerous times. I have viewed it in a couple of html viewers and it works fine there. Could it be that the latest version of mail does not support html?
    Any pointers would be much appreciated

    Thanks

    J

  21. Thanks, this worked great for me to use a gif animated image in my signature.
    It took me a couple of tries, had to follow the instructions exactly.

  22. Hi there everything work, except my logo…doesn't not show up only a square with a question mark.
    i did my html in dreamweaver…please advice any help would be greatly appreciated!

    Thanks

  23. I found this post on creating html formatted signatures for Apple Mail very helpful. I have one problem. I used a gif in my signature and it does not show up in the signature, though it does show up in the preferences. Any suggestions?

  24. Thanks for this – works great. The only 2 little problems I had to overcome. First was that my Library folder was not visible – I think this is a feature of the latest version of OSX (I’m on 10.7.2). I found instructions here on how to make it appear visible again: http://gregferro.com/osx-lion-library-folder-not-visible/
    Also, on the latest version of Mail (5.1) the Signatures folder was under Library/Mail/V2/MailData/Signatures, but it worked just the same.

    Good luck!

  25. This worked great! I had to follow Richards directions to get my folders visible, but then it was really easy.
    Thank you!

  26. I have tried to do this but no luck. after i created the html and previewed in browser and i go to save it i can’t find home folder—>Library—>Mail—>Signatures. ????? hope you can help

  27. Thanks so much for sharing your tutorial. After replacing the web archived folder, I also copied and pasted the signature into the Mail, Preferences, Signautre, section. It didn’t work for me until I did that. Thanks again … three years later and this is still a hot topic.

    @Meg: try opening your Finder window, that should show you the Library file, then Mail, then Signatures.

  28. I have also got problems finding the signatures folder.
    It is not in my mail folder.
    I am using Lion.

    Any suggestions

  29. Thanks a lot sir!

    After 4 hours of solving issues (mainly with the logos like many others) I’m there now 90%, the only 2 options I can’t find is (1)how to link the logo to a website (2)without having the logo to be an attachment when I send emails. Other than that everything works & looks perfectly fine!

  30. Pretty great post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed surfing around your blog posts. After all I will be subscribing to your feed and I hope you write once more soon!

  31. Hi,

    Thanks for the nice info. A bit woorying though that one needs this manual to do someting which can be done in MS world (outlook) with two clicks of a mouse…maybe I should get back to my win7 box after all…;-)