Skip to main content
ES

Email Signature Generator

Build a clean, professional HTML email signature with your name, title, photo and social links — then copy it straight into Gmail or Outlook.

Did you like the tool? Thanks!
Share:

Fill in your details, pick a template, then copy the signature straight into Gmail, Outlook, or any email client's signature settings. Everything runs in your browser — nothing is uploaded.

Preview

How to Use Email Signature Generator

Fill in your name, job title, company, phone, email and website, optionally upload a square photo, add up to three social links, then pick an accent color and one of three layouts — Classic, Modern or Minimal. The live preview updates instantly. Use "Copy Signature" to paste the rich, formatted result directly into your email client's signature settings, or "Copy HTML Source" to grab the raw markup for anywhere else.

About Email Signature Generator

An email signature is one of the few pieces of branding almost everyone sends dozens of times a day without thinking about it. A well-formed one adds a name, role and a couple of easy ways to get in touch or find you online, without turning every email into a wall of text. A badly-formed one — built by pasting formatted text from a word processor, or hand-typed with random line breaks — tends to look inconsistent between the sender's own outbox and the recipient's inbox, because desktop word processors and email clients don't share the same rendering rules. This tool builds signatures the way professional HTML email actually has to be built: as a `<table>` with every style declared inline on the elements themselves, and no `<style>` block or CSS class anywhere in the output. That is not a stylistic preference — it is a hard requirement of the medium. Gmail, Outlook, and most corporate mail gateways strip `<style>` blocks and CSS classes from both composed and received mail as a security and consistency measure, and modern layout tools like flexbox or grid are unevenly supported inside the sandboxed rendering engines email clients use. Tables with inline styles remain the one layout technique that renders predictably across essentially every client in use today, which is why every major transactional email platform still generates markup this way even in 2026. Three templates are offered because different roles call for different tones. Classic places a circular photo to the left of a text block with a thin rule under the name — friendly and personable, well suited to client-facing roles like sales or account management. Modern drops the photo in favor of a 4-pixel colored bar down the left edge, which reads as tidy and design-forward without needing an image to load. Minimal strips out the photo and the accent color entirely, leaving plain stacked lines of text — the safest choice for internal or highly formal correspondence, and the one least likely to look strange in a client that partially fails to render other markup. The optional photo is resized to a 120×120 square directly in your browser using a `<canvas>` element, then embedded as a base64-encoded `data:` URI inside the `<img>` tag — so the finished signature is entirely self-contained with no external image request required to display it. That convenience comes with one well-known real-world limitation worth knowing before you rely on it: Outlook for Windows desktop, in particular, is known to strip base64-embedded images from signatures in some configurations, especially when a signature is set through Outlook's own signature editor rather than pasted fresh into a compose window. If your organization is on desktop Outlook and the photo doesn't appear for some recipients, hosting the image externally and linking to it by URL — rather than embedding it — is the standard workaround, though that trades away the self-contained convenience this tool defaults to. All typed values — name, title, company, phone, email, website and each social URL — are HTML-escaped before they are placed into the generated markup, so a name containing an apostrophe, an ampersand in a company name, or angle brackets typed by accident cannot break the table structure or inject unintended markup into the signature that ends up in every email you send.

Details & Tips

Two copy buttons exist because they solve two different problems. "Copy HTML Source" copies the raw HTML string using the Clipboard API's `writeText`, which is exactly what you want if you're pasting into a code editor, a CMS, or anywhere that expects literal markup — but pasted into a rich-text box like Gmail's or Outlook's signature field, `writeText` output shows up as visible HTML tags rather than a formatted signature, because plain-text clipboard data carries no formatting information. "Copy Signature" instead selects the actual rendered preview element in the page — the real DOM nodes with their real inline styles already applied — using `document.createRange().selectNodeContents()` and `window.getSelection()`, then triggers `document.execCommand('copy')` on that rich selection. Because the browser is copying live, styled DOM rather than a text string, pasting the result into Gmail's or Outlook's signature settings box preserves the fonts, colors, spacing and photo exactly as shown in the preview — which is the actual real-world workflow for setting up an email signature. This is a case where the older, less fashionable `execCommand('copy')` API still does something the modern Clipboard API's `writeText` cannot: copy rich formatted content rather than plain text. Both copy functions are wrapped in try/catch with a `document.createElement('textarea')` fallback for the plain-text path, since clipboard permissions vary across browsers and contexts. Field-by-field notes: phone numbers are rendered as `tel:` links, the email address as a `mailto:` link, and the website as an `https://` link (a scheme is added automatically if you type a bare domain like `acme.com`). Social links accept LinkedIn, Twitter, Instagram, GitHub or Facebook from a dropdown paired with a URL field; up to three can be added, and each is individually removable. Only links with a non-empty URL are rendered in the output, so leaving a slot's URL blank simply omits it rather than producing a broken link. Privacy note: the photo, name, and every other field you type stay in your browser the entire time. There is no upload step and no server-side processing — the canvas resize, the base64 encoding, and the HTML generation all happen locally, and the finished signature only leaves your machine when you paste it somewhere yourself.

Frequently Asked Questions

How do I add this signature to Gmail?
Click "Copy Signature", then in Gmail go to Settings → See all settings → General, scroll to the Signature section, click into the signature box, and paste. Gmail preserves the formatting because "Copy Signature" copies the rendered, styled version rather than plain text.
How do I add this signature to Outlook?
Click "Copy Signature", then in Outlook go to File → Options → Mail → Signatures, select or create a signature, click into the editing box, and paste. If you use Outlook on the web, the signature setting is under Settings → Mail → Compose and reply.
What is the difference between "Copy HTML Source" and "Copy Signature"?
"Copy HTML Source" copies the raw HTML markup as plain text — useful for pasting into a code editor or CMS. "Copy Signature" copies the actual rendered, formatted signature, which is what you want when pasting into an email client's signature settings box.
Why doesn't my photo show up for some recipients?
The photo is embedded as a base64 data URI directly in the HTML. Some email clients, most notably Outlook for Windows desktop in certain configurations, strip base64-embedded images from signatures. Hosting the photo on a public URL and linking to it instead is the usual workaround.
Is my photo uploaded anywhere?
No. The photo is resized to 120×120 pixels using a canvas element directly in your browser and embedded as a data URI. It never leaves your device unless you paste the finished signature somewhere yourself.
Which template should I use?
Classic (photo + divider) suits client-facing roles. Modern (colored accent bar, no photo needed) suits a clean, design-forward look. Minimal (plain stacked text, no color or photo) is the safest choice for formal or internal-only correspondence.
Can I use more than three social links?
The tool caps social links at three by design, to keep the signature compact — most email signatures become cluttered and slower to scan past three links.
Why does the tool use a table instead of divs with CSS classes?
Email clients like Gmail and Outlook strip `<style>` blocks and CSS classes from both composed and received email. A table with every style declared inline is the one layout approach that renders consistently across virtually all email clients.
Does this store or send my information anywhere?
No. Every field, the photo resize, and the HTML generation happen entirely in your browser using JavaScript. Nothing is transmitted to a server.
Can I edit the signature after copying it?
Yes. Once pasted into your email client's signature editor, you can make further edits there just as you would with any signature — the copied version is standard, editable HTML.
What image formats can I upload for the photo?
Any standard image format your browser can decode — JPEG, PNG, GIF, WebP and similar. It is automatically center-cropped to a square and resized to 120×120 pixels.
Why is my phone number formatted as a link?
The phone number is rendered as a `tel:` link so that recipients reading the email on a phone can tap it to dial directly. The visible text still shows exactly what you typed.

Also Available As

email signature generator, html signature maker, gmail signature generator, outlook signature template, free email signature creator, professional email signature

Found a Problem?

Let us know if something with Email Signature Generator isn't working as expected.

Thanks — we'll take a look.