Email Signature Generator
Twenty Clean HTML Templates for Gmail and Outlook

What the Signature Generator Builds for You

An email signature generator creates the contact block that closes each message you write. You type your name, your role and your links. The page then draws a neat signature and writes the code behind it.

That code is plain HTML. Because it uses simple tables and inline styles, Gmail, Outlook and Apple Mail all show it the same way.

You get twenty templates, a photo, a logo, social icons, a banner and an optional button. Everything updates as you type, so you see each change at once.

This page draws the signature on your own device, with no help from a server. Your name, number and links never leave it.

Build an HTML Email Signature in Minutes

Begin with your full name and your job title. After that, fill in whichever of phone, email and website you want to show. Every field is optional, so a line you leave empty simply disappears.

The preview sits right beside the form. When it looks right, press Copy for Gmail. Expect the entire task to last around two minutes.

Twenty Email Signature Templates

Every template shows your own details, so you can compare them side by side. Classic puts a photo on the left. Stacked keeps everything in one column. Banner adds a coloured header, and Dark gives a bold card. Split panel, Night and Gradient use bold colour blocks for a polished look.

Others include a side bar, a centered layout, a one-line version, a card, two columns, a ribbon and a soft panel. Click one, and the preview changes at once.

Bring In Your Photo and Company Logo

Gmail needs a public link for every picture. So upload your photo to your website or an image host, and paste its address into Photo link. A logo follows the same rule.

Prefer a look at the result before you commit? Choose a file under Preview a photo. It shows in the preview only. Without a link, the signature uses a round badge with your initials instead.

Why Gmail Needs Image Links

Gmail does not keep pictures that you embed inside the code. It fetches each one from a web address when the message opens. A link such as https://example.com/me.jpg is therefore the safe way.

Keep each picture small, under 200 KB, and use https. As a result, your signature loads fast and no warning appears.

Social Icons That Work in Email

Many generators use icon pictures hosted on their own servers. Those can break, and mail apps often block them. This one draws each icon as a small coloured badge made of plain text, such as in for LinkedIn.

As a result, the icons need no hosting and no pictures at all. Pick round or square badges, brand colours or your accent colour, or switch to simple text links.

Choose an Accent Colour Your Readers Can Read

Pick an accent colour, and the tool uses it for links, dividers and badges. It also checks the colour against white. Text should reach a contrast of at least 4.5 to 1, a rule from the Web Content Accessibility Guidelines.

A pale colour fails that test, and the Quick checks list tells you so. Choose a darker shade, and your links stay easy to read for everyone.

Fonts and Sizes Mail Apps Trust

Email apps only draw fonts that the reader already has. So the font menu lists six safe choices, such as Arial, Verdana and Georgia. Each one comes with a fallback.

So keep the size between 13 and 15 pixels. Smaller text is hard to read on a phone, and larger text makes the signature louder than your message.

Add a Banner Under Your Signature

A banner turns your signature into a small advert. Type a short line, such as Free strategy call this week, and the tool draws a coloured banner from your accent colour. Add a link, and the whole banner becomes clickable.

Prefer a picture? Paste the link of a banner image instead. Keep it about 460 pixels wide and under 100 KB, so it loads fast. Then pick Banner on top if you want it above your name.

Add a Button and a Short Note

A button gives readers one clear next step, such as Book a call. Type the text and a link, and the tool builds a button that works in every mail app. Choose a filled, outline or pill style.

Meanwhile, the note box is for a short legal line or a tagline. Keep it brief. Long disclaimers push your contact details out of view.

Putting the Signature Into Your Gmail Settings

First, press Copy for Gmail. After that, open Gmail, press the gear icon and pick See all settings. Then, under General, scroll to Signature and press Create new. Name it, click in the box and paste.

Finally, choose when the signature appears and press Save changes at the bottom. Google explains each step in Create a Gmail signature.

Copy for Gmail or Copy HTML Code

Copy for Gmail copies the finished, formatted signature. Paste it into the Gmail signature box and it looks like the preview. This is the one to use for Gmail.

However, Copy HTML code copies the raw code. Use it in tools that ask for HTML, such as many mail apps and website editors. The code can be saved as a file as well.

Outlook and Apple Mail

Outlook and Apple Mail both have a signature box in their settings. Paste the formatted signature there, the same way you did in Gmail. Because the code uses tables, it holds its shape in all of them.

The Gmail Signature Length Limit

Gmail signatures stop at about 10,000 characters. The Characters box shows your count, and the checks warn you when you come close. A short signature rarely gets near the limit.

If you do pass it, remove the note or a social link. Most readers will never notice they are gone.

What Gives a Signature a Professional Feel

Keep it short. For example, a name, a role, one phone number, one website and a few links are enough. Leave out quotes, long legal notices and oversized banners.

Use one accent colour. Also keep the width under 500 pixels. And add alt text to every picture, so people who cannot see images still get your name.

Why the Code Uses Tables

Email apps ignore most modern CSS. They do not support layouts built with flex or grid. Tables with inline styles are the one method that works everywhere, so every template here uses them.