How to Create a Professional HTML Email Signature for Your Business

A professional HTML email signature is a small block of code that appears automatically at the bottom of every email you send, displaying your name, title, company, contact details, and optionally your logo or photo. You build it once and paste it into your email client settings — no typing it out again for every message.

This guide walks you through exactly how to build one, what to include, and how to install it in Outlook, Gmail, or any cPanel webmail client.

Why Use HTML for Your Email Signature?

A plain-text signature gets the job done, but an HTML signature lets you:

• Display your company logo at a controlled size.
• Apply your brand colors and typography.
• Include clickable social media icons.
• Add a clickable banner or call-to-action.
• Visually separate sections with color or dividers.

The result is a presentation that's consistent with your wider brand identity — something clients notice, while competitors without a proper signature quietly lose credibility.

Essential Elements of a Business Email Signature

Before writing a single line of code, decide what information to include. Less is more: an overloaded signature loses impact.

Base HTML Code for a Professional Signature

The block below is a clean template that works across most email clients (Outlook, Gmail, Apple Mail). It uses tables instead of div elements because email clients ignore most modern CSS.

<table cellpadding="0" cellspacing="0" border="0"
       style="font-family: Arial, Helvetica, sans-serif;
              font-size: 13px; color: #333333; width: 500px;">
  <tr>
    <!-- Left column: logo -->
    <td style="padding-right: 16px; vertical-align: top; width: 80px;">
      <img src="https://yourdomain.com/img/logo.png"
           alt="XYZ Company Logo"
           width="72" height="72"
           style="display:block; border-radius:4px;" />
    </td>
    <!-- Vertical divider -->
    <td style="border-left: 2px solid #0055A5;
               padding: 0 16px; vertical-align: top;">
      <!-- Name -->
      <p style="margin:0; font-size:15px; font-weight:bold;
                color:#0055A5;">Ana García López</p>
      <!-- Title -->
      <p style="margin:2px 0 8px; font-size:12px;
                color:#666666;">Sales Director · XYZ Company</p>
      <!-- Contact -->
      <p style="margin:0; line-height:1.7;">
        <a href="tel:+525512345678"
           style="color:#333333; text-decoration:none;">
          +52 55 1234 5678</a><br>
        <a href="mailto:[email protected]"
           style="color:#333333; text-decoration:none;">
          [email protected]</a><br>
        <a href="https://www.company.com"
           style="color:#0055A5; text-decoration:none;">
          www.company.com</a>
      </p>
    </td>
  </tr>
  <!-- Optional confidentiality notice -->
  <tr>
    <td colspan="3" style="padding-top:10px;
                           font-size:10px; color:#aaaaaa;">
      This message and its attachments are confidential
      and intended solely for the named recipient.
    </td>
  </tr>
</table>

Replace the name, title, phone number, email, and logo URL with your own details. The color #0055A5 is a generic corporate blue — swap it for your brand's primary color.

Hosting Your Logo Correctly

The logo must live at a public, permanent URL. If you attach the image as an embedded file, many email clients will block it. The cleanest option is to upload it to the /img/ folder on your website or a professional hosting service and reference it with an absolute URL (https://).

Keep the file under 100 KB and use real dimensions rather than scaling purely with HTML. A logo at 72×72 px or 144×72 px is usually ideal.

How to Install the Signature in Major Email Clients

Gmail (Google Workspace or personal account)

1. Open Gmail and go to Settings → See all settings → General.
2. Scroll down to the Signature section and click Create new.
3. In the signature editor, click the source-code icon (<>) if available, or paste the HTML directly.
4. Alternatively, open the code in a browser, select all (Ctrl+A), and paste it into Gmail's visual editor — the HTML formatting transfers correctly.
5. Save changes.

Outlook (desktop)

1. Go to File → Options → Mail → Signatures.
2. Click New, give it a name, and select it.
3. In the editing area, right-click → View Source (or use the embedded HTML editor).
4. Paste your code and click OK.
5. Assign the signature to the correct account using the dropdown menus.

cPanel Webmail / Roundcube

1. Log in to your webmail (mail.yourdomain.com) and open Settings → Identities.
2. Select your identity and enable the HTML signature option.
3. Paste the code into the signature field.
4. Save and send a test email to yourself to confirm the result.

Common HTML Email Signature Mistakes

• Broken images: the logo points to a local or development URL. Always use the final public URL.
• External CSS or <style> blocks stripped: most email clients remove styles in the <head>. Always use inline styles (style="...").
• Tables missing border="0": Outlook can add unwanted borders. Declare border="0" explicitly.
• Signature too wide: cap the width at 500–600 px so it renders well on mobile.
• Too much information: more than 6–8 lines of text reduces impact; recipients stop reading.

For a deeper dive into setting up business email with your own domain — where your new signature will shine — browse the business email resource hub on this site.

Key Takeaways

• HTML email signatures rely on tables and inline styles for maximum client compatibility.
• Host your logo at a public, permanent URL — never embed it as an attachment.
• Include only essential details: name, title, phone, email, and website.
• Installation steps differ by client (Gmail, Outlook, Roundcube) but all support HTML.
• A consistent signature reinforces brand identity in every email you send.

Ready to pair your new signature with a professional email address on your own domain? elenlace.com offers hosting plans with business email included, ready to set up in minutes.

FAQ

Can I use Google Fonts in my HTML email signature?

Not reliably. Most email clients do not load external fonts. Always stick to web-safe fonts: Arial, Helvetica, Georgia, or Times New Roman.

Why does my logo appear as an attachment in Outlook?

This happens when the image is embedded with a cid: reference rather than an external URL. Upload the logo to your server and reference it with a full https:// URL.

Can I add animated GIFs to my email signature?

Technically yes, but it's not recommended. Animated GIFs can trigger spam filters, increase email size, and render as static images in Outlook. Keep your signature clean and static.

How often should I update my email signature?

Update it whenever you change your title, phone number, or website URL, and whenever you run a time-limited campaign with a banner. Review at least every six months to make sure all links still work.

Useful resources

Other providers and guides worth comparing:

• HubSpot
• IONOS
• GoDaddy