Build an HTML email signature

How to use the Email Signature Generator

1. Fill in your name, role and contact details.
2. Pick a layout, font stack and accent colour.
3. Build the signature and check the preview.
4. Copy the HTML into your mail client’s signature settings, or download the file.

Why the markup looks like it is from 1999

Because for one very large client it still is. Classic Outlook on Windows — every desktop version since 2007 — renders HTML email through Microsoft Word’s layout engine rather than a browser engine. Word has no support for flexbox, CSS grid, max-width, float in any reliable sense, background images, or external stylesheets. Nested tables with inline styles are the only structure that survives it, which is why this generator produces them.

Gmail adds its own constraints: it strips <style> blocks in several contexts and removes class attributes, so every rule has to live in a style attribute on the element it applies to. Apple Mail is the most capable of the three and will happily render anything the other two accept.

Rules that keep a signature intact

• Pixels, not rem or em. Word resolves relative units inconsistently, and a signature that renders at 21 px in Outlook is the usual symptom.
• Avoid images, including the logo. Outlook and many corporate clients block remote images by default, so a logo-only signature arrives as an empty box with a red cross. Text with a coloured accent bar always shows.
• Set line-height in pixels and give every cell explicit padding; Word invents its own spacing otherwise.
• Use tel: and mailto: links. Phone numbers in tel: should be digits and a leading + only — spaces and brackets break dialling on some devices.
• Mind dark mode. Apple Mail and Outlook invert colours for dark themes. Mid-greys survive; pure white text on a transparent background disappears when a client forces a white body, and near-black text disappears when one forces a dark one.
• Four to six lines. A signature repeated on every message in a thread becomes noise. Quotes, animated banners and "please consider the environment" lines are the first things recipients learn to ignore.

The legal line

In the UK, the Companies Act 2006 and the Companies (Trading Disclosures) Regulations require a limited company to state its registered name, registered number, place of registration and registered office address on its business letters, order forms and websites — and business email is treated as a business letter. Sole traders must give a name and an address where documents can be served. Similar disclosure rules apply across the EU. Use the address field for that line; it prints smaller than the rest.

Installing it

In Gmail, open Settings → See all settings → Signature, then paste the rendered signature (copy it from the preview above, not the raw code) so Gmail keeps the formatting. In Outlook for Windows, File → Options → Mail → Signatures, and paste it the same way. In Apple Mail, create a signature, then quit Mail and replace the matching .mailsignature file in your Library with the downloaded HTML. On mobile, both Gmail and Outlook apps accept a pasted rich-text signature.

After installing, send yourself one test message and read it on a phone, in Outlook and in Gmail’s web client. That three-minute check catches almost every problem.

Privacy

This tool runs entirely inside your browser using WebAssembly and the Canvas/File APIs. Your files are never uploaded to ToolFlint or any third party; you can verify this in your browser's network tab or by switching to airplane mode after the page loads. Read how we process files.

Last updated 2026-09-23.