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 21st, 2011
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?
August 21st, 2011
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.
October 11th, 2011
@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!
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?
December 8th, 2011
Replying to text only email sig will bust. Better to keep single column, design can look just as good.
December 17th, 2011
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?
December 19th, 2011
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).
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.
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.
January 17th, 2012
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
January 20th, 2012
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.
February 2nd, 2012
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
February 4th, 2012
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.
February 4th, 2012
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.
February 11th, 2012
For OSX Lion:
Open the folder ~/Library/Mail/V2/MailData/Signatures/
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!
May 7th, 2012
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.
May 10th, 2012
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”
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?
May 29th, 2012
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.
June 5th, 2012
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!
June 5th, 2012
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!
August 6th, 2012
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?
August 6th, 2012
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.
August 6th, 2012
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.
August 7th, 2012
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.
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
September 1st, 2012
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
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 :)
September 2nd, 2012
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.
October 10th, 2012
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.
October 10th, 2012
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.
October 29th, 2012
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???
December 11th, 2012
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
December 11th, 2012
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.
January 11th, 2013
Thank you!
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
February 21st, 2013
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!
May 10th, 2013
Thanks!
Greetings from Brazil
May 14th, 2013
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?
May 16th, 2013
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”
June 23rd, 2013
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
June 26th, 2013
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.
June 26th, 2013
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!
June 26th, 2013
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.
June 27th, 2013
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.
July 15th, 2013
Thank you for such a simple, easy-to-follow tutorial. Best I’ve found! You’re a star.
July 15th, 2013
Amanda, you are welcome. Happy to be helpful!
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?
July 28th, 2013
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.