Creating An Attractive HTML Signature in Apple Mail

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.

My E-mail Signature

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.

Mail Inbox

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.

Mail Preferences

  1. In Mail, open Preferences and click on the Signatures icon.
  2. Create a new signature by clicking on the plus icon (you can just leave the signature blank for now).
  3. Quit Mail.
  4. In Safari, open the HTML file that you created.
  5. 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.)
  6. Re-open Mail. Done!

Save As...

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.

February 24th, 2011 | Tutorial | 190765 Views | 71 Comments ›

71 comments »

  1. August 21st, 2011

    Jay says:

    I was following this tutorial to create my Apple Mail signature, but I can’t seem to navigate to the signatures folder. Has this changed in OSX Lion?

  2. August 21st, 2011

    Tim Cai says:

    I haven’t gotten a chance to update to OSX Lion yet but you can try to locate it by searching for “.webarchive” or “Signatures” on your computer. When you find it, it would be great if you can share it with all of us. Good luck and thank you.

  3. October 11th, 2011

    Ross Hall says:

    @Tim – Had the same problem for a bit on OS X Lion, but try this …

    Open Terminal (found in the utilities folder in Applications)

    Copy and paste the following command …
    chflags nohidden /Users/[username]/Library/

    (You need to change [username] to match the user name for the account you’re working with.)

    Hit return.

    Open a new finder window and you’ll find it there.

    Hope this helps!

  4. November 24th, 2011

    When someone replies to my HTML signature and I view in on my iPhone 4, the images are lo-res. How do I get my signature images to appear as hi-res on iPhone 4?

  5. December 8th, 2011

    Jim says:

    Replying to text only email sig will bust. Better to keep single column, design can look just as good.

  6. December 17th, 2011

    MJ West says:

    Design and set up the email ok but when I send some of the images included in the signature do not show up. I don’t see any typo errors and when I bring p the file in a browser it looks fine. Can’t figure out why the images don’t display. Any thoughts?

  7. December 19th, 2011

    Tim Cai says:

    Are you looking at messages in your Sent folder and not seeing the images or are other people telling you that they’re not showing up in the messages they receive from you? If you’re looking at the Sent folder, those images may not show up if you have set your Mail preferences not to display remote images. Mail -> Preferences -> Viewing -> Display remote images in HTML messages.

    Should be easy enough to check. If this is the case, the message in your Sent folder will have a blue banner at the top saying the message contains unloaded images. Click the Load Images button and they should appear. If so, you can be pretty sure your recipients are seeing them as well (unless they’re using Mail and have the same option set in their Viewing preferences).

  8. January 4th, 2012

    Hi – need help please. I’ve got the HTML signature in a file, and opened mail and hit the +. However, when I go to my Home, I cannot navigate to the proper place to save this. Seems to be the simplest part, but I’m failing and frustrated! When I hit “save as” I can only go as far as my Home Folder.

    Suggestions? And thank you for this work around.

  9. January 15th, 2012

    Performing a search will not ‘search’ the Library folder. First, open the library folder by selecting Finder, select GO from the menu bar, hold the OPTION key to open the Library. Once inside the Library folder, do a search for “.webarchive”. You’ll find the signature folder deeply embedded within sub-folders.

  10. January 17th, 2012

    Andrew says:

    A very useful tutorial…

    Similar to Jay, I am using OSX Lion. though still can’t find and drop in the .webarchive file I’ve created.

    I tried searching in Terminal.

    Though I’m still not getting it come up in Finder.

    Any suggestions?

    This is what I’ve tried, though I’m not too sure if I’ve got the right Username entered.

    Many thanks in Advance!!!

    Andy

  11. January 20th, 2012

    David K. says:

    Hi Tim, Nice tut.
    However, Mail seems not to include the images in the signature when sent. My colleagues tells me the image is missing in my signature, even if I can see it when writing my email.
    Image format is GIF and I am with Lion.
    Any idea ?
    Cheers.

  12. February 2nd, 2012

    Chris says:

    Hi Tim, Thanks for the tutorial. I am still having trouble trying to locate the > Library > Mail > Signatures. I’ve done a search as recommended and still no luck. Am on version 10.7.2

    Any help would be much appreciated. Thanks C

  13. February 4th, 2012

    Tim Cai says:

    Chris, On Mac OS X 10.7 up, you can locate the the “Signatures” folder by doing the following. You can open the folder ~/Library/Mail/V2/MailData/Signatures/ to show your email signatures in Finder by holding down the Option key and clicking the “Go” menu in Finder. You can also locate the “Go” menu on Finder’s top nav. Under the “Go” drop down menu, you will find “Library.” If that doesn’t work, try this: Use “Go To Folder” and Open ~/Library/ directly. All you need to do is hit Command+Shift+G from the Mac desktop (or Finder > Go > Go to Folder) and type in ~/Library to temporarily access the Library directory in the Finder. When you are done, close this window and it will no longer be visible.

  14. February 4th, 2012

    Tim Cai says:

    Hi David, your image needs to be up on your server. If your picture is on your computer, you will see your image but your recipients will not. Also each mail handling software acts differently. On some mail software, the user might need to click a link within the email to allow images to show up.

  15. February 11th, 2012

    Max says:

    For OSX Lion:
    Open the folder ~/Library/Mail/V2/MailData/Signatures/

  16. May 7th, 2012

    I have a client that I’m trying to walk through this process. We have the .webarchive loaded but she says the signature is now just the html code that I sent her. I think we followed the steps correctly. Can you think of why this might be happening? Thank you!

  17. May 7th, 2012

    Tim Cai says:

    Jodi, did you replace the .webarchive name that you created with your design with the generic file that you created with the signature section in mail? One good way to check is to preview your html file in a browser to see if it is showing up correctly first.

  18. May 10th, 2012

    Tim Cai says:

    To make hyperlinks without the default the blue and underline attribute, add styles to your a tag style.
    For example: a style=”color:black; font-weight:normal; text-decoration: none;” href=”http://www.website.com” title=”Website”

  19. May 29th, 2012

    Is there any way to get an HTML signature in Apple Mail that has absolute linked images (stored on server) but that doesn’t include the images as attachments?

  20. May 29th, 2012

    Tim Cai says:

    Hi Tom, the answer to your question is yes! The point of doing this is so you may have an absolute linked images by using the a href tag in the html code.

  21. June 5th, 2012

    Christina says:

    We have been using html signatures for a while now in apple mail but now we have an updated logo. I replaced the image on the server with the new image with the same file name and size. However, the old image is still appearing. I can’t get the logo to refresh. Do you know how this can be done?

    Thanks for your post!

  22. June 5th, 2012

    Tim Cai says:

    Christina, Mac mail may have a problem refreshing the link. You should try to save out a new .webarchive file again with the html file in Safari and install your new signature, your image should be updated. Hope this helps!

  23. August 6th, 2012

    Claudia says:

    I have been researching a problem that I have with Mail and couldn’t find any solution: I did everything as advised in this tutorial and it worked. Now the problem: when replying an email the signature with the image and the HTML format disappears. Is there any solution for this?

  24. August 6th, 2012

    Alister says:

    Hi, I cant seem to get the signature to appear after following your instructions. Any advice? Running OSX 10.6.8
    I followed as described but all that happens is the original file is overwritten with a blank signature (or nothing).

    Cheers.

  25. August 6th, 2012

    Tim Cai says:

    Claudia, Try going into Mail>Preferences>Composing and make sure that Rick Text is selected for Message Format. You may also try checking the Use the same message format as the original message. In Mail>Preferences>Viewing, make sure the option Display remote images in HTML messages is checked.

  26. August 7th, 2012

    Tim Cai says:

    Try following this instead, http://mydesignpad.com/create-a-html-signature-in-apple-mail-on-lion-os-x-10-7/. The only difference is locating the Signatures folder since it is hidden in Mac OS X 10.7. Other than that it is the same. Please take note of the following as well: Go into Mail>Preferences>Composing and make sure that Rick Text is selected for Message Format. You may also try checking the Use the same message format as the original message. In Mail>Preferences>Viewing, make sure the option Display remote images in HTML messages is checked.

  27. August 17th, 2012

    You rock! Needed to figure out a way to implement a new sig for my work. Was going around in circles til I came across this article. Thanks for posting. Much MUCH appreciated!

    CG

  28. September 1st, 2012

    Joshua says:

    I have ran into issues using this method that my clients who are on pc’s using outlook generally cannot receive attachments from me. Has anyone else ran into this and found a solution.

    Thanks in advance

  29. September 2nd, 2012

    I have been using MacMail for absolutely years, and I have been implementing HTML email signatures for the last 6 years. However, my recent signature seems to defy all logic and will not show the image (rather just the rectangle with ? in the middle).
    After viewing your tutorial (always good to refresh on skills), I still cannot get this image to appear. The image is on the server – yes. The image source link is absolute – yes. I am using Safari on 10.6.8 with Mail 4.5 – this is really doing my head in. Have you had other people with this problem using these versions? Ta :)

  30. September 2nd, 2012

    Tim Cai says:

    You will only see boxes with question marks in place of your images in the Signature preview window. But if the images are linked up correctly, they should show up fine when you compose email and at the recipient’s mail box. Check Mail/Preferences/Composing and ensure Rich Text is selected for massage format. And then in Mail/Preferences/Viewing, make sure Display remote images in HTML messages is checked.

  31. October 10th, 2012

    Robert Mac says:

    I appreciate all the work you’ve put into this, but the signature I’m creating only shows the html, but no images. What am I doing wrong? I’m using your signature as a template.

  32. October 10th, 2012

    Tim Cai says:

    Dear Robert, you may have missed a step or 2 of the tutorial or your mail settings aren’t set up to display remote images. You may email me with more details and I’ll see if I can help.

  33. October 29th, 2012

    Harry says:

    Hi Robert, I would like to use a banner image that changes regularly without having to recreate the whole code again. I want to simply exchange the image on my server to change the image in my banner.

    At the moment the banner I use is “locked” to the image I used when saving the page in Safari. but I would like to keep a dynamic link. Is that possible in Mail 4.5???

  34. December 11th, 2012

    Annette says:

    Hi – help! :-) In fact, i´m trying to get my html signature into mail for weeks, but it doen´t work… i´m with OS X and I tried your tutorial and many others, too. So the way to do is all the same, but my problem is that when i overwrite the signature in finder, i can´t see the signature in mail. I recognised, that the existing signature file is a document, not a webarchive file. It is possible to get Mail to save the signature as a webarchive? Or do you have any other ideas? thanks a lot! Cheers

  35. December 11th, 2012

    Tim Cai says:

    Annette, are you using Mac OS X 10.8? If so, go read my tutorial for that. Hope this helps. I now offer to create custom HTML email signatures through my website. Please visit http://mydesignpad.com/htmlsignature/for more info.

  36. January 11th, 2013

    Cem says:

    Thank you!

  37. January 17th, 2013

    Regards for posting “Creating An Attractive HTML Signature in Apple Mail”.
    I really might really be back again for a lot more reading through and
    commenting shortly. With thanks, Stacey

  38. February 21st, 2013

    Seth says:

    Thanks Tim for writing this tutorial up. I couldn’t figure it the part where you said create a new signature then quit mail… etc.

    After a little research I found this site: http://apple.stackexchange.com/questions/52821/how-to-change-customize-mail-signature-in-mountain-lion which fixes the problem (I’m guessing with the newest version of Apple Mail (version 6.2) and Apple OS X (10.8.2) was having a little problem or I just missed something in your tutorial. Either way I got it working… Thanks again, you rock!

  39. May 10th, 2013

    Barry says:

    Thanks!

    Greetings from Brazil

  40. May 14th, 2013

    John says:

    Hi, thanks for a very helpful article! I am trying to use your source as a starting point and I have followed all of the steps. Makes perfect sense, but I see only HTML code in the Signature window. I have Rich Text turned on. I’m a novice so pardon my lack of knowledge, but if I copy and paste the source code of your example into Text Edit, save it as .html, and open it in Safari, I only see code – not the signature.. Am I missing something totally obvious?

  41. May 16th, 2013

    Tim Cai says:

    John, great question. Hope my answer didn’t come to you too late or maybe you have already figured out yourself. Not sure why TextEdit do this but it isn’t straight forward as it should but it is a simple fix. Follow the saving instructions below and you should be able to view your HTML design correctly in Safari instead of seeing the codes.
    Step 1: On TextEdit’s main Nav, go to Format and select “Make Plain Text”
    Step 2: Go to “File” and save file. On the pop up window, manually delete “.txt” from the file name and add “.html”
    Step 3: Make sure you have “Unicode (UTF-8)” selected from the pull-down menu.
    Step 4: Click “Save”

  42. June 23rd, 2013

    Simon says:

    Hi Tim,

    Thanks for a great tutorial. I was only trying to do a simple email signature until I saw this html tutorial.

    My signature looks great, much better than using just the text option. The links look way more professional with no blue default colour or underlines!

    Many thanks,

    Simon

  43. June 26th, 2013

    Paul says:

    Hi Tim,

    Thanks for the tutorial, I tried a few tutorials and your has been the most successful. Only problem I have is, signature shows up in Preferences/Signature (tab) but when I create an new email I get a blue box with a question mark in it. An I saving the image incorrectly?

    Thanks,
    Paul.

  44. June 26th, 2013

    Tim Cai says:

    Paul, have you try sending out a test email? If your image doesn’t show up in the inbox, you have to make sure your image link is written correctly. You have to upload your image to a web server. Hope this make sense. Good luck!

  45. June 26th, 2013

    Paul says:

    I think that’s where I’m a bit lost, should I have the image in a site like Drop Box? Also I’m not sue about image link being written correctly.

    Thanks,
    Paul.

  46. June 27th, 2013

    Paul says:

    Hi Tim, is it Ok if I call you? I’m in Adelaide South Australia, if it is Ok let me know and I will call you at a time that suits you.
    As I’m tying this it it 3.30pm Thursday. Would really appreciate your help on this. Thanks.

    Paul.

  47. July 15th, 2013

    Thank you for such a simple, easy-to-follow tutorial. Best I’ve found! You’re a star.

  48. July 15th, 2013

    Tim Cai says:

    Amanda, you are welcome. Happy to be helpful!

  49. July 15th, 2013

    I’m trying to create my signature using your tutorial but, after overwrite the .webarchive file, my signature appears as blank image. What I’m doing wrong?

  50. July 28th, 2013

    Elaine says:

    Hi Tim

    Thanks for your tutorial. I followed it verbatim. I’m on 10.6.8 and use Mail 4.6. When I compose an email the image shows as a question mark. I sent it to a friend and my own gmail account and it still shows up with the question mark. Any ideas? My image is on the server.

Leave a comment * Required fields.


About

  • "Sure someone else could have created a greater logo redesign for EME Lighting but I was sold on Tim’s diligence & reliability plus I love our new logo! It is fresh, symbolic of who we are while staying in line with our brand intention."

    - Bill Lee
    CEO of EME Lighting
  • "Tim is a trustworthy and effective designer. He redesigned the entire visual identity system for my company & I am extremely pleased with it. As the CEO of a company with over 3000 employees, I would recommend Timmy to anyone looking to have some serious design work done."

    - Tony Ou
    CEO of Senqiu Lighting
  • "Tim effectively designed my website and newsletter. What impressed me the most was his ability to create the images, style and design I was looking for. I highly recommend him if you are looking for someone reliable, flexible and talented."

    - Christine M.
    Owner of Acupuncturebody
  • "Tim has a great personality that makes him a pleasure to work with. He is focused, hard working & always has an attention to details. He has great curiosity and constantly strives to learn & develop himself taking his work to the next level"

    - Slava S.
    Director of Creative Services at STV
  • "Tim conceptualized original ideas & executed the design brilliantly. He always made sure the highest technical & design standards were met. I could always count on him to translate the client vision into reality."

    - Linda G.
    VP Biz Dev. at Real Estate Arts
  • "Tim is a highly talented designer. He has excellent technology skills, amazing dedication & terrific interpersonal abilities."

    - Michael S.
    AD at Real Estate Arts
  • "Timmy is a very talented designer, he is passionate and reliable, his work is always creative & on time. He’s a good person with lots of energy, which makes him a pleasure to work with."

    - Jess L.
    AD at Sudler & Hennessey
  • "Timmy got a great system for helping you figure out what you want, need & putting those ideas down into a tangible product. He has done 3 sites for me already & anyone I have recommended him to has called me back to thank me."

    - Vahram S.
    Owner of Brooklyn Body