Creating complex HTML email signatures in Mail.app for Mac OSX Lion
Update: Mountain Lion users, please see an updated blog post here regarding email signatures.
Apple released it's desktop and server operating system in July 2011 called OSX Lion. With this new release came a new version 5 of the native email client, Mail.app, which was heavily influenced by it's little brother on the iPad.
Apple has never made it easy to include a complex HTML email signature, especially ones that include a remote image, such as your company logo or your big smiley mug shot.
Today, we're going to walk you through how to create a complex HTML email signature in Mail.app for OSX Lion.
First, here's what you'll need:
- A Mac running OSX Lion
- A web hosting provider to house your image (If you don't have one, I highly recommend using Dropbox to host your image for the time being. See my article on how to do that here.)
-
A HTML editor (Coda, Adobe Dreamweaver CS6 for Mac
, TextMate, or whatever you're comfortable with just as long as it's not MS Word as it will add unnecessary markup to your signature file.)
We'll also assume that:
- You have basic HTML know-how
- Capable of uploading an image file to a web server, or a Dropbox account as stated above
Step 1
Decide what sort of information you want to display on your signature. For this demonstration, we'll use first/last name, email, telephone, company name and logo.
Step 2
Create your signature in your HTML editor of choice (or download the one that's available in the download link below and edit it with your plain text HTML editor). If applicable, upload your image to the web server (or Dropbox) taking note of the public path (http://www.yourdomain.com/images/logo.gif) and inserting it into your HTML signature. See my article on how to do that here with Dropbox. For the more advanced users, basic inline CSS is ok to use, as long as it's not used to position items...tables only!
Step 3
Once you have your email signature designed and laid out just as you like, save the file to your Desktop and call it "signature.html"
Step 4
Open Safari, drag your newly created "signature.html" file into the Safari window. You should now see your signature in Safari.
Step 5
With Safari open and your signature visible, click on File in the top menu, and select "Save as…" Make sure that the "Web Archive" is selected in the format menu and save your signature as a .webarchive to your Desktop.
Step 6
Open a Finder window. In the menu bar on the very top of your screen, click "Go". With the "Go" menu displayed, click and hold the "option" key on your keyboard to toggle the visibility of "Library" in the menu. In the past, the Library directory was visible, but in OSX Lion, Apple thought hiding the "Library" was a good way to keep the inexperienced users from causing any chaos to your system. Go ahead and select the "Library" option which will open a new window.
Step 7
Drill down to "Library > Mail > V2 > MailData > Signatures". You should see a file with the extension .webarchive in here. If not, open up Mail.app, create a new blank signature and quit out of Mail.app. What this does is creates a temporary .webarchive file which we will soon replace with our fancy HTML version.
Step 8
Take note of the .webarchive filename. Better yet, copy the name of the file. In my case, the .webarchive was named "89F114E2-C22D-40B7-B232-83A26A664DD9.webarchive"
Step 9
Find the "signature.webarchive" file that we made earlier on your Desktop. Rename the "signature.webarchive" file the same as the .webarchive file in Step 8 (eg., signature.webarchive is now 89F114E2-C22D-40B7-B232-83A26A664DD9.webarchive on the Desktop)
Step 10
Take the newly renamed filed on your Desktop, and drag it into the "Library > Mail > V2 > MailData > Signatures" folder, replacing the one that is currently there.
Step 11
Now open Mail.app and go into the preferences Mail > Preferences > Signatures. You should see something very similar to this screenshot. Don't worry too much about the broken image that's displayed, it will show up normally when you create a new email message.
Happy emailing!
Download the HTML email signature template here.
Here's what other people had to say
Thanks for trying. At first I couldn’t find the Library file. It’s not under the Go menu as you suggested. I finally got to it through my hard drive icon.
The folder series you list is not there for me. I did find a Mail folder under Application Support/Apple/Mail but after that, I couldn’t find a signature folder anywhere. Also, a search of the Library folder doesn’t turn up any .webarchive files. Weird.
I definitely have a signature already created, and I’m using Lion, and Mail 5.0.
Any ideas?
Hi Bear,
That’s actually the incorrect “Library” folder. There’s actually two “Library” folders in your system, one directory under your hard drive icon (eg. Macintosh HD/Library), and another under your username (eg. /username/Library)
The easiest way to access the correct Library folder is to click on the “Go” menu, and then click and hold the option key on your keyboard. You’ll see the Library folder will become visible in the “Go” menu AFTER you click and hold the option key.
Hope this helps!
Hi,
Thanks for this post and also the one on Outlook 2011. Is there any chance you have advice on how to do a complex html email signature in Entourage 2008? I need to set up all my company’s signatures and I have three Entourage users.
Rhi
Hi Rhianonn,
Unfortunately we don’t have Entourage 2008 laying around anywhere to test on. Have you tried using the same technique as Outlook 2011 for Mac? I remember doing one years ago, but can’t confidently write about it. Please let us know how it works out. I’d be really curious to know how it works. Thanks and good luck!!
Hi,
Thanks for the response. The copy/paste doesn’t seem to work with Entourage as the CSS properties don’t copy across, only the text.
*sigh* it’s like Outlooks retarded little brother, if that is even possible. I’m just going to stick to an image and they can forgo having links!
So I’ve done all of this and the sample in the Signatures looks fine (blue boxes but fine) but in my emails, the signature is only the plain text. No pictures, ignores my CSS. Thoughts?
Hi Dori,
Is your CSS inline? It’s hard to say without seeing an example. Can you post the code?
Actually, I fixed that problem (needed to allow richtext in Mail) but now I have a new one. When I rename the html file with my signature as .webarchive on the desktop, the file becomes empty. I’ve tried everything but as soon as I rename the html the information disappears. Bizarre…what do you think?
That does sound bizarre. I would repair your permissions and reboot. Hopefully that does the trick.
Hi,
It’s verry intersting, but I gad a problem the logo and icons don’t appear like you in your sample.
Thanks
Very Helpful tutorial Brian!
Thank you so much for the clear instructions. I used DreamWeaver and saved as a webarchive file as you suggested. The help with Library menu item using the option key was important to getting it done with Lion version of OSX.
Much appreciated!
Mike
You couldnt be more right on…
Hi,
there is no possibility to load IMGs locally, not hosted images?
A lot of clients mail software blocks external images..
thank you
I followed all the steps and everything looks good - the signature in Mail Preferences looks just like the html. It has text, a photo and a logo image and 3 social media logos - all with links).
But when I go to compose an email with the signature all the text appears but all the images show up as question marks in small blue boxes and all the links do not work. Some sort of broken links to the images but I have no idea why.
Any suggestions?
Thanks!
Hi John,
A number of things could be going on here.
1. Double/triple check if the path to the image is hosted, and if the URL to it is correct. What happens when you paste the URL to the image in your HTML into your browser address bar? Do you see it the image?
2. You may have a syntax error somewhere in your HTML. I would check your HTML here (copy and paste it in, click “Check”) http://validator.w3.org/#validate_by_input
3. Make sure you have “http://” in front of the image path. (ie., http://www.domain.com/your-image.jpg)
Hope this helps!
I just checked all three of those and they all check okay.
John
Recreated the steps 3 times and still no images.
John
Hi John,
It’s a little difficult to troubleshoot without seeing your code. If you can post it (take our personal info if needed), I can take a quick look.
Any time to look this over?
Thank you Brian! you are so helpful!
Thanks that worked superbly!
Great tip!
Super helpful article! Thanks for creating clear instructions. I thought I was going crazy trying to find library.
I have been trying to upload a new custom mail template into Lion and never got anywhere when I tried to put the new templates in place.
Is the Library folder under my username the place to look for the mail application support folder where these templates are supposed to go?
Thanks
Rick
Hey Brian,
Just wanted to say thanks for the tip and template!
WOW!
Thank you sooo much, I’ve struggled to find this answer! This is such a great Tutorial! Please keep it online, to help others!
Thanks again!
Andy
hey, just wanted to thank you.. spent bunch of time on this with another post, but your osx lion specific helped me find and replace file.. Good job, and thanks!
Don’t have an idea of how much difficult was this stuff for me. The tip of how to see the hidden “Library” was unique and I also have to learn a little html code to edit mi signature.
Finally, it’w working perfect.
Thanks a lot Brian.
Luis
Peru
Thank you so much!!!
Hi Brian,
After looking at a few online tutorials for html signatures, I was glad to find yours as it works.
One small problem I’ve encountered is that the hosted image file is apparently saved with the webarchive i.e. the image file is embedded into the webarchive file. I have checked the html in the webarchive file and it is correctly pointing to the server.
Any hints?
thanks and kind regards,
Chris
Hi Chris,
So to clarify, your image is showing up as a broken image? The image should ultimately be hosted at a remote web server and not necessarily “embedded” into the webarchive file.
Many thanks! I followed your instructions closely, using dropbox to host my logo, and I now have a signature block which seems to work well with both Mail 5.2 and Yahoo Mail (and hopefully, therefore Outlook). This, combined with the Universal Mailer plug-in, will allow me to continue using Apple Mail without the appearance of my messages being ‘corrupted’ by other mail apps!
Not being an HTML expert I used your signature block as a template, which was a great help. The HTML text editor I used was Kimono - free and very useable complete with a preview function.
Thanks again,
Chris
Hello There,
Thanks for the tutorial, however it works great between Mail for macs and ipad/iphone, and even MSN. But the graphics don’t appear to be working when the email is sent to a windows computer using outlook, any idea of how to fix this so that it will appear?
Thanks.
Drew,
Outlook has a default setting to not show external images. Unfortunately this is out of our (and your) control. The user getting the email can right click on the image and select “Show image”
Hi Brain
Thank you very much for this great article. It all worked perfectly straight away.
The only problem i still have its that if i send a mail to a user with outlook 2007 or 2010 on a pc, the body text of the message is shown in Times New Roman instead of Helvetica or Arial. I’ve already chosen Arial as my default font for my emails, but still the same result. Is there anyway to tell Apple Mail to make some inline CSS to body-Tag like font-familiy: Helvetica, Arial, sans-serif;?
Thanks in advance.
Rico
Rico,
Unfortunately, this is Outlook’s default behavior. There is a way around it, although it’s a bit troublesome to have to do it every single time you write an email.
Basically you’d have to develop your email in html, open in Safari, and under the File menu, select “Mail contents of this page..”, which will prompt your email client, and you can send from there.
Not really ideal, but you asked for it 
Also, just a FYI, some mail clients strip out the body tag.
Good luck!
Hello Brian,
This article was a huge help. Thank you! My web person, who just designed a custom HTML email signature for me forwarded it. I would never have figured out how to do this on my own. I am encountering a problem, however, which I find very puzzling. I successfully got my HTML web archive into my Mail Signatures, and when I attach it to an email it looks perfect. However, I happened to send myself a test email to a gmail account, and for some reason in gmail my phone number in my HTML signature reverts to the blue normally used for hyperlinks, and it’s underlined. This is not how it appears in my HTML design. I can’t understand since this is a web archive I thought I would avoid display issues. I’m guessing this must be a function of gmail that I can’t control. Any ideas?
Brian,
I forgot to mention in my previous message that my phone # in my HTML signature is
done in the normal way with parentheses around the area code and a hyphen. I don’t want it to display as a hyperlink, however, in blue and underlined, which is what gmail keeps doing to it. I’m wondering if I can trick gmail by writing my phone number with dots the way you have done it in your custom signature. Guess I’ll have to ask my web guy (since I don’t do this myself) to do my phone # like you did yours and try it out. Think it will work?
Hi David,
Thanks for pointing this out! This is the result of the default behavior in Gmail unfortunately. Gmail will look for a phone number in the body of an email and wrap it with an “a href” tag. There is a way to style this, however it hasn’t been thoroughly tested with other email clients.
In this example, the phone number is styled without underline, and have a color of red. Your web guy will know what to do with this and style it appropriately.
<a href="#" style="text-decoration:none;color:#ff0000;cursor: text;">415-555-5555</a>
Thank you Brian. I’ve forwarded your instructions to my web guy. Hopefully, he’ll be able to make this work. It’s really frustrating because I thought by using a custom HTML signature I’d be able to control how my signature displays, regardless of the recipient. It’s never as easy as you think it’s going to be!
Hi Brian,
I found the LIbrary folder but can’t find mail, V2, MailData or signatures folder!
I also tried typing this out but nos folders found.
/Library/mail/v2/maildata/signatures
I’m on 10.7.3 OS version and I’m trying to use Mail.
Thank you in advance!
Alice
Alice,
There’s actually two Library folders on your machine, so make sure it’s the right one. Another way to open your “v2” folder is to open up the Terminal.app found in /Applications/Utilities, and copy and paste this in the terminal window:
open ~/Library/Mail/V2
That should open up the correct folder for you.
Hi Brian,
Thank you very much for your help! It finally worked 
Thanks for sharing. It’s fantastic to create a more professional looking signature than the one I was previously using!
Good article, lays out what you need to do very nicely.
I’ve had to use this hack many times for a while now as we use company signatures with styling and occasionally remote images included.
I hoped that upgrading to Lion would provide some functionality finally to allow direct input of HTML. But oh no. Apple what on earth are you thinking?
In AppleMail 5.2, when I’ve replaced the file with my nice signature file - as has always worked in the past - it shows nicely in the signature window. When I try to create a new email, however, it either ignores half the formatting or all of it.
Very frustrating! Anyone had this experience? (Yes I closed/opened Mail etc)
How do Apple expect real business users to use their OS when such little things as allowing HTML in email signatures is still a major problem?
Took me a few hours but that was due to me thinking I knew what to do next and having to retrace my steps. Advice take it or leave it to those going to follow the above steps;read the instructions!
Thanks I am a new Mac user and this was totally ruining my experience not being able to add a company logo etc… Much appreciated.
TC
I am using OS 10.7.4 Lion mac mail. When I try and save my signature with logo it saves in safari as htm not html. There is no save as html?
Help?
Great instructions for Mac Mail on Lion. Everything worked just as you said. Just wanted to say thanks!
Mel
Thanks!
This worked great!
Everything works great but i can’t get the images to show up in my emails
I get the dreaded blue box with a question mark.
I have hyperlinks within the images and they come through but no image
I saved the signature as a webarchive in my public dropbox folder
I’m on the latest version of Lion and mail…
I am a total HTML neophyte…any thoughts?
This is a great article
Creating that beautiful signature is not easy in HTML. You’ve done awesome job.
Hi Brian,
Thank you very much for your help! It finally worked smile
Thanks for this. Just to help others, I found that the image in Dropbox has to be in the Public folder - not in any other. Mail had to be closed and restarted in order to have the changes take effect. Be sure to not have any spaces in the image file name.
I am having an issue trying to create an HTML signature for my MD.
My MD is running Apple Mail and I have tried to recreate the company email signature as close as possible to those using Outlook. When I save the signature, the company logo does not appear when I sent a test email to another user. How can I get this rectified?
Also, do I have to create the email signature on his computer or can I create it on mine and then just send him the HTML with a couple of instructions on how to upload it?
@Mark,
One of two things is happening regarding your image not showing up. Either the image is not being hosted somewhere on a server, or the link is incorrect. Regarding your second question, yes, you can create it on your machine and send it with instructions. Good luck!
Hi, great article thanks. Wondering if you can help me though. When I look at the signature everything looks great and sends through to myself great. However when I send it to colleagues with outlook the image displays HUGE on their emails. I have added height: 83px; into the <img> tag and testing looks good in safari (and chrome).
When these guys reply to me, it then also looks huge on my email.
Any thoughts?
Ant,
As a general rule, you do not want to resize your images using html or css. I would highly recommend resizing your image in an image editor and resaving your image to the actual size you want it to be. Also be sure that the image is set to 72dpi. If you don’t have an image editor handy, try using many of the online tools like http://rsizr.com
I read your article, and I’m pretty sure I went step by step. The signature with logo’s I’m trying to employ was done by my home office, all of whom are PC based. I am using Lion 10.7.4 with Mail 5.2(1278). I have uploaded the signature to DropBox and it appears beautifully layer out and sized. I then saved what I see on DropBox to my desktop as a .webarchive file. I then followed your instructions. What I end up with is the signature with logo, and it takes up only about 2/3 of the width of my e-mail message. Any ideas?
I just wanted to thank you for this post. I’ve been a mac user in a windows/exchange environment for years. I have always been frustrated with my signature formatting and font become corrupted/exploded/just plain butt ugly when a reply came back to me.
I searched dozens of google searches and sites seeking the solution.
(BTW - putting a phantom “.” in your signature and beginning all text below the “.” in your signature not only looks like you consistently mis-type - but also doesn’t work)
I found your post, downloaded your signature template. Downloaded Seamonkey and whalla! This coming from a non-html editor guy.
Just wanted to let you know it’s appreciated.
Be well
Pretty sure this is an unsolvable problem but who knows, maybe someone knows the answer:
The signature works perfect. I send someone an e-mail, and he replies back. When I open the mail I see my original mail, but the signature image doesn’t show. It just shows the ALT tag, and the shape of the image, but nothing more.
Is this a problem in the sig or is it the problem that there is no proper HTML standard for mails?
Thanks for this tutorial. I wish more people would realize that their email signatures have attachments and that is extremely annoying. It’s so worth taking the 5 minutes to do this so that you don’t inconvenience your recipients.
Thanks. If you have any issues with linking non-secure images then you can change the image served from dropbox to be HTTPS. Just change the beginning of the url to read https instead of http.
Great article - I have done this before but needed a refresher!
Problem however, when I save my .html file as web archive - the image file ends up with http://www.<URL>.png . The  is not a prefix in the HTML (which views perfectly in the web browser) - and only happens in the web archive. What am I doing incorrectly? Many thanks.
My ~Library/Mail/V2/MailData/Signatures folder does not have a WebArchive file in it. I have created a signature in Mail and closed out and still no WebArchive file to replace. They are .mailsignature and .plist files.
In Mountain Lion. Tried all the above, no luck the only consistent item is the web signature and even when that is replaced it still keepsmy original signature, not the new one…
Bruce, thank you for pointing this out. We installed OSX Mountain Lion on a few machines here and have found a solution to the way Mountain Lion handles mail signatures. Please see our new blog post here: http://bcw.im/9
