Google Ads
Google Ads

How to create an HTML signature in

How to create an HTML signature in

I recently scoured the web looking for advice on how to create a html signature to use within Mail as I had just switched from using entourage. I struggled to find any decent tutorials so I decided to make my own. This tutorial will be aimed more at the novice user.

My current signature reads as follows and serves my purposes perfectly :


So to break the signature down, it consists of a small image 65×65 pixels, my name, a small bio line which is also a hyperlink to my website. The second and third lines consist of links to the various social networking sites I use.

I have made the above html code available to download from my DropBox account although I have removed all of my personal links except for the picture and it currently looks like :-


3The first step is to reduce and store-online the image you will use, be this be a photo or an avatar of yourself. Now I use Skitch as it will do both functions with very little fuss.

Open Skitch and either drag the image you wish to use onto the dock icon or into the window itself.

You will then have the skitch window as on the left.

To resize the image you use the grab handle in the bottom right hand corner (This would normally resize the window but in skitch in will resize the image) and reduce the image to 65 x 65 pixels


After reducing the image to 65 x 65 pixels you will need to upload to the skitch website (this will require an account) click on the webpost button and the image will automatically upload.

Once uploading has completed the webpost button will change to read “SHARE”. Click on the Share button and you will be re-directed to the image stored within your space on the skitch website.

When you have been directed to the skitch website the page will look similar to the following, you have various options on the right giving you various urls for directing websites to the image.


The one we will be interested is “image only’ Press COPY and the url will be copied to your clipboard ready to paste into your html code.Now for the HTML Code, don’t worry if you are not an expert in this field, you wont need to be.

You will need to open the HTML file that I provided the link to earlier in a HTML editor, I currently use TextWrangler. You should see the following :-

6As you can see I have broken the code into sections for each link.

The first thing you will need to change is the link to where your image is located, you can see the http address as highlighted, you simply need to paste the code that you copied earlier instead of the code for my image.

Secondly edit the text that currently reads as “YOUR NAME HERE”

Thirdly you can edit the text “BIO LINE”

Finally for this section, you need to add your website address, you will find this between your name and bio line, again I have left my website address for reference, just change this to read yours.

Now for the social networking links, I have 6 currently within my signature, but there is no limit, however I would restrict this to 2 lines and remember that some viewers may not have as wide a screen as you, as when the signature wraps it will lose it’s appeal.

the code reads as follows :-


The 2 items to edit for each link are the website address e.g. from to and the text as highlighted in Red.


You can add as many links or even remove some, but please be aware that I have broken them down into 2 lines of 3, after the 3rd link (which is in my signature there is a command which starts a new line, just remember you will need this at a suitable point.

Also between the 1st & 2nd and between the 2nd & 4th links there is a simple dash to act as a separator. You can save the file when you have finished and open in safari to test.

If you are happy with the look of your signature, whilst you have it open in Safari you need to got to File | Save As

Ensure that the format is selcted as WebArchive, the file extension also needs to read .webarchive, however if you forget to change safari will warn you and give you the option to change it for you.


Click on use .webarchive if needed, this will then save the document to your preferred location in the correct format. Again I would navigate to the file and double click on it, the file should open in Safari, just check finally that you are happy with the look and feel of your signature.

The final part which is also the hardest part is to actually get your signature into mail. Firstly open the mail app, Open the preferences and go to Signatures :-

You should see the following window:


Click on the + button to add a signature to mail, just let it default the signature as we will be removing it. You should then have something like :-


Close down the preferences and the mail app.

Open the finder and navigate to your user area/library/mail/mail signatures

There may be more than the 2 files as shown above but there should only be one file with the extension .webarchive we need to move the file out of this folder and replace with your .webarchive file that you created.

When you have swapped the two files over, locate
where you stored the original file and copy the file name which is a string of numbers and letters and paste into the file name of the file you put into the mail signatures folder.


You should now be able to open mail and your signature will show in the preferences section, drag the signature into each account you wish to use it for. For each mail account select which signature you wish to use, and never select “always match my default message font” as this will rewrite your signature, losing some of the formatting.

About the Author :

Stewart J Buchanan is a  Husband, Father, Sports Fan, Apple Hardware Enthusiast and can be found on :  Twitter – Facebook – YouTube – AudioBoo – Raptr

Be Sociable, Share!

    Related Articles

    • Get Best Mac Photo Apps for FreeGet Best Mac Photo Apps for Free
      Taking pics sure is fun, but there is more fun in editing and controlling them. Let us discuss some good ways to play with your pics without waiti...
    • Creating a GravatarCreating a Gravatar
      If you visit a number of blogs regularly and ever comment on posts you will know that some users have images appearing beside their comments. These...
    • Reeder : iPad RSS Reader HeavenReeder : iPad RSS Reader Heaven
      Well it is finally here, Reeder for iPad hits the iTunes Apps store and it was worth the wait. For the last year Reeder for the iPhone (read our re...
    • Adobe adds Easy Watermarking to Lightroom 3Adobe adds Easy Watermarking to Lightroom 3
      Previously we demonstrated how easy it is to add watermarks to your photos using the Mogrify plugin for Lightroom 2. With the release of Lightroom ...
    • Doodley for iOS App ReviewDoodley for iOS App Review
      Artistic talent is one of those infuriating things that comes annoyingly naturally to some people, who can rush out a sketch that looks more lifeli...
    • Easy Watermarking in LightroomEasy Watermarking in Lightroom
      Love them or hate them digital watermarks are commonplace on photos shared over the internet. From large copyright symbols that nearly obscure the ...
    Back to
    News and Articles

    No comments

    Leave a Reply