How To Add An HTML Signature To Gmail

An HTML Signature allows readers to click on individual sections of the signature, taking them directly to the sender’s website, social media pages or blog. This increases the chance of the reader taking action there and then rather than typing the website address into the address bar.  Something many choose to do later – then forget!

A few months ago I was asked to add a signature to an email account for a client.  No problem I thought!  However, they had seen one they liked from another source and wanted something similar.  It should have their logo, company name, contact details etc.  They used Outlook for their email.  I soon discovered each email client had their own way for adding signatures which was not always straightforward.

Adding an Image Signature To Outlook

There was no obvious way to add an html signature to an Outlook email address so my workaround involved producing an image which contained all the information the client needed and then adding the image as the signature.


The result looks pretty good although I say so myself.  Although the whole image links to the client’s website (when in their email) it is not possible to visit their social media pages directly from it.  Readers have to click through to their site and then social media pages if required from there.

This made me start thinking about our own email signature. We use Gmail for our email.  Perhaps it would be easier to add an html signature in Gmail.  Like the cobbler taking his time to get round to fixing his kid’s shoes, I have eventually found the time to look at our signature.

Producing An HTML Signature

It is all very well talking about adding an html signature, but how do you make one in the first place.  Unless you are familiar with html it will be difficult.  There are several html signature generators to be found online but many require you to download software or sign up to an account.  Not everyone wants to do this.  There has to be an easier way.

Hopefully this will help!  I produced the following code for our own Gmail signature.  To be honest I started off by playing with it hence the reason I used free social media icons from  However, if findicons ever remove these images from their site they will disappear from my signature.  Ideally you want the images somewhere permanent, ideally on your own site.

Dilek Taylor
Web Design and SEO Consultant


If you want a similar html signature for yourself, feel free to copy the code below into notepad++, a simply code editor, or the even simpler ‘notepad’ which comes in the windows accessories folder of windows pcs.  Make sure you save the file as html.

[code lang=\"html\"]

Dilek Taylor
Web Design and SEO Consultant


Thanks for reading!