Email signatures can be a great marketing tool. However, I often run into people and business owners who struggle to get their HTML versions into Microsoft Outlook. The good news is the process has gotten easier. In this tutorial, I’ll show you how to add an HTML signature to Outlook using three methods.
For this tutorial, I’m using Microsoft Office 365, but the procedures are very similar for Outlook 2016 and Outlook 2019. However, they will not work for Outlook.com signatures.
The problem usually arises because people try to paste the HTML code that a developer or generator provides in the wrong place, such as the message window or Outlook’s Edit Signature box. Even though this is a rich text editor, it doesn’t provide a code button on the toolbar.
Why Use an HTML Signature
HTML signature blocks offer many benefits. You can do more styling and layout options that work with your business branding. For example, it would be difficult to do a column or table layout in Outlook’s edit signature box. However, unlike vCards, they don’t offer portability.
In this instance, I have a 2 column layout with a company logo, clickable social media images, and a “Call to Action” (CTA) button to book a demo.
If you use any CTA buttons, you might want to add some parameters to know the booking lead came from the email signature. For example, you can do that in the HTML by adding the URL campaign parameters to the button.
If you go to many online signature generator tools, you can find business card image galleries where people created beautiful image signatures. Another good source of inspiration is Dribble.
Some HTML Considerations
The disadvantage of using HTML signatures is you can only use these if your Outlook message format type is HTML. It won’t work if you send plain text emails or rich text formats. In fact, you won’t even see the signature listed in the drop-down list. Outlook omits it.
Another issue is that these HTML signature templates require you to put your CSS code in the .HTM file. Often designers use tables and cells so that the code can get pretty elaborate.
And you’ll want to verify any image such as a logo or social media icon is accessible from the internet and not locally stored on your computer.
Adding the Outlook HTML Signature – 3 Ways
There are 3 ways you can add your signature file. The first two ways are best if you plan to use it regularly, such as automatically adding the email signature to all new emails. With this method, it will show in your Signature drop-down list.
The second method is more complex because it requires you to build an HTM file that you will use in Outlook. You should have some understanding of HTML. Generally, these are files your employer may give you.
And the final method is if you wish to drop in an HTML file. These are typically files from an email signature generator service.
Method 1 – Use a Microsoft Signature Template
I have to give credit to Microsoft for offering email signature templates. The template is a Microsoft Word document that contains 20 pre-made samples. These templates are a great starting point and easily customizable.
- Open your browser and navigate to https://aka.ms/AA977mo.
- Click the Download button.
- A Word document appears with the templates.
- Click Enable Editing from the top banner.
- Click on your desired signature.
- Click the 4 headed arrow in the corner.
- Press Ctrl + C.
- Open a new Outlook email and press Ctrl + V to paste the template.
Editing the Email Signature Template
Now that you have the signature pasted into the message section of your email, you can customize it. Each element can be changed. The easiest way is to right-click an element and choose the appropriate menu option.
For example, I can right-click the profile image and change the picture. The same editing abilities apply to the other items. Additionally, I could change text font, colors, links, etc.
Once you’ve finished editing the signature, you’ll want to add it to Signatures and Stationery.
- Copy your edited signature from the email message area.
- Click the small triangle underneath the Signature button on the toolbar.
- From the menu, select Signatures…. The Signatures and Stationery dialog opens.
- On the E-mail Signature tab, click the New button.
- Enter a descriptive name and click OK.
- In the Edit signature area, paste your new signature.
- Click OK.
Method 2 – Use Your Own HTM File
Many companies have a standard signature that they use and have created the files for you. The only thing you need to do is to set it up into Outlook. The files they provide may have either a .HTM or .HTML file extension. Sometimes, they have used an email signature generator service that makes the code.
Before you start, I’d suggest making sure your HTML template file displays properly in the browser. If it doesn’t show correctly in a browser, it will most likely fail in an email. In the example below, I’ve used Google Chrome to open my .htm file.
You may have noticed that I referenced a .HTM file and not .HTML file extension. It seems odd since we call them HTML signatures, but Microsoft Outlook will only render the .HTM file. If you load a .HTML file, you’ll never see the HTML email signature. Your web browser doesn’t care and will display either file.
- Rename your email signature file if needed. Outlook will use the portion before the .htm as the email signature name.
- Test your .htm file in a browser.
- From the File menu, select Options.
- From the Outlook Options dialog, click Mail.
- On the right side, press CTRL and click the Signatures… button.
This will open the apps folder that contains your Microsoft Outlook signatures. Usually, it is the appdata\roaming\microsoft\signatures folder.
- Copy your .htm file into this folder.
- Make sure your Compose messages in this format: shows as HTML.
- Close the folder and return to Outlook Options.
- Click OK.
Your newly added HTML email signature should show in your Signature drop-down list. You should go to Outlook’s Signatures and Stationery dialog and make sure you’ve assigned this to the proper account and if it should apply to new messages as well as replies and forwards.
Method 3 – Insert an HTML File in an Email
Another approach some people take is to insert their HTML file directly into the email. This would be good for one-off scenarios. I wouldn’t want to do this process all the time because it requires more steps. The first process can automatically add them.
This method’s benefit is you can use it for almost any type of HTML file and not just email signatures. And that includes both .htm and .html file extensions. The downside is you have to add in a command that probably doesn’t show on your Quick Access bar.
The command is related to Attach File. Now, that command does exist on the Insert menu when you’re in Email. However, it doesn’t display some sub-commands. In particular, Insert as text.
- Open Microsoft Outlook.
- From the File menu, select Options.
- On the Outlook Options dialog, select Quick Access Toolbar.
- From the Choose commands from: drop-down, select All Commands.
- Scroll down the list and select Attach File…
- Click the Add button. Your command will move to the right side.
- Click OK.
- Click the New email button.
- Click the Customize Quick Access Toolbar and check Attach file. You’re just checking that the sub-command is enabled.
- Write your new email.
- Move your cursor to the end of the email and click the paperclip button on the Quick Access Toolbar.
- The Insert File dialog opens. Navigate to the folder with your HTML email signature file.
- Choose your Outlook email signature file.
- Click the small triangle next to the Insert button.
- Select Insert as Text from the drop-down menu.
Your new HTML signature will be inserted into the email.
While using an HTML signature is a nice feature, try not to complicate things with your design unless you love HTML and CSS. To give an example, while the signature I created above may look great as 2 columns with images, it doesn’t work well for people viewing on a mobile phone. You always want to test these items before putting them into production. I’ve seen some HTML signatures with big images that should be reduced for mobile devices.