Html Email Signatures

HTML Email Signatures

How to create your own HTML Email Signatures and install them into Outlook.

I am a strong believer in not having to reinvent the wheel.
But I do like to customise and “control” what I use.

So this blog article is designed to help you do the same and it is assumed that you are familiar with HTML code and inline CSS commands and that you have already configured your emails to work with your local Outlook client on your pc.

Step 1: Use a Email Signature Online Generator

So my approach is start out by searching for an online free code generator that provides a signature presented as close to the end style as you desire.

One of my favourite tools for creating email html signatures, is that supplied by Hubspot.

You can find it here:

To get this first stage completed, it simply a process of following each of the steps in turn until you end up with a signature you are happy with.

That’s when I like to tweak and play with the HTML code, to make it work how I want.

Step 2: Customise the Signature by Editing the HTML code

You will need to use a HTML code editor, one of my favourite’s is an online free tool called Code Beautify. They provide a range of coding languages’ editors online.

You can find the HTML editor here:

Step 3: Tidy up the Code

Now, this is a bit of a tedious task, but stick with me, there is a reason why I am going to ask you to do this. Yes, it’s good to practise to outline indent the code to be more human readable and friendly, but the real win comes when you need to use the code again in the future.

One of the reasons I am writing this article is because I had spent ages around 2 years ago designing a lovely HTML email signature.

To cut a long story short, I found myself unexpectedly having to rebuild my PC due to a corrupted Windows update. Now I was lucky that I store all my files in the cloud. But as a small one-person business owner, I used the local outlook installation that comes with Windows and configure my email accounts to function with it. Now unlike a “business” who would be running Microsoft exchange, it means that such things as Email Signatures are stored locally on your machine.

That’s why, when I rebuilt my pc, I was kicking myself, I had no copies of my email signature.

I did think about this for a while and realised that some of my past sent emails, contained the said signature, and so I was able to retrieve it, but having done so, I decided that actually I wanted to pimp it up even more.

So it’s worth following my advice and tidy up the code now, because when you are done, you will be able to save the HTML raw file on your cloud in a business operations/admin folder for your business and if you ever find yourself needing to quickly reapply all your email signatures your 90% the way to recovery already.

Step 4: Make a copy of the images in use in your HTML Email Signature.

Depending on what email HTML code generator you are using the changes are you will have images built within it. Images such as your business logo, perhaps your profile photo, or icon images for your contact information and social media sites.

Now you might be content with right clicking on each of the images and choosing “save image” but you can go one step further, and change the icon images to something more appropriate.

In this example I will say I do not like the icon image used as a website link. (Looks like a broken chain). Instead I wanted to use a different one, so I visited Icon Monstr’s website and picked out icons that I though suited my branding better.

You can visit Icon Monstr here:

Step 5: Save Images on your Own Hosting.

Now based on the above step and scenario, it’s worth saving and storing these images on your server. They will generally need to live inside a secure hosting account (https).

I normally just create a folder inside my the main directory for my website hosting and put the images directly in it via Filezilla FTP.

You can get a copy of Filezilla PC Client here:

If you are a WordPress website owner, they you will be able to use it’s media library to upload the images and grab a copy of the images URL path.

Step 6: Replace the HTML URL path to your Images

Now you need to work carefully and slowly, but for each image your signature includes, you need to swap the image file used to your own hosted version. It’s simply a task of copying and pasting the new paths.

Step 7: Additional Social Media Icons

Now the signature I chose only permitted space for 4 social media icons, I wanted 7.

I also wanted to include an email disclaimer message, so I also adjusted the html code, to include one extra row within the html table, at the very end and styled the disclaimer message to live within this location as well.

Step 8: Install into Outlook

When you are happy, make sure you click on run, to generate a preview of how your signature will present itself and from within the preview screen simply select all the content you can see and copy everything (ctrl + c).

Open Outlook, click new message.

Along the top of the screen, you will see the ‘signatures’ drop down menu.
You will need to click on “new” to create a new signature and then in the main body of the window, paste (ctrl + v) the signature you designed.
Be sure to save and test your ne signature.

Step 9: Save your HTML code – for future use

If you can return to your HTML code editor, you can copy all the code. Open notepad. Paste the code into the empty window.
Then save the file, make sure you include .html as the file extension and then put a copy of the file on your cloud storage.
Job done for future recall and use if ever it’s needed.

Leave a Reply