Create an HTML email signature for Mac Mail

Recently, I tried to create an HTML email footer and attach it to a Mail account for the the Apple Mac (OS X). It isn’t as simple as linking to an HTML file like in my much preferred mail client Thunderbird. So how do you do it?

Step 1

The first step is to create your HTML footer. Below is the HTML used to create my signature at Save9.

<br />
<span style="font-family: Verdana, Arial, Sans-Serif; font-size: 10pt; color: #000000;  margin-top: 0pt;">Regards<br /><br />
Simon Willans</span><br /><br style="line-height: 9pt;"/>
<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td width="167px" align="left" valign="top" style="padding: 8px 13px 8px 0; border-top: 1px solid #c0c0c0;">
			<a href="http://www.save9.com" title="visit Save9.com"  style="color: #339999; text-decoration: none;"><img moz-do-not-send="false" width="167" height="54" src="http://www.save9.com/images/save9_sigicon.jpg" alt="Save9 Limited" style=" padding: 0; border: 0;" /></a>
		</td>
		<td  width="100%" align="left" valign="top" style="padding: 8px 0 8px 0; font-family: Verdana, Arial, Sans-Serif; font-size: 9pt; color: #777777; border-top: 1px solid #c0c0c0; ">
			<span style="color: #666666;"><strong style="color: #a1c01e;">Simon Willans</strong>, Web Designer</span>
			<table>
				<tr>
					<td><img moz-do-not-send="false" src="http://www.save9.com/images/email_16.png" width="16" height="16" /></td>
					<td nowrap><span style="color: #666666;font-size: 9pt;font-family: Verdana, Arial, Sans-Serif;white-space: nowrap;"><a href="mailto:simon.willans@save9.com" style="color: #666666;text-decoration: underline;">simon.willans@save9.com</a></span></td>
					<td>&nbsp;</td>
					<td><img moz-do-not-send="false" src="http://www.save9.com/images/web.png" width="16" height="16" /></td>
					<td nowrap><span style="color: #666666;font-size: 9pt;font-family: Verdana, Arial, Sans-Serif;white-space: nowrap;"><a href="http://www.save9.com" style="color: #666666;text-decoration: underline;">www.save9.com</a></span></td>
					<td>&nbsp;</td>
					<td><img moz-do-not-send="false" src="http://www.save9.com/images/twitter_16.png" width="16" height="16" /></td>
					<td nowrap><span style="color: #666666;font-size: 9pt;font-family: Verdana, Arial, Sans-Serif;white-space: nowrap;"><a href="http://twitter.com/save9" style="color: #666666;text-decoration: underline;">@save9</a></span></td>
					<td>&nbsp;</td>
					<td><img moz-do-not-send="false" src="http://www.save9.com/images/linkedin_16.png" width="16" height="16" /></td>
					<td nowrap><span style="color: #666666;font-size: 9pt;font-family: Verdana, Arial, Sans-Serif;white-space: nowrap;"><a href="http://www.linkedin.com/in/willans" style="color: #666666;text-decoration: underline;">linkedin.com/in/willans</a></span></td>
				</tr>
			</table>
			<span style="color: #666666;">Telephone: 0845 0299999 or 01723 384555 | Fax: 01723 384556
			<br /><br />
			<span style="color: #c0c0c0; margin-top: -12px;"><strong>Save9 Limited</strong>, Woodend Centre, The Crescent, Scarborough, North Yorkshire. YO11&nbsp;2PW. United&nbsp;Kingdom.</a>
			<br />Company Registration No. 4351548 | Registered in England and Wales | VAT Registration No. GB 789 4011 03</span>
			<br /><br />
			<span style="color: #c0c0c0;font-weight: bold;">Web Design &amp; Development &nbsp;|&nbsp; IT Products &amp; Support &nbsp;|&nbsp; Cloud Computing &nbsp;|&nbsp; Telecoms</span>
		</td>
	</tr>
</table>

You can ignore the formatting, this is just to give you an idea. Save this is as an HTML file (extension .html or .htm will do just fine).

Step 2

Open the Mac Mail application. Then go to the ‘Mail’ menu, and select ‘Preferences’ (cmd + ,).

Preferences menu

In the preferences windows, select the ‘Signature’ tab.

Signature tab

Create a new signature. It should probably look like the one below:

New signature

Finally, quit Mail – this is important.

Step 3

  • Open up your HTML file (the one you created in step 1) in Safari (do not do this in a text editor, it will not work).
  • Go to the File menu and select ‘Save as’ (cmd + shift + s).
  • In the window that pops up go to your home folder (your username usually) > Library > Mail > Signatures.
  • Overwrite this file.

Signature location

Note: If several signatures already exist, it will be the newest file created.

Step 4

  • Open up Mail again
  • Select Preferences from the menu
  • Select the Signature tab
  • Your new HTML email signature should now have replaced the old one.

Successful signature