Creating an HTML Email Signature for Business with Logo and Social Links

Your email signature is the last thing a recipient remembers when they finish reading your message. When crafted professionally with your company logo, contact details, and social media links, it leaves a lasting impression and reinforces your brand identity. HTML email signatures give you complete control over the design, styling, and layout in a way that plain text signatures simply cannot match.

This guide walks you through creating a professional HTML email signature with a logo, social icons, and best practices for compatibility across different email clients like Outlook, Gmail, and Apple Mail.

What is an HTML Email Signature?

An HTML email signature is a signature created using HTML and CSS code that renders as a styled, formatted block at the end of your emails. Unlike plain text signatures that appear as simple text, HTML signatures can include:

• Company logo or brand image
• Full name, job title, and office location
• Contact information: phone, email, address
• Website or company URL link
• Social media icons linked to your profiles
• Custom colors and layout matching your brand
• Horizontal divider lines or background colors

Why Use an HTML Email Signature?

Plain text signatures have limitations: no styling, logos appear as attachments, and you cannot create complex layouts. HTML email signatures solve all these problems by giving you full control over colors, fonts, images, spacing, and positioning of every element.

Beyond aesthetics, HTML email signatures provide real marketing benefits:

• Direct Social Links: Recipients can click directly to your Facebook, LinkedIn, or Instagram profile
• Website Traffic: Include a link to your website, contact page, or promotional offer
• Brand Reinforcement: Every email sent displays your logo and brand colors
• Professional Credibility: A polished signature signals that your business is organized and trustworthy

HTML Email Signature Structure

A typical HTML email signature has four main sections. Let's break down each one and see what HTML code is needed.

1. Logo and Personal Information Section

<table style="width:100%; max-width:300px; margin:0; padding:0; border-collapse:collapse">
  <tr>
    <td style="padding:0; margin:0">
      <img src="https://example.com/logo.png" width="80" height="80" alt="Company Logo" style="display:block; border-radius:50%">
    </td>
    <td style="padding:0 16px; margin:0">
      <div style="font-size:16px; font-weight:bold; color:#0f172a; margin:0">Your Name</div>
      <div style="font-size:12px; color:#64748b; margin:8px 0 0">Your Position</div>
      <div style="font-size:12px; color:#64748b">Company Name</div>
    </td>
  </tr>
</table>

2. Contact Information Section

<div style="font-size:12px; color:#475569; margin-top:16px; line-height:1.6">
  <div>📞 Phone: <a href="tel:+66812345678" style="color:#059669; text-decoration:none">+66 81-234-5678</a></div>
  <div>📧 Email: <a href="mailto:[email protected]" style="color:#059669; text-decoration:none">[email protected]</a></div>
  <div>🏢 Address: 123 Business St, Bangkok, Thailand 10110</div>
  <div>🌐 Website: <a href="https://example.com" style="color:#059669; text-decoration:none">www.example.com</a></div>
</div>

3. Social Media Icons Section

<div style="margin-top:12px">
  <a href="https://facebook.com/yourpage" style="display:inline-block; margin-right:8px"><img src="https://example.com/social/fb.png" width="24" height="24" alt="Facebook"></a>
  <a href="https://linkedin.com/in/yourname" style="display:inline-block; margin-right:8px"><img src="https://example.com/social/linkedin.png" width="24" height="24" alt="LinkedIn"></a>
  <a href="https://instagram.com/yourname" style="display:inline-block"><img src="https://example.com/social/instagram.png" width="24" height="24" alt="Instagram"></a>
</div>

Best Practices for Writing HTML Email Signatures

Different email clients (Outlook, Gmail, Apple Mail, etc.) have varying levels of HTML support. To ensure your signature displays correctly everywhere, follow these rules:

Use Inline Styles Instead of External CSS

Most email clients strip out `<style>` tags, so you must use inline styles on every element:

<!-- DON'T do this -->
<style> .signature { color: #059669; } </style>
<div class="signature">...</div>

<!-- DO this instead -->
<div style="color:#059669">...</div>

Use Tables for Layout Instead of Flexbox/Grid

Flexbox and CSS Grid are not fully supported in emails. Use HTML `<table>` elements with colspan/rowspan to control layout:

<table style="width:100%; border-collapse:collapse">
  <tr>
    <td style="width:80px; vertical-align:top">...logo...</td>
    <td style="padding-left:16px; vertical-align:middle">...info...</td>
  </tr>
</table>

Set Width and Max-Width Explicitly

Always declare width and max-width to ensure your signature is responsive on all device sizes:

<table style="width:100%; max-width:400px; margin:0; padding:0">
  ...
</table>

Outlook Compatibility Issues and Solutions

Outlook Desktop (Windows) and Outlook 2016+ have unique compatibility challenges with HTML emails. Here are common issues and how to fix them:

Issue: VML (Vector Markup Language) Requirements

Some versions of Outlook require VML code to render borders and backgrounds correctly:

<!-- Add this Outlook-specific block -->
<!--[if mso]>
  <style>
    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  </style>
<![endif]-->

Issue: Padding in Table Cells

Outlook Desktop does not handle padding in table cells well. Use nested tables instead:

<!-- DON'T do this in Outlook -->
<td style="padding:16px">...</td>

<!-- DO this instead -->
<td><table><tr><td style="padding:16px">...</td></tr></table></td>

How to Install Your Email Signature in Outlook, Gmail, and Apple Mail

Outlook (Windows / Mac)

In Outlook, go to File → Options → Mail → Signatures → New → enter a name → select "Format: HTML" → paste your HTML code → Save.

Gmail (Web)

In Gmail Settings → See all settings → General tab → Signature section → check "Insert signature before quoted text" → paste your HTML (or formatted text) → Save Changes.

Apple Mail (Mac)

Create your HTML signature using an online tool (like Stripo or MJML Builder) → Copy the HTML → In Apple Mail, go to Mail → Preferences → Signatures → click the + button → Paste as Rich Text.

Complete HTML Email Signature Template

Here's a ready-to-use template. Simply replace the placeholder values with your own information:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <table style="width:100%; max-width:400px; margin:0; padding:0; border-collapse:collapse">
    <tr>
      <td style="width:80px; padding:0; vertical-align:top">
        <img src="https://example.com/logo.png" width="80" height="80" alt="Logo" style="display:block; border-radius:50%">
      </td>
      <td style="padding:0 16px; vertical-align:middle">
        <div style="font-family:Arial, sans-serif; font-size:16px; font-weight:bold; color:#0f172a; margin:0">Your Full Name</div>
        <div style="font-family:Arial, sans-serif; font-size:12px; color:#64748b; margin:4px 0">Your Job Title</div>
        <div style="font-family:Arial, sans-serif; font-size:12px; color:#64748b; margin:0">Company Name</div>
      </td>
    </tr>
  </table>

  <div style="font-family:Arial, sans-serif; font-size:12px; color:#475569; margin-top:16px; line-height:1.6; max-width:400px">
    <div><strong>Phone:</strong> <a href="tel:+66812345678" style="color:#059669; text-decoration:none">+66 81-234-5678</a></div>
    <div><strong>Email:</strong> <a href="mailto:[email protected]" style="color:#059669; text-decoration:none">[email protected]</a></div>
    <div><strong>Website:</strong> <a href="https://company.com" style="color:#059669; text-decoration:none">www.company.com</a></div>
  </div>

  <div style="margin-top:12px; max-width:400px">
    <a href="https://facebook.com/company" style="display:inline-block; margin-right:8px; text-decoration:none"><img src="https://example.com/fb.png" width="20" height="20" alt="Facebook"></a>
    <a href="https://linkedin.com/company/company" style="display:inline-block; margin-right:8px; text-decoration:none"><img src="https://example.com/linkedin.png" width="20" height="20" alt="LinkedIn"></a>
    <a href="https://instagram.com/company" style="display:inline-block; text-decoration:none"><img src="https://example.com/instagram.png" width="20" height="20" alt="Instagram"></a>
  </div>
</body>
</html>

Why Email Signatures Disappear or Display Incorrectly

Sometimes an email signature won't display correctly across different email clients. Here are the most common causes and solutions:

1. Image URLs Are Broken or Unavailable

If the image URL is incorrect or the server is down, images won't display. Always use reliable URLs (CDN or stable hosting).

2. CSS in <style> Tags Is Stripped

Email clients remove `<style>` tags. Always use inline `style=` attributes on each element.

3. Layout Is Not Responsive

Use `max-width` instead of fixed `width` to make your signature flexible across screen sizes.

Business Email Hosting with AsiaGB

If you're setting up HTML email signatures for business email accounts on your own domain (like [email protected]), we recommend reliable email hosting. AsiaGB offers Email Hosting with DirectAdmin Control Panel that fully supports HTML email signatures without file size limits. It supports SMTP, IMAP, and POP3 access across all your devices.