Key takeaways
- Keep the whole signature under about 600 px wide and roughly 100 to 200 px tall.
- Save every image at twice its display size, and set the display size in the HTML.
- Use PNG or JPG under 100 KB each. Avoid SVG: Gmail and Outlook don't show it.
In this article
You've designed a lovely signature. Then a colleague replies, and your logo is the size of a billboard. Or it's a fuzzy smudge. Or it's been replaced by a little broken-image icon.
Almost every one of those problems comes down to size. Here are the dimensions that work, and the reason behind each, so you can get it right the first time.
The quick answer
| Element | Display size | Save it at | Format |
|---|---|---|---|
| Whole signature | Up to 600 px wide, about 100 to 200 px tall | (not an image) | HTML text |
| Headshot | 80 to 100 px square | 160 to 200 px | JPG |
| Logo | 120 to 200 px wide, about 40 to 60 px tall | Twice the display size | PNG |
| Social icons | 16 to 24 px | 32 to 48 px | PNG |
| Banner | Up to 600 px wide, about 100 to 150 px tall | Up to 1200 px wide | JPG or PNG |
Keep each image file under 100 KB, and ideally much smaller. A whole signature with all its images should weigh less than a typical photo you'd send from your phone.
Why "save it at twice the size"?
Modern phones and laptops have high-resolution screens that pack two or three pixels into the space of one. An image saved at exactly its display size looks soft on those screens.
The fix is simple: save the image at twice the size, then tell the email to show it at the display size. A 100 px headshot is saved as a 200 px image with width="100" in the HTML. It looks crisp everywhere and still loads quickly.
The right file format
- JPG for photos. It keeps file sizes small, and photos rarely need transparency.
- PNG for logos and icons. It keeps sharp edges and supports transparent backgrounds.
- GIF only if you need animation, and keep it tiny. Older versions of classic Outlook for Windows show only the first frame, so make sure that frame works on its own.
- Not SVG. It's perfect for websites, but Gmail and many versions of Outlook don't display SVG images in email at all.
- Not WebP for now. Support in email apps is still patchy, so stick with JPG and PNG.
How wide should an email signature be?
600 px is the safe maximum, and most signatures look best between 400 and 500 px. Wider layouts get squeezed on phones and in reading panes, which wraps text in odd places.
Height matters less, but if your signature is taller than about 200 px it starts to feel heavy, especially in long threads where it repeats under every reply.
Logos that don't disappear in dark mode
A dark logo on a transparent background vanishes when the reader uses dark mode. Two easy fixes:
- Give the logo a white or light background, with a little padding, inside the image itself.
- Or use a version of your logo with a subtle light outline.
Check the result with the dark-background preview before you roll it out.
Social icons: small, but easy to get wrong
Social icons are the smallest images in your signature, and the ones people most often get wrong. A few rules keep them tidy:
- Display them at 16 to 24 px. Smaller is hard to tap on a phone; larger starts to look like a row of buttons shouting for attention.
- Use one style for all of them. Mixing a round blue LinkedIn icon with a square black X icon looks messy. Pick all brand colors, all monochrome or all outlined.
- Leave a few pixels of space between icons, so a thumb on a phone hits the right one.
- Three or four icons at most. Each one competes with your name and phone number.
Five sizing mistakes we see all the time
- Pasting a logo straight from the website. Website logos are often 1,000 px or wider, and some email apps will show them at that size.
- Shrinking an image by dragging its corner in the email editor. The file stays large, and the next app you paste it into may ignore the new size.
- Saving photos as PNG. A PNG headshot can be five or ten times heavier than the same photo as a JPG, with no visible difference.
- Exporting at exactly the display size. It looks fine on your monitor and blurry on every phone.
- Forgetting the replies. A tall signature with a banner repeats under every reply, and a long thread turns into a scrapbook. Consider a lighter version for replies.
Hosting: where the images live
Images must sit on a public https:// address. If they're embedded in the email instead, they arrive as attachments and many apps show them in a list instead of in your signature. For more on this, see why email signature images don't show.
Let the generator do the math
The SignaturesDB editor handles all of this for you. It crops and saves photos and logos at twice their display size, keeps photos as JPG and logos as PNG, and writes the width and height into the HTML. You just pick the size that looks right in the preview.
Create your email signature for free
100+ templates that work in Gmail, Outlook and Apple Mail. No sign-up, ready in two minutes.
Frequently asked questions
What is the best size for an email signature?
Keep the whole signature under 600 px wide (400 to 500 px is ideal) and roughly 100 to 200 px tall. Individual images should be under 100 KB.
What size should a logo be in an email signature?
Display it at about 120 to 200 px wide and 40 to 60 px tall, and save it at twice that size as a PNG so it stays sharp on high-resolution screens.
Can I use an SVG logo in my email signature?
It's best not to. Gmail and many versions of Outlook don't display SVG images in email. Use a PNG instead.
Why is my email signature logo huge in Outlook?
The image probably has no width and height set in the HTML, so Outlook shows it at its full saved size. Set both attributes to the display size.
