Email Signature Generator — HTML Signatures for Gmail & Outlook
Build a professional HTML email signature that looks right in Gmail, Outlook and Apple Mail, then copy it in one click.
View HTML source (3,034 characters)
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;font-family:Arial, Arial, Helvetica, sans-serif;font-size:13px;line-height:19px;color:#4b5563;"><tr><td valign="top" style="padding:0 16px 0 0;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;"><tr><td width="64" height="64" align="center" valign="middle" style="width:64px;height:64px;background:#244b3f;color:#ffffff;font-family:Arial, Arial, Helvetica, sans-serif;font-size:24px;font-weight:bold;text-align:center;border-radius:32px;">AM</td></tr></table></td><td width="1" style="width:1px;background:#244b3f;font-size:1px;line-height:1px;"> </td><td valign="top" style="padding:0 0 0 16px;font-family:Arial, Arial, Helvetica, sans-serif;font-size:13px;line-height:19px;color:#4b5563;"><div style="font-family:Arial, Arial, Helvetica, sans-serif;font-size:16px;line-height:20px;font-weight:bold;color:#111827;">Alex Morgan</div><div style="font-family:Arial, Arial, Helvetica, sans-serif;font-size:13px;line-height:18px;color:#244b3f;padding-top:2px;">Marketing Director <span style="color:#d1d5db;">|</span> Northwind Studio</div><div style="padding-top:8px;"><span style="color:#244b3f;font-weight:bold;">P</span> <a href="tel:+14165550142" style="color:#4b5563;text-decoration:none;">+1 (416) 555-0142</a><br><span style="color:#244b3f;font-weight:bold;">E</span> <a href="mailto:alex@northwind.example" style="color:#4b5563;text-decoration:none;">alex@northwind.example</a><br><span style="color:#244b3f;font-weight:bold;">W</span> <a href="https://www.northwind.example" style="color:#4b5563;text-decoration:none;">www.northwind.example</a><br><span style="color:#4b5563;">120 King St W, Toronto, ON</span></div><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="left" style="border-collapse:collapse;margin-top:8px;"><tr><td style="padding:0 4px 0 0;"><a href="https://linkedin.com/in/alexmorgan" title="LinkedIn" style="display:inline-block;background:#244b3f;color:#ffffff;font-family:Arial, Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;line-height:22px;width:24px;height:22px;text-align:center;text-decoration:none;border-radius:3px;">in</a></td><td style="padding:0 4px 0 0;"><a href="https://x.com/alexmorgan" title="X" style="display:inline-block;background:#244b3f;color:#ffffff;font-family:Arial, Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;line-height:22px;width:24px;height:22px;text-align:center;text-decoration:none;border-radius:3px;">X</a></td></tr></table><table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin-top:10px;"><tr><td style="background:#244b3f;padding:6px 12px;border-radius:3px;"><a href="https://northwind.example/book" style="color:#ffffff;font-family:Arial, Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;text-decoration:none;">Book a 20-minute call</a></td></tr></table></td></tr></table>
How to install it
- Click "Copy signature" above.
- In Gmail, open Settings (gear icon) → See all settings → General.
- Scroll to Signature, click "Create new", name it, then paste (Ctrl/Cmd+V) into the box.
- Under "Signature defaults", choose it for new emails and replies, then click "Save changes" at the bottom.
- Gmail limits signatures to 10,000 characters and only shows images loaded from a public https:// URL.
Your details stay in your browser: the signature is built on this page and nothing is uploaded or stored. Images load from the URLs you enter. Browse all free tools.
Found a problem, or something that could be better? We read every message and we fix things quickly.
This email signature generator builds a signature from your name, title, contact details, photo or logo, social links and brand colour, shows it live in six templates, and gives you HTML that survives the email clients people actually use. Click "Copy signature", paste it into Gmail’s or Outlook’s signature box, and it keeps its layout.
Email clients are not web browsers. Classic Outlook for Windows renders HTML with Microsoft Word, Gmail strips style blocks and CSS classes, and most clients block images that are not on a public https:// address. So the output here uses nested tables and inline styles only, web-safe fonts, and explicit image sizes. What it cannot do is host your images: a photo or logo must already be online, and the page explains why when you try a local file.
How to use
- Fill in your details. Empty fields are left out of the signature entirely.
- Paste the https:// URL of a hosted photo or logo, or leave both empty to use an initials tile.
- Choose a template and brand colour, and add social links, a button or a disclaimer if you need them.
- Click "Copy signature" and paste it into your email client’s signature settings. The install steps for each client are below the preview.
- Send yourself a test email and check it on your phone as well as your desktop.
Frequently asked questions
How do I add an HTML signature to Gmail?
Click "Copy signature" on this page, then in Gmail open Settings, See all settings, General, scroll to Signature, click Create new, and paste into the box. Choose it under Signature defaults and click Save changes at the bottom of the page. Do not paste the HTML source code: Gmail’s editor only accepts the rendered signature, which is what the copy button puts on your clipboard.
Why do the images in my signature not show?
Usually because the image is not on a public https:// URL. Gmail removes base64 (data:) images from signatures, Outlook blocks many external images until the recipient allows them, and images on http:// or behind a login fail everywhere. Host the image on your website or a CDN, use the https:// link, and keep it small (under about 100 KB).
Why does my signature look different in Outlook?
Classic Outlook for Windows uses Word to render email, which ignores many CSS properties, including rounded corners, so a round photo appears square and spacing may shift slightly. This generator avoids layout CSS that Word drops by using tables, which is why the structure holds. New Outlook and Outlook on the web render closer to a browser.
What size should an email signature photo or logo be?
Display it at around 80–120 px wide and upload an image twice that size (for example 176×176 px for an 88 px photo) so it stays sharp on high-density screens. Keep the file under 100 KB. Use PNG for logos with flat colour and JPG for photos.
How long can an email signature be?
Gmail caps signatures at 10,000 characters of HTML, which this generator stays well under. In practice, keep it to four or five lines: name, role and company, one or two ways to reach you, and at most one call to action. Long signatures get clipped in replies and push your message below the fold on phones.
What actually works in email signatures
• Tables for layout, not divs with flexbox or grid. Outlook for Windows ignores modern CSS layout.
• Inline styles on every element. Gmail strips <style> blocks and class names from signatures.
• Web-safe fonts (Arial, Helvetica, Verdana, Georgia). A custom web font falls back to Times New Roman in Outlook.
• Hosted images with width and height attributes. Without explicit sizes, Outlook can display a logo at its full original size.
• Text for phone numbers, emails and links, not images of them. They stay clickable, readable with images off, and accessible to screen readers.
Social icons are a common trap: each icon is another image that needs hosting and is blocked by default in many inboxes. The templates here use small coloured text badges instead, which render everywhere.
Choosing a template
Classic and Modern suit most business use: a photo or logo beside your details. Compact is designed for people who reply a lot and do not want a large block under every message. Centred works for creative roles where the signature is part of the brand. Banner gives the brand colour more weight. Text only has no images or coloured blocks at all, which makes it the safest choice for plain-text clients, mailing lists and support desks.
Whatever you pick, use the same template across a team. Consistent signatures look deliberate; a mix of styles looks like nobody owns the brand.
Legal disclaimers and tracking links
Some jurisdictions require company details in business email. In the UK, a limited company must show its registered name, number and registered office address; in Germany, the Impressum rules cover similar details. A confidentiality disclaimer has little legal force on its own, so keep it short if you use one.
If you add a call-to-action button or a link to a landing page, tag it with UTM parameters (our UTM builder makes the link) so the clicks show up as "email signature" in your analytics rather than as direct traffic.
Related free tools
- Spam Word Checker — Paste an email’s subject and body to find spam-trigger phrases, shouting, link and image problems, and a missing unsubscribe.
- Email Subject Line Tester — Score a subject line for length, spam trigger words, capitals and punctuation, and preview how it truncates on iPhone and in Gmail.
- QR Code Generator — Make a QR code for a URL, text, email, phone, SMS, Wi-Fi or contact card, in your colours, and download it as PNG or SVG. Codes never expire.
- UTM Link Builder — Build clean, consistent UTM tracking links so you know exactly which campaigns bring you customers.