Email Signature Generator

What this email signature generator does

This page builds a paste-ready HTML email signature with your name, job title, company, contact details, social links, photo and company logo. Output is a single self-contained HTML table with inline styles — the only signature format that renders consistently across Gmail, Outlook (desktop and web), Apple Mail, mobile inboxes and the dozens of third-party clients that exist in the wild. A live preview updates as you type, plus a copy of the HTML source for advanced setups.

How to use the generator

1. Fill in the Identity, Contact, Images and Social links panels. All fields are optional — leave empty what you don’t want to show.
2. Adjust the Theme colour to match your brand. The colour is used for the separator line, your name and the social links.
3. The Preview panel renders the signature live. The HTML source textarea below shows the underlying code.
4. Click Copy HTML for paste to copy the rendered styled signature (works with Gmail, Apple Mail and the Outlook rich-text editor). Click Copy HTML source if your email client needs you to paste the raw HTML into an HTML mode (some Outlook setups, third-party clients).
5. Open your email client’s signature settings and paste.

Why a table-based signature

Email rendering engines are a decade behind the modern web. Outlook on Windows still uses Microsoft Word’s rendering engine to draw HTML email — no flexbox, no grid, no object-fit, no modern layout primitives. Gmail strips any <style> block from the header before forwarding. The format that survives is the HTML table with inline styles — the same technique every serious email-marketing platform uses. The generator emits exactly that: <table> elements, inline style on every cell, rgb() colours, no classes.

Setting it up in Gmail

Gmail has a single signature editor in Settings → General → Signature:

1. Generate your signature above and click Copy HTML for paste.
2. In Gmail, click the gear icon, choose See all settings.
3. Scroll to Signature, click Create new, name it.
4. Click inside the rich-text editor area, then paste with Ctrl+V (Cmd+V on Mac). Gmail preserves the styled paste — the rendered signature appears, not the HTML source.
5. Below the editor, choose the signature in the Signature defaults dropdowns for new mail and replies.
6. Scroll to the bottom and click Save Changes.

Send a test message to yourself before relying on the signature in real correspondence.

Setting it up in Outlook

Outlook’s behaviour depends on the version. Outlook on the web (Outlook 365 web client, outlook.com) is similar to Gmail: paste the preview into the signature editor under Settings → Mail → Compose and reply → Email signature.

Outlook desktop (Windows) is more particular about HTML pasted into the rich editor. If the styled paste comes through stripped:

1. Copy the HTML source from the lower textarea on this page.
2. Save it as a .htm file in your Outlook signatures folder. By default this folder is at %appdata%\Microsoft\Signatures\.
3. Open Outlook, go to File → Options → Mail → Signatures.
4. The saved file should now appear in the signature list. Pick it, confirm the preview looks right, and assign it to New messages and Replies/forwards.

Outlook for Mac behaves like Apple Mail — the rich-text paste works directly with no extra steps.

Setting it up in Apple Mail

On macOS, go to Mail → Settings → Signatures, pick the email account, click +, then paste the styled preview into the editor with Cmd+V. Untick Always match my default message font so the signature’s typography is preserved. Apple Mail on iOS uses a plain- text signature editor — set it on macOS and let iCloud sync.

Why images must be web-hosted

Email clients deliberately cannot read files from your computer — recipients are on other devices and there is no shared filesystem the message can reference. The only image source a signature can use is an http:// or https:// URL to a publicly-accessible image file.

Workable hosts include your own website’s /images/ folder, an Imgur direct link (right-click → copy image address, not the album page URL), a Cloudinary public folder, or a corporate CDN. The URL must end in a real image filename (.jpg, .png, .webp, .svg); page URLs that contain an image won’t work. Keep the file under about 100 KB — anti-spam scanners penalise heavy signature images.

Mobile rendering

The signature targets up to 600 px on desktop. Phones are 360–430 px, so expect the layout to wrap rather than overflow — the avatar drops above the contact column on narrow screens. Keep contact entries short and limit social links to four.

Accessibility

The signature uses real <a> links for emails (mailto:), phones (tel:) and websites, so screen readers announce them correctly and mobile users can tap to call. Images carry alt attributes set from your name and company fields. Avoid putting critical contact info inside the logo image — keep it as plain text so it survives the image-off scenario.

Privacy

This generator builds the signature in JavaScript on your device. The form fields, generated HTML and preview never leave the page. There are no fetch calls, no analytics on what you type, no server-side logging. The page works the same way offline once loaded.