Email Signature Builder: With Light and Dark Mode Support
An email signature is a small HTML table, and that is why it so often looks wrong. A photo that was fine on a white screen turns into a dark box. A phone number inherits the mail app’s link color. A row of icons breaks onto a second line because the table was never given a width.
The Email Signature builder below starts from a fixed table: image, name, title, phone, email, a short quote, and a row of icons. You fill the form. The preview and the HTML use the same email-client-safe markup, so changes in one show up in the other two.
Email Signature v1.7.8Last Update: Sep 28, 2026
Fill in the signature, switch light or dark, then copy the preview into your email program or download the HTML and icons.
Select the signature, then copy and paste it into your email signature settings.
Fill in the folder above and the preview and the HTML use that path for each icon. Leave it blank and they use our Cloudflare address. Hotlinking those images works, but every opened email then uses our bandwidth. Download HTML and icons, then upload the icon files into that folder. If the folder is blank, the downloaded HTML uses icons/ paths next to the HTML file, which mail programs will not show until the files are on a public URL.
Save Signature keeps this signature in this browser. It is not sent to or stored on our server.
What You Can Set
The image is a URL, so the signature points to a logo or headshot that is already hosted. The name is plain text. The title line can include a role, a company, or both, and it links to the website address if you provide one. Phone becomes a tap-to-call tel link. Email becomes a mailto link. The quote is the line under those, with its own address if you want the words to be a link. Leave a field blank, and that row drops out of the table.
The icon row uses the same round filled artwork for every icon you add. Each picture is a white mark on a disc in the link color, shown at 24 pixels inside the 400-pixel table. An empty address means that icon is left out. A short row stays on one line. Add more icons and the row wraps. Mail uses the email artwork, and WWW uses the website artwork.
The builder can generate these icons:
- Amazon
- Android
- Apple
- Blogger
- Bloglovin
- Bluesky
- Calendar
- Comments
- DeviantArt
- Discord
- Dribbble
- Dropbox
- Flickr
- GitHub
Light, Dark, and the Three Colors
Light mode uses a white background. Dark mode uses a near-black background and a lighter set of colors, because a dark gray name on a dark message is invisible. You can still set your own colors.
- Font color is the name, phone, email, and quote.
- Link color is the title.
- Accent color is the border around the table and the divider beside the photo.
Switching the preview between light and dark rewrites those colors in the HTML, so the file you download matches the frame you are looking at.
The icon files keep their own artwork. Recoloring them inside the signature would depend on CSS that Outlook and Gmail throw away. The text colors are inline, which those programs keep.
Paste It Into Your Mail App
Copy the signature from the preview below. Drag across the rendered table, not the HTML box under it, then paste into the signature field for the program you use.
Apple Mail
On a Mac, drag your mouse across the signature, copy it, and paste it into Mail’s signature field.
- Drag your mouse across the signature in the preview.
- Press Command-C.
- Open Mail, choose Mail in the menu bar, then Settings, then Signatures. On older macOS that menu item is Preferences.
- Select the account, click the add button, and name the signature.
- Turn off Always match my default message font. If that box stays on, Mail replaces the layout with plain text.
- Click in the signature field and paste.
Gmail
In Gmail, paste that same copied signature into the box on the General tab.
- Drag your mouse across the signature in the preview, then copy it. Use Command-C on a Mac or Ctrl-C on Windows.
- Open Settings and choose See all settings.
- On the General tab, find Signature and click Create new.
- Click in the signature box and paste.
- Choose the signature for new messages and for replies, then click Save Changes.
Outlook for Windows
Classic Outlook keeps its signature editor under File, Options, and Mail.
- Drag your mouse across the signature in the preview and press Ctrl-C.
- Open File, then Options, then Mail, then Signatures.
- Click New, name the signature, click in the editor, and paste. If the layout drops, paste again and choose Keep Source Formatting.
- Set that signature for new messages and for replies, then click OK.
Outlook on the Web and New Outlook
Outlook on the web and New Outlook for Windows use the same signature screen.
- Drag your mouse across the signature in the preview and copy it.
- Open the gear, then View all Outlook settings if that link is shown.
- Open Mail, then Compose and reply.
- Create a signature, paste into the signature box, set the defaults for new messages and replies, and save.
Outlook for Mac
Outlook for Mac takes the same copied preview and stores it under Settings.
- Drag your mouse across the signature in the preview and press Command-C.
- Open Outlook, then Settings, then Signatures. Older versions call this Preferences.
- Click the add button, click in the signature field, and paste.
- Choose that signature as the default, then close the window.
The steps above the preview are how that paste works in Apple Mail, Gmail, and Outlook. If you would rather hand the markup to someone else, edit the HTML underneath, then use Download HTML. The file is the same table the preview is showing. That HTML is only your details and the icons you chose.
Best of all, there’s no Powered by link, which other free signature builders place under the signature.
