Email Signature Generator
An email signature generator that outputs a single inline-styled HTML table, previewed live, ready to paste into Gmail or Outlook as rich text.
The block
As the inbox renders it
How to use
- Type over the sample details and leave blank anything you'd rather not publish. Full name is the only field the output needs.
- Set the accent colour, which starts on #0379b3, by typing it or through the swatch. In Chrome and Edge an eyedropper button appears beside the field and samples the exact colour out of your logo anywhere on screen. The line under the field gives the colour's contrast against white, and below 4.5:1 it warns that the name and links will be hard to read.
- Press Copy signature, open your mail client's signature editor, and paste. Reach for Copy HTML instead when the destination wants markup rather than a formatted paste.
About this tool
Ada Lovelace of Analytical Engines is already sitting in the fields when the page opens, so the email signature generator hands you a finished block before you have typed anything. Overwrite the sample with your own name, role, company and contact details, and the preview redraws on every keystroke. Whatever you leave empty drops out of the markup, so a signature with no phone number has no phone number and no orphaned separator dot either. Full name is the one field the output cannot do without. Clear it and the preview goes blank, because the name is what the rest of the layout hangs off.
What comes out is one HTML table with every style written inline, which is the layout email clients render most predictably. Your name goes in at 16px bold in the accent colour, the job title and company share a 13px line beneath it, and the email, phone and website are strung together with a middle dot on a third line. Copy signature puts both the HTML and a plain-text fallback on the clipboard, so a paste into Gmail's or Outlook's signature box keeps the formatting. Copy HTML hands over the raw markup for a signature-management system, and View HTML source opens it up if you want to read it before trusting it.
An architect's signature, with a photo and without a phone
Priya Raman, Head of Operations at Hart & Field Architects, wants her photo in the block and her phone number out of it. Type the name and the two role fields, put priya@hartfield.example in Email, type the website as plain hartfield.example, paste https://hartfield.example/team/priya.jpg into Photo URL, and set the accent to the practice's maroon, #7a1f2b. The preview shows the headshot as a 64-pixel circle to the left of three lines: the name in maroon at 16px, Head of Operations, Hart & Field Architects in grey beneath it, then the email and the website as maroon links with a single middle dot between them, because the empty phone field took its dot with it.
Open View HTML source and the whole thing is 832 characters: one table, one row, two cells, every style inline. The ampersand in the company name has become & in the markup and reads as an ordinary ampersand in the preview, and the bare hartfield.example has been given an https:// scheme on its link while the visible text stays as she typed it. Copy signature carries that markup plus a plain-text copy of the preview to the clipboard, and the paste into Gmail's signature box keeps the circle, the maroon and the links.
Good to know
- Photos are rendered at 64 by 64 pixels with a circular crop, so a wide logo gets squeezed into that square. Crop it before you host it.
- Full name, Job title and Company each stop accepting input at 80 characters.
- Nothing is stored between visits. If you keep one signature for work and another for a side project, park the copied HTML in a note of your own.
- There are no social icons and no banner image. The output is ordinary table markup, and either can be added by hand afterwards; the generator itself won't build them.
- The photo cell is written with the picture and nothing else, and the alt text is your name. A client that blocks remote images shows that name in a 64-pixel box until the reader allows pictures.
Things people ask
How do I get this into Gmail?
Press Copy signature, then in Gmail open Settings, See all settings, General, and scroll down to Signature. Create one, paste into the box, and save at the bottom of the page. The formatting survives because the clipboard carries an HTML flavour alongside the plain text, and Gmail takes the HTML.
Does it work in Outlook as well?
A table with inline styles is exactly what Outlook's renderer copes with best, so yes. On the desktop app the path is File, Options, Mail, Signatures. On Outlook for the web it is Settings, Mail, Compose and reply. Paste into the editor there and save.
Why is my photo showing as a broken image?
The signature links to your photo rather than carrying a copy of it, so the URL has to be fetchable by whoever opens the mail. Host the file on your own site, a CDN, or an avatar service, and use https. The Photo URL field refuses a plain http address, and a host such as intranet.local or 192.168.1.10 that only answers inside your own network, and leaves the picture out of the signature until the address is one a recipient can reach. A benefit of the link approach: swap the file at that address later and every signature already out there picks up the new picture.
Can I make it use my brand colour?
The accent feeds your name and every link in the contact line. Type a hex value or a CSS colour name into Accent colour, pick from the swatch, or use the eyedropper to lift the shade straight off a logo on your screen. Your name is 16px bold, which WCAG still counts as normal text, so the field holds the colour to 4.5:1 against white and says so when a pale brand yellow falls short. The grey behind the role line and the contact line stays at #555 so it doesn't compete with whatever you choose.
What if the copy doesn't work?
Copy signature writes two flavours to the clipboard at once, the HTML and a plain-text version of the same lines, and that is what lets a mail client paste the formatting. The button only says Copied once the browser has taken both. If it refuses, because a permission prompt was dismissed or the page lost focus, a note under the block says nothing reached the clipboard; select the signature in the preview and copy it with your keyboard instead, or open View HTML source and copy the markup from there.
Can I put an ampersand or a less-than sign in a field?
Type it as you would write it. Every field is escaped on the way into the markup, so Hart & Field appears in the source as Hart & Field and renders as the name you typed, and a stray angle bracket becomes text rather than a broken tag. The same escaping runs over the photo address and the accent value, which is why a pasted URL with an ampersand in it survives intact.
Is the phone number a tap-to-call link?
Only when it starts with a plus and the country code, such as +1 555 0100. That is the one form a tel: link can dial from anywhere, so the signature links it as tel:+15550100 and a phone opens the dialler. A local number like 020 7946 0958 stays plain text, and the Phone field says to add the country code if you want it linked.
Will it hold up on a phone?
It should. The whole signature is a single table row that wraps rather than forcing a horizontal scroll, and the font stack steps through Segoe UI on Windows and Roboto on Android before falling back to Arial. Setting it up on the phone itself is the awkward part, since the iOS signature field takes plain text only. Save it from a desktop web client and let it sync down.
Missing something in Email Signature Generator? Suggest a feature →
Tell someone who needs this.