The short version
- A good email signature design keeps your name, role and contact details as live text and adds at most one small image banner.
- A signature banner works well at 600×200 pixels, a 3:1 strip that fits inside the narrowest email layouts.
- Exporting the banner at double size, 1200×400, and displaying it at 600 pixels wide keeps it sharp on high density screens.
- Many email clients block images until the reader allows them, so nothing essential should exist only inside the banner.
- A hosted image with a full https address keeps each email light, while a pasted image is often sent as an attachment on every message.
On this page
Good email signature design is mostly restraint: your name, role and one or two ways to reach you as real text, then one small banner image of 600×200 pixels that carries your brand. Keep the banner light, link it to one page, and never put your phone number or email address only inside the picture, because many inboxes hide images until the reader says otherwise.
What belongs in an email signature
A signature has two jobs: tell people who you are and how to reach you, and remind them what you do. The first job is text. The second can be a banner. Anything beyond that is clutter that people learn to skip.
Notes
Format
Notes
Format
Notes
Notes
https://Notes
Format
Notes
Email signature banner size and weight
Design the banner at 600×200 pixels, a 3:1 strip. Six hundred pixels is the width classic email templates are built around, so a banner that size fits in a phone's mail app and a desktop reading pane without scaling. For high density screens, export the same design at double size, 1200×400, and tell the email to show it at 600 pixels wide.
Signature banner 600×200
600 × 200
Email header 1200×600
1200 × 600
Business card 1050×600
1050 × 600
Weight matters more than you'd think, because the image travels with every reply in a long thread. Aim to keep the file well under 100 KB. A gradient banner exports beautifully as a high quality JPEG; use PNG only when you need transparency or very fine lettering. If you're also making a newsletter, the email header design guide covers the larger format.
Designing the banner
A banner seen a hundred times a week should say one thing and say it calmly. It works best as a quiet promotion: your next event, a new service, a booking link, or simply your brand's look with a short line. Change the words with the season; keep the background.
A photographer's banner: one timely line and the studio name.
A consultancy promoting one event. When it's over, swap the line.
Avoid
- Contact details only inside the image
- A banner of several hundred kilobytes
- Animated GIFs that loop forever
- Quotes, disclaimers and five social icons
- Small grey text that vanishes in dark mode
Do
- Name and links as live text
- A light 600×200 banner, under 100 KB
- A still image, or one gentle loop at most
- One call to action
- A banner with its own background, so it reads in light and dark mode
Dark mode is a real trap. Some mail apps invert or tint light colours, so a logo on a transparent background can disappear against a dark inbox. A banner that carries its own full background, such as a rich gradient, looks the same in both modes. Dark mode design and gradients in email go deeper on how clients treat colour.
HTML for an email signature that holds together
Email clients are old fashioned about layout, so signatures are built with simple tables and inline styles. This one works in the common clients: paste it into an HTML file, open it in a browser, select everything and copy it into your mail app's signature settings.
<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; color: #1f2937;">
<tr>
<td style="padding-bottom: 8px;">
<strong style="font-size: 15px;">Maya Okafor</strong><br>
<span style="font-size: 13px;">Founder, Studio Alder</span><br>
<a href="https://example.com/book" style="font-size: 13px; color: #1f2937;">Book a call</a>
·
<a href="https://example.com" style="font-size: 13px; color: #1f2937;">example.com</a>
</td>
</tr>
<tr>
<td>
<a href="https://example.com/weddings">
<img src="https://example.com/email/banner-1200x400.jpg"
width="600" height="200" alt="Studio Alder: now booking spring weddings"
style="display: block; border: 0; max-width: 100%; height: auto;">
</a>
</td>
</tr>
</table>Setting up your signature, step by step
- 1
Write the text block
Name, role and company, one link to act on, your website. Read it aloud; cut anything you wouldn't say.
- 2
Design the banner at 600×200
Use your brand background and one short line. Keep the words in the middle with room at both ends.
- 3
Export at 1200×400
A high quality JPEG for gradients and photos, PNG for transparency. Check the file is under 100 KB.
- 4
Upload it to your website
Put it in a stable folder such as
/email/, so the address never changes and old emails keep their banner. - 5
Build and paste the HTML
Adapt the code above, set the width to 600, write real alt text and paste it into your mail app.
- 6
Test it properly
Send it to a Gmail and an Outlook address, open it on a phone, switch dark mode on and off, and reply to the thread twice.
Keeping a team's signatures consistent
Signatures drift: one person adds a quote, another uses last year's logo. Give the team one HTML template and one banner, and change the banner centrally when the message changes. The same discipline described in brand consistency applies here, at a smaller size.
Gradiently has an Email signature size of 600×200 ready in the Studio, and a custom 1200×400 size covers the high density export. Free exports carry a small watermark, so a clean banner needs Pro, which also brings the brand kit: logo, colours and fonts in one place. The Mark behind the banner is the same one on your social posts and business cards, so a reply in someone's inbox looks unmistakably like the rest of your brand.
Questions people ask
What size should an email signature banner be?
Design it at 600×200 pixels. Export at 1200×400 and set the image width to 600 so it stays sharp on high density screens.
How big should an email signature image file be?
Keep it well under 100 KB. The image is sent or loaded with every email and every reply, so a heavy file adds up quickly.
Why does my email signature image show as an attachment?
Some mail apps attach pasted or uploaded images to every message. Host the image on your website and link to it with a full https address instead.
Should I put my phone number in the signature image?
No. Many email clients block images by default, and text inside an image can't be tapped or copied. Keep contact details as live text.
Can I use an animated GIF in my email signature?
You can, but keep it small and subtle. A looping animation on every email in a long thread quickly becomes distracting, and some clients show only the first frame.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile