3 Effective Ways to Add Outlook HTML Signatures

Ever wondered how to make your emails stand out? HTML signatures in Microsoft Outlook could be your answer. They’re not just professional; they’re also a powerful marketing tool. Follow this tutorial to learn three simple ways to add an HTML signature to your Outlook emails

I’m using Microsoft Office 365 for this tutorial, 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 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, doing a column or table layout in Outlook’s edit signature box would be difficult. However, unlike vCards, they don’t offer portability.

2 column HTML signature displayed in web browser.
HTML signature with CTA button

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 if 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.

https://www.example.com/?utm_source=email&utm_medium=sig-button&utm_campaign=demo

If you go to many online signature generator tools, you can find business card image galleries where people create beautiful image signatures. Another good source of inspiration is Dribble.

Some HTML Considerations

The disadvantage of using HTML signatures is that you can only use these if your Outlook message format 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 are easily customizable.

  1. Open your browser and navigate to https://aka.ms/AA977mo.
  2. Click the Download button.
  3. A Word document appears with the templates.
Word document in protected mode and email signature gallery.
Note the Protected View banner at the top
  1. Click Enable Editing from the top banner.
  2. Click on your desired signature.
  3. Click the 4-headed arrow in the corner.
Clicked table control to select all signature items.
The email signature items will highlight
  1. Press Ctrl + C.
  2. 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.

Context menu after clicking on sample image.
Context menu for the clicked item

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.

  1. Copy your edited signature from the email message area.
  2. Click the small triangle underneath the Signature button on the toolbar.
  3. From the menu, select Signatures…. The Signatures and Stationery dialog opens.
  4. On the E-mail Signature tab, click the New button.
  5. Enter a descriptive name and click OK.
  6. In the Edit signature area, paste your new signature.
  7. 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 in Outlook. The files they provide may have either a .HTM or .HTML file extension. Sometimes, they use an email signature generator service to make the code.

Before you start, I’d suggest ensuring your HTML template file displays properly in the browser. If it doesn’t show correctly in a browser, it will likely fail in an email. In the example below, I’ve used Google Chrome to open my .htm file.

Outlook HTML signature pulled up in web bowser.

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.

  1. Rename your email signature file if needed. Outlook will use the portion before the .htm as the email signature name.
  2. Test your .htm file in a browser.
  3. From the File menu, select Options.
Outlook's Options sidebar
  1. From the Outlook Options dialog, click Mail.
Outlook Mail options dialog.
  1. On the right side, press CTRL and click the Signatures… button.
Mail options with Signature button.

This will open the apps folder that contains your Microsoft Outlook signatures. Usually, it is the appdata\roaming\microsoft\signatures folder.

  1. Copy your .htm file into this folder.
  2. Make sure your Compose messages in this format: shows as HTML.
  3. Close the folder and return to Outlook Options.
  4. 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 ensure you’ve assigned this to the proper account and if it should apply to new messages, 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 that you can use it for almost any type of HTML file, not just email signatures. And that includes both .htm and .html file extensions. The downside is you must add a command that probably doesn’t appear on your Quick Access toolbar.

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.

  1. Open Microsoft Outlook.
  2. From the File menu, select Options.
  3. On the Outlook Options dialog, select Quick Access Toolbar.
Customize Outlook Quick Access toolbar. panel.
  1. From the Choose commands from: drop-down, select All Commands.
  2. Scroll down the list and select Attach File…
Highlighting Attach File... command to add to Quick Access toolbar.
  1. Click the Add button. Your command will move to the right side.
  2. Click OK.
  3. Click the New email button.
  4. Click the Customize Quick Access Toolbar and check Attach file. You’re just checking that the sub-command is enabled.
Quick Access menu shoing Attach File is not enabled.
  1. Write your new email.
  2. Move your cursor to the end of the email and click the paperclip button on the Quick Access Toolbar.
  3. The Insert File dialog opens. Navigate to the folder with your HTML email signature file.
  4. Choose your Outlook email signature file.
  5. Click the small triangle next to the Insert button.
  6. Select Insert as Text from the drop-down menu.
Insert file dialog with Insert as Text option.

Your new HTML signature will be inserted into the email.

Outlook email with inserted HTML signature.

Key Points & Takeaways

While using an HTML signature is a nice feature, try not to complicate your design unless you love HTML and CSS. For 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.

  • HTML signatures in Outlook can serve as a powerful marketing tool and enhance the professional image of your emails.
  • These signatures offer many benefits, including more styling and layout options that work with your branding.
  • You can include elements like company logos, clickable social media images, and “Call to Action” (CTA) buttons.
  • HTML signatures can only be used if your Outlook message format is HTML. They won’t work with plain text emails or rich text formats.
  • HTML signature templates require you to put your CSS code in the .HTM file, and any images used should be accessible from the internet, not locally stored on your computer.
  • If you’re using your own HTM file, it’s important to ensure it displays properly in the browser before setting it up in Outlook.