Home › HTML signature

HTML email signature

An HTML email signature that renders everywhere — not just in your browser

Hand-coding an email signature is a fast way to get broken layouts. ProSignature generates clean, inline-styled HTML that survives Gmail, Outlook and Apple Mail.

Generate my HTML signatureCopy the code, or install in one click

A working HTML email signature, to copy

Here is a complete, email-safe signature you can paste into your own editor and edit. Every choice in it is deliberate, and the reasons are below the code.

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse">
  <tr>
    <td style="padding-right:14px;border-right:3px solid #E8604C">
      <img src="https://yoursite.com/logo.png" alt="Your Company"
           width="72" height="72"
           style="display:block;border-radius:6px">
    </td>
    <td style="padding-left:14px;font-family:Arial,Helvetica,sans-serif">
      <div style="font-size:16px;font-weight:bold;color:#1a1a1a">Your Name</div>
      <div style="font-size:13px;color:#666;padding-top:2px">Job Title &middot; Company</div>
      <div style="padding-top:7px">
        <a href="tel:+15550000000"
           style="font-size:13px;color:#444;text-decoration:none">(555) 000-0000</a>
        <span style="color:#ccc"> &nbsp;|&nbsp; </span>
        <a href="mailto:you@company.com"
           style="font-size:13px;color:#444;text-decoration:none">you@company.com</a>
      </div>
      <div style="padding-top:3px">
        <a href="https://yourcompany.com"
           style="font-size:13px;color:#E8604C;text-decoration:none;font-weight:bold">yourcompany.com</a>
      </div>
    </td>
  </tr>
</table>

Swap the logo URL, name, title and links. Keep the structure — that is the part doing the work.

Why it is written that way

Hosting rules for the logo are in the image size guide; if images break for recipients, this diagnoses it.

Or generate it instead of writing it

Hand-coding one signature is a reasonable afternoon. The expensive part is not writing it — it is re-testing across Outlook, Gmail, Apple Mail and mobile every time you change something. The generator below produces the same email-safe markup and gives you the source with one click.

Make one now — free, no account

Type your details, pick a layout, copy the result. Nothing is gated and nothing is watermarked: no email address, no signup, no trial clock.

Want your logo and brand colours pulled in automatically, the 13 designed templates, or the signature written straight into Gmail in one click? Open the full editor — still free.

Why email HTML is different

Email clients don't render HTML like browsers do. Gmail strips <style> blocks, Outlook uses Word's rendering engine, and external CSS is ignored. A signature that looks perfect in a browser can fall apart in an inbox.

ProSignature builds every signature with inline styles and email-safe markup — the technique professional email developers use — so your signature looks the same for every recipient.

Design visually, export clean code

You don't have to write a single tag. Design your signature in the editor, then either copy the generated HTML to paste wherever you like, or let ProSignature install it directly. What you get is tidy, portable, inline-styled HTML.

Inline styles only

No external CSS or style blocks that email clients strip out.

Table-based layout

Rock-solid alignment across Outlook, Gmail and Apple Mail.

Retina-ready images

Logos and photos stay crisp on high-density screens.

Portable code

Copy it into any tool, CRM or help-desk that accepts HTML.

Install it or take the code

Use the one-click installer for Gmail and Outlook, or copy the raw HTML for a CRM, help desk or custom setup. See example designs to start from.

Why email HTML is not web HTML

An HTML email signature is written to a standard roughly two decades behind the web, and that is not a stylistic choice — it is what mail clients support. Outlook for Windows renders through Word's layout engine; Gmail strips <style> blocks and ignores external stylesheets; many clients block remote images until the recipient allows them. The practical consequence is that the modern techniques you would reach for on a web page — flexbox, grid, custom properties, web fonts — either do nothing or actively break. Signature HTML is therefore deliberately old-fashioned: nested tables for layout, inline style attributes on every element, explicit width and height on images, and system font stacks with real fallbacks.

The rules that make a signature render everywhere

Tables for layout, not divs

Nested tables with explicit widths remain the only structure that renders predictably across every Outlook version.

Inline styles on every element

Anything in a style block is unreliable; anything on the element itself is not.

Width and height as HTML attributes on images

Not only in CSS — it prevents Word's engine resizing them and stops layout shift while loading.

Email-safe font stacks

Web fonts are ignored by most clients. Specify fallbacks so text does not land in Times New Roman — see best fonts.

Hosted images over HTTPS

Publicly reachable, no login, no hotlink protection. Embedded local files can arrive as attachments — sizing in the image size guide.

Readable with images off

Never put text inside an image. If every picture is blocked, the signature must still convey your name, role and contact details.

Hand-coding versus generating it

You can absolutely write signature HTML by hand, and if you only need one signature and enjoy the constraints, it is a reasonable afternoon. What catches people out is testing: a block that looks perfect in a browser tells you almost nothing, because a browser is the one environment your signature will never run in. Real verification means sending it to yourself and opening it in Outlook on Windows, Gmail on the web, Apple Mail and a phone — and then repeating that whenever you change anything. That maintenance cost is the honest argument for using a generator that outputs email-safe HTML by default: not that hand-coding cannot work, but that the testing matrix is the expensive part. Outlook's specific quirks are catalogued in the Outlook guide.

Written and maintained by the ProSignature team. Competitor pricing and feature claims on this site are verified against each vendor's live page on the day of writing — last verified 26 July 2026. No affiliate links. How we work.

Get email-safe signature HTML in minutes

Design visually, export clean HTML, install anywhere.

Create my signature — free
FAQ

Frequently asked questions

Can I get the raw HTML of my signature?

Yes — after designing your signature you can copy its raw HTML and paste it anywhere that accepts an HTML signature: an email client, CRM or help-desk tool.

Why does my hand-coded signature break in Outlook?

Outlook renders HTML with Word's engine and ignores much modern CSS. ProSignature uses inline styles and table-based layout, which is what renders reliably in Outlook.

Are the images hosted for me?

Yes — signature images (logos and photos) you upload are hosted for you, so they load correctly in recipients' inboxes without you managing image links.

Why does my HTML email signature break in Outlook?

Outlook for Windows renders HTML through Word's layout engine, which does not support modern CSS layout. Use nested tables, inline styles and explicit image width/height attributes instead of flexbox, grid or style blocks.

Can I write an email signature in HTML myself?

Yes — an email signature can be hand-written in HTML using tables and inline styles. The expensive part is not writing it but testing it across Outlook, Gmail, Apple Mail and mobile every time you change something.

Should email signature images be embedded or hosted?

Hosted, over HTTPS with no login required. Embedded local files can arrive as attachments, and the signature should still read correctly when images are blocked.

Explore

Related guides