HTML Email Signature: How to Create One and Add It in Gmail and Outlook

An email signature is the block of details at the bottom of every message you send: your name, your role, your company and a way to reach you. An HTML signature adds a logo, colours, clickable links and neat layout. Many people search for a signature generator, and many more fight with signatures that look fine on their own screen and fall apart on someone else's. This guide explains how to create an HTML email signature, gives a simple table-based template with code, shows how to add it in Gmail, Outlook and Apple Mail, and covers images, mobile devices, links, accessibility and what a company should standardise.

What should an email signature contain?

• Your full name and your job title.
• Your company name and, if it helps, a short line about what you do.
• One phone number, if people actually call you.
• Your website, as a clickable link.
• A logo, kept small.
• Optional extras: a booking link, one or two social links, your pronouns if you wish to share them and a company registration line if the law of your country requires it for business email.

Each additional item makes the signature heavier and drags attention from the message above it. Four to six lines are enough. If you add legal notices or confidentiality wording, check with your adviser what your jurisdiction and industry actually require, since long boilerplate seldom has legal weight.

A simple HTML email signature template

This template uses a table for layout and inline styles for all formatting, which is the approach most mail apps render consistently. Replace the placeholders with your own details and host the logo image on your own web server.

<table cellpadding="0" cellspacing="0" border="0"
       style="font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#222222;">
  <tr>
    <td style="padding-right:16px;vertical-align:top;">
      <img src="https://www.example.com/images/logo.png" width="80" height="80"
           alt="Example Company" style="display:block;border:0;">
    </td>
    <td style="vertical-align:top;border-left:2px solid #0b5fff;padding-left:16px;">
      <strong style="font-size:16px;">Jane Smith</strong><br>
      Customer Success Manager, Example Company<br>
      <a href="tel:+10000000000" style="color:#222222;text-decoration:none;">+1 000 000 0000</a><br>
      <a href="https://www.example.com" style="color:#0b5fff;">www.example.com</a>
    </td>
  </tr>
</table>

The logo has fixed width and height so the layout holds when images are blocked, and the alt text names the company. The blue rule is a left border and not an image, so it will show even without images.

How to add an HTML signature in Gmail

Gmail's signature box accepts formatted text and images but does not take raw HTML code directly. There are two common routes.

1. Open Gmail settings and choose to see all settings. Under General, find the Signature section and create a new one.
2. Build it in the box using the formatting toolbar: bold the name, add links with the link tool and insert the logo by its web address, using the image button.
3. Or paste a finished signature. Open your template in a browser, select everything and copy it, then paste into the signature box. Formatting usually carries over.
4. Choose whether the signature appears on new messages and replies, and save the changes.

How to add an HTML signature in Outlook

1. Open Outlook's signature settings, found under mail or compose options, depending on the version.
2. Create a new signature and name it.
3. Paste the formatted signature into the editor, or build it with the toolbar. Some versions of desktop Outlook allow you to insert an HTML file.
4. Set it as the default for new messages and replies, and save.

Desktop Outlook has its own quirks in rendering tables and images, so test there in particular. If you use Microsoft 365 for a whole company, an administrator can apply a standard signature centrally. Check Microsoft's current documentation for how.

How to add an HTML signature in Apple Mail

Open the Mail settings, go to Signatures, create a new one and paste the formatted version. Apple Mail can also accept signatures that contain images and links. Keep in mind that a signature may need a setting to prevent Mail from formatting it differently in plain-text replies.

Images in signatures

• Host the image on a web server and link to it, rather than embedding it in each message. Embedded images appear as attachments in some apps, and they make every message larger.
• Use a small file. A logo around a hundred pixels wide is plenty. Save it at twice the display size for sharp screens.
• Set width, height and alt text.
• Expect images to be blocked by some readers. The signature should still be readable without the logo.
• Avoid one image that contains the whole signature. The text cannot be selected, screen readers cannot read it, links do not work and the message is more likely to be treated as spam.
• Keep the host available. If the image address changes or the server goes offline, old messages show a broken image.

Making signatures work on phones

• Keep the signature narrow, preferably under about 400 pixels, so that it does not force sideways scrolling.
• Use text size of at least 13 or 14 pixels.
• Leave enough space around links and phone numbers for a thumb.
• Test on both an iPhone and an Android phone. Phone apps may add their own default signature, such as "Sent from my phone", and you should replace it.

Accessibility and plain text

Use real text for names and contact details so screen readers and search tools can read them. Check that colour contrast is good. Add alt text to images. Many apps send a plain-text version of each message, and in plain text a signature loses its layout, so keep the text version readable: put the name, title and website on separate lines. For the HTML and plain-text relationship, see HTML email templates.

Company-wide signatures

If you manage signatures for a team, a few rules save headaches.

1. Use one template with fields for the name, title, phone and department, so that every employee looks the same.
2. Control the logo and the colours from a brand guide, and host the logo in a stable place.
3. Deploy centrally if your mail platform allows, since asking everyone to paste their own leads to errors.
4. Review once or twice a year, and whenever the company name, address or branding changes.
5. Limit promotional banners. A banner in every message can be useful for an event, but it adds weight and can make ordinary business mail look like marketing to filters.

Signatures, deliverability and security

A signature is part of the message body, so its links and images count when filters judge your email. Link to your own domain, avoid shortened links and keep the image count low. A signature does not make a message authentic: authentication does that, through SPF, DKIM and DMARC. If your messages are sent from your company domain by several systems, make sure each is authenticated; see authenticating your sending domain. Criminals copy signatures to impersonate staff, so avoid putting more personal information in a signature than a stranger needs.

For newsletters and campaigns, the closing block is a footer and not a signature; see email footer examples.

Troubleshooting

References and further reading

• RFC 5322: Internet Message Format
• RFC 7489: DMARC
• RFC 2045: MIME Part One