HTML Email Signature Generator

You paste a nicely designed HTML signature into Gmail — it looks perfect in Chrome. Then a client on Outlook 2019 sees broken columns and missing images. You try flexbox: Outlook ignores it. You try <div> layout: Yahoo strips the styles. The only layout that works across Gmail, Outlook, Apple Mail, and Yahoo is nested <table> elements with every style inlined — no external CSS, no <div>, no shortcuts.

Why This Generator (Not a Signature Template)

Signature templates from Canva or HubSpot lock you into their branding or require an account. Hand-coding table-based HTML with inline styles for email client compatibility is tedious and error-prone. This tool generates table-based signatures with inline styles that work in Gmail, Outlook, Apple Mail, and Yahoo Mail — fill in your details, pick a layout, copy the HTML. Everything runs in your browser; your name, email, and personal details are never sent to any server.

What Is an HTML Email Signature?

An email signature is a block of text (and optionally images) automatically appended to the bottom of every email you send. A professional email signature typically includes your name, job title, company, contact information, and links to your social profiles.

This generator creates table-based HTML email signatures with inline styles only — the standard approach that ensures compatibility across Gmail, Outlook, Apple Mail, Yahoo Mail, and other email clients that strip external stylesheets and ignore modern CSS.

All generation happens in your browser. Your name, email, and personal details are never sent to any server.

How to Use This Tool

1. Fill in your details — name, job title, company, contact info, social profile handles
2. Choose a layout — Horizontal (photo left, info right), Vertical (stacked), or Minimal (text only)
3. Pick a color scheme — six options to match your brand
4. Optionally add image URLs — a profile photo or company logo hosted at a public HTTPS URL
5. Copy the HTML and paste it into your email client’s signature settings

Why Table-Based HTML for Email Signatures?

Modern websites use CSS flexbox, grid, and variables. Email clients do not. Microsoft Outlook, which uses Microsoft Word’s rendering engine, ignores most CSS properties. Yahoo Mail and older versions of Gmail also have strict CSS support.

The only reliable cross-client layout method is HTML tables with inline styles. Every CSS property in a table-generated signature is written directly on the element using style="..." attributes — there are no <link> tags, no <style> blocks, and no CSS classes to be stripped.

This tool generates exactly this kind of signature, following the same conventions professional email designers use.

Layouts Explained

Horizontal (Recommended)

The horizontal layout places your profile photo (or company logo) on the left, with a vertical accent line in your brand color, and your contact details on the right. This is the most common professional format used by developers, designers, and executives worldwide.

• Best for: Most professional contexts, corporate email
• Compatible with: Gmail, Outlook, Apple Mail

Vertical

The vertical layout stacks your photo above your name and contact details in a centered column. This compact format works well for developers who prefer a clean, minimal-width signature.

• Best for: Mobile-first users, personal email
• Compatible with: All major email clients

Minimal

The minimal layout uses text only — no images, no borders, just your name, title, company, and contact information on two or three lines. It is the lightest, most compatible format, and is preferred by engineers and developers who value brevity.

• Best for: Technical environments, developer communities, open-source contributors
• Compatible with: All email clients including plain-text mode

Color Schemes

Social Profile Links

Enter your social profile handles and the tool automatically builds the correct URLs:

Adding Your Signature to Email Clients

Gmail

1. Open Gmail in a browser
2. Click the gear icon (⚙️) → See all settings
3. Click the Signature tab
4. Click Create new and give your signature a name
5. In the signature editor, click the <> (Insert HTML) button
6. Paste the generated HTML
7. Click Save Changes

Outlook (Windows Desktop)

1. Go to File → Options → Mail → Signatures
2. Click New, name your signature
3. In the editor, use the HTML view or create a .htm file with the signature HTML and import it
4. Assign the signature to your account

Outlook Web App (OWA)

1. Click Settings (gear icon) → View all Outlook settings
2. Go to Mail → Compose and reply
3. In the Email signature section, switch to HTML editor
4. Paste the generated HTML
5. Save

Apple Mail

1. Open Mail → Preferences (⌘,)
2. Click the Signatures tab
3. Select your email account, click +
4. In the signature editor, right-click → Edit Signature Source (or use the HTML view)
5. Paste the generated HTML

Choosing Profile Images

The generated signature supports two image types:

Profile Photo — displayed as a circular image (72×72px) with a border-radius that shows rounded in Gmail and Apple Mail. In Outlook for Windows, border-radius is not supported, so the photo appears square — this is a known limitation.

Company Logo — displayed as a rectangular image (80×40px) with object-fit: contain to preserve aspect ratio. Useful for small logos displayed below your contact info.

Image URL Requirements

• The URL must be publicly accessible over HTTPS
• The image should be already hosted somewhere (your company website, CDN, etc.)
• Images in email signatures are not embedded — they load from the source URL when the email is opened
• Use images smaller than 100KB for best loading performance
• Recommended sizes: photo at 150×150px or larger (displays at 72×72), logo at 240×120px or larger (displays at 80×40)

Email Signature Best Practices

Keep It Short

Professional email signatures typically have 4–6 lines of information. More than 6 lines can seem overwhelming and may be truncated by mobile clients.

Use Consistent Branding

Match your signature color to your company’s primary brand color. If your company has a brand guide, use the exact hex value from the guide.

Include Only Relevant Links

Link only to profiles you actively maintain. A link to an inactive GitHub profile or a Twitter account with 12 tweets can be counterproductive.

Test Before Deploying

Always send a test email to yourself and check it in both Gmail and Outlook before rolling out a new signature. What renders correctly in Gmail may look different in Outlook.

Avoid Complex HTML

This tool deliberately avoids CSS Grid, Flexbox, CSS variables, and other modern techniques. These are stripped by email clients. The generated HTML uses only tables, inline styles, and widely supported CSS properties.

Compatibility Notes

FAQ

What is the best email signature layout for professional use?

The horizontal layout is the most widely used format in corporate and technology contexts. It mirrors how résumés and business cards present information — photo on the left, details on the right — creating an immediate visual association between the person and their information.

Can I add custom fields like a phone extension or department?

The current tool supports the most common fields. You can add custom fields by editing the generated HTML directly — simply add a new <tr><td>...</td></tr> row to the contact section following the same inline-style pattern.

Should I include my phone number in my email signature?

For professional and sales contexts, yes. Including a phone number gives recipients an immediate way to reach you without navigating to your profile. For privacy-sensitive contexts (open-source, public mailing lists), you may prefer to omit it.

My company logo is not showing up. What should I check?

Verify that the logo URL is publicly accessible (open it in a private browser tab). Ensure it uses HTTPS (not HTTP). Confirm the URL is not behind authentication. Some corporate CDNs block direct linking — ask your IT team for a public-facing URL.

Why does my signature look different on mobile?

Email clients on mobile devices (iOS Mail, Gmail app) scale down signatures for smaller screens. This can cause table-based layouts to compress. The Vertical and Minimal layouts are generally the most mobile-friendly. Testing on a real mobile device is always recommended.

Is there a character limit for email signatures?

Email clients don’t impose hard limits, but many IT administrators and email services configure maximum signature sizes (typically 64KB to 100KB). The HTML generated by this tool is typically under 2KB, well within any limit.