Email signature builder
Fill in your details and copy a signature built from HTML tables and inline styles. It looks like 1999 in there, but that’s the only markup every mail app agrees on. The preview updates as you type and nothing is uploaded.
Nothing is uploaded. Your draft is saved in this browser only, and the logo is fetched from its URL just to draw the preview.
Your signature
SampleThis is how it will look under your messages. It redraws as you type.
View the HTML source
Add it to your mail app
Press “Copy the signature”, then paste (Ctrl+V or ⌘V) at the place described for your app.
Gmail in a browser
- Open the gear menu and choose See all settings.
- Stay on the General tab and go down to Signature. Press Create new and give it a name.
- Paste into the editing box, then select the signature under For new emails use and On reply/forward use.
- Press Save changes at the very bottom of the page.
The Gmail phone app has its own plain-text mobile signature. Keep that one empty and the app uses this signature.
Outlook on the web and the new Outlook for Windows
- Open the gear, then Account and Signatures.
- Press + New signature, type a name and paste into the box.
- Set it as the default for new messages and for replies, then press Save.
Classic Outlook for Windows
- Go to File, Options, Mail, then Signatures…
- Press New, type a name and paste into the large editing box.
- Pick it in the New messages and Replies/forwards lists, then press OK.
Logo too big? Right-click it in the editor, open Size and Position and type the width you chose on this page.
Apple Mail on a Mac
- Open Mail, Settings, then the Signatures tab.
- Select the account, press + and type a name.
- Clear the Always match my default message font box, then paste into the right-hand pane.
The settings window may draw a question mark where the logo goes. That is expected. The logo shows in the messages you send.
iPhone and iPad
- Open this page on the device itself, fill in the fields and tap Copy the signature.
- Go to Settings, Apps, Mail, Signature (on older iOS versions: Settings, Mail) and paste.
iOS keeps only some of the formatting, so the Compact template survives best. If the pasted result loses its formatting, shake the device and tap Undo to get the formatted version back.
Why signatures fall apart
A web page gets displayed by a browser that follows current standards. An email gets displayed by whatever the recipient happens to use, and those programs don’t agree on much. Classic Outlook for Windows lays out messages with the engine of Microsoft Word. Gmail removes style sheets from content it considers unsafe. The little editor where you paste a signature strips out even more.
What survives everywhere is a short list: <table> for layout, style attributes written on each element, plain links, and images with explicit width and height. This builder sticks to that list. Text is 14 pixels in a font every device already has (Arial, Verdana or Georgia), the table carries role="presentation" so screen readers don’t announce it as data, and the whole block is capped at 600 pixels wide.
What each field becomes
- Phone numbers
- A
tel:link, so a tap on a phone starts the call. A 10-digit number is assumed to be North American and gets+1. For any other country, type the number with+and the country code, as in+44 20 7946 0958. An extension typed asext. 204orx204is added after a pause:tel:+14155550123,204. A number with fewer than seven digits is left out. - Email and website
- A
mailto:link if the address has the shapename@domain.tld. The website getshttps://in its link and is displayed without it and withoutwww. - Social profiles
- Text links named after the service found in the URL: Facebook, Instagram, LinkedIn, YouTube, X, Bluesky, GitHub and about ten others. An address we don’t recognize shows its host name.
- Logo
- An
<img>that points to the address you give, between 40 and 300 pixels wide. The tool loads the image once to learn its proportions and writes the matchingheight, because Outlook stretches images that don’t have one. - Small print
- A confidentiality or legal line in 11-pixel gray under the signature.
The warnings and what to do
| Warning | Why it matters |
|---|---|
| Accent color under 4.5:1 on white | The color is used for links and the company name. Below that contrast ratio, people with low vision have a hard time reading them. Pick a darker shade. |
Embedded logo (data:) | Many mail apps block it or turn it into an attachment on every message. |
Logo over http:// | Mail apps running on secure pages refuse insecure images. |
| SVG logo | Gmail and Outlook don’t display SVG. Export a PNG or JPG. |
| Logo on Google Drive, Dropbox or OneDrive | A share link opens a viewer page, not the image file. |
| Logo does not load | Open the address in a private window. You should see the image and nothing else, with no login. |
| Very large or too small | Over 1,200 pixels wide slows down every message. Narrower than the display width looks blurred. Aim for twice the displayed width. |
Choosing a layout
- Logo on the left is the default: two columns separated by a vertical line in your accent color.
- Classic stacks everything in one column with the logo last. It holds up best when an app drops table columns.
- Accent rule opens with a horizontal colored line and keeps the contact details on one row.
- Compact is two lines with no logo. It’s the one for replies and for phone mail apps, which keep little formatting.
Plenty of people keep two, a full one for new messages and the compact one for replies. Before you settle, press “Preview in dark mode” to send the signature to the dark mode email preview and see whether the logo and colors hold up on a dark background.
What the builder does not do
It doesn’t host your logo, so the image has to be online already at a public address. It draws no social media icons, and that’s on purpose: each icon is one more remote image that can get blocked. It can’t show how a given version of Outlook will render the result, so send yourself a test message once the signature is installed. Your draft is stored in this browser only. Open the page on another device and you’ll find an empty form.
Questions people ask
How do I add an HTML signature in Gmail?
Press “Copy the signature” here. In Gmail, open the gear menu, See all settings, General, Signature, create a new one and paste. Choose it for new emails and for replies, then save at the bottom of the page.
Why does my logo arrive as an attachment?
The image was embedded in the message. Mail apps then send the file along with every email, and many recipients see it as an attachment. Link to an image hosted on a web server and the problem goes away.
What size should a signature logo be?
Displayed between 100 and 200 pixels wide, from a file about twice that width so it stays sharp on high-density screens. Keep the file under roughly 50 KB. PNG suits flat logos, JPG suits photos.
Should my whole signature be one image?
No. Many mail apps block images by default, screen readers can’t read them, they don’t adapt to dark mode, and nobody can tap or copy a phone number that’s part of a picture. Use real text and keep the image for the logo.
Can I use my brand font?
Not reliably. Gmail and Outlook ignore web fonts, and the text falls back to a default. Arial, Verdana and Georgia exist on practically every device, so the signature looks the same everywhere.
Why does the signature look different in replies?
Some apps convert replies to plain text or apply the formatting of the message being answered. Set a compact signature for replies, and check that your app composes in HTML and not in plain text.