Email Signature Size Guide: Logo, Images, Icons and Layout

How sizing works in email (and why it's different from the web)

On a webpage, you can use responsive CSS, viewport units, and media queries to make images adapt to any screen. Email clients don't reliably support most of that. Gmail strips certain CSS. Outlook (desktop) uses Word's rendering engine, which treats HTML like it's 2003. Apple Mail does better, but still has quirks.

The practical consequence: email signatures need fixed-width images, set in the HTML attributes directly, not just via CSS. If you set an image's display width in CSS and the email client ignores the CSS, the image renders at its full file resolution — which might be 600px when you wanted 140px.

The safe method is: export your image at 2× the display size you want (for retina sharpness), then set the HTML width attribute to the display size. A logo you want to appear at 140px wide should be exported as a 280px file, with width="140" in the HTML. Signoff Studio handles this automatically when you upload via the builder — this section gives you the right numbers to work from.

Logo dimensions

The working range for a horizontal logo is 100–180px display width (meaning the width attribute in the HTML, not the file size). Below 100px, horizontal logos become hard to read and lose detail. Above 180px, they start to dominate the signature and look more like a banner header than a professional identifier.

For stacked or square logos and monograms, the working range is 60–100px display width. These marks have less horizontal real estate to work with and tend to read as icons rather than full wordmarks, so they work at smaller sizes without losing legibility.

Export the file at 2× the display width for retina. A 140px-display logo should be exported as a 280px file. This keeps it sharp on high-DPI screens (most modern laptops and phones) without being oversized on standard-DPI screens where the HTML width attribute scales it down.

Logo file format and size

Use PNG for logos. PNG handles flat color, sharp edges, and transparency better than JPG. A JPG logo will often show compression artifacts around the edges of letterforms — most noticeable on a white background against a white email client pane.

Keep the file size under 50KB. Email clients load the logo on every email open; a heavy image file slows render time and, in some configurations, triggers spam scoring systems that flag large attachments. Most clean logo PNGs at the sizes above come in well under 50KB — if yours is bigger, it probably has unnecessary metadata or can be re-exported with better compression.

SVG would be ideal for logos — infinitely scalable, tiny file size — but SVG is blocked by most email clients for security reasons. Stick to PNG.

Profile photo dimensions

Profile photos in email signatures are typically displayed as circles or squares. The working display size is 80–120px. Below 80px, faces become hard to read and the photo loses the warmth it's meant to provide. Above 120px, it competes with the text block for dominance.

Export at 2× display size: a 100px display photo should be exported as a 200px file. Keep faces well-centered in the crop — circular masks hide the corners, so a face that's slightly off-center in the square file can end up very off-center after the circular crop.

File size under 80KB. Photos compress better than logos (JPG is appropriate here), but email is not the place to attach a full-resolution portrait from a DSLR. Resize and export specifically for this use. A photo that's 3MB in the signature is slowing down every email thread it appears in.

Social icon and UI icon dimensions

Social icons — LinkedIn, Instagram, X, and similar — work best at 16–24px display size. At 16px they're recognizable as platform icons without drawing attention away from the contact information. At 24px they have a little more presence, which is appropriate if the icons are your primary link mechanism rather than a supplement to text links.

Keep spacing between icons consistent — 8–12px between each one. Irregular spacing looks accidental. Use one visual style throughout: all filled, all outlined, or all flat. Mixing a filled LinkedIn icon with an outlined Instagram icon is a design inconsistency that reads as assembled rather than designed.

Don't use more than four or five social icons. Beyond that, the row starts to feel like a social media landing page rather than a professional contact block. If you have six active platforms, pick the two or three where your professional presence is strongest and link only those.

Overall signature width

Keep the total signature width at or under 600px. This is the established safe width for email content broadly — it's wide enough to be readable on most desktop email clients and narrow enough not to force horizontal scrolling on smaller screens or devices.

Most email clients render content in a column well under 700px, and on mobile the column narrows to 320–390px. A signature built at 600px will reflow or scale down on mobile. A signature built at 750px will be cut off or force horizontal scroll on most phones — and will look like a broken design, not a wide one.

If you're using a two-column layout (photo on the left, contact block on the right), the combined width should stay within 600px. Each column should have a deliberate proportion — not a 50/50 split, which looks arbitrary, but something like 100px for the photo and 480px for the contact block.

Banner dimensions and when to skip them

Promotional banners — an announcement, a campaign link, a seasonal message — occasionally make sense in a signature. When they work, they're compact and purposeful. When they don't, they dwarf everything above them and push the actual contact information out of view.

If you use a banner: keep it under 600px wide (same as the overall signature) and under 80–100px tall. Anything taller starts to feel like a second email below the signature. Use a single image with an embedded link, not multiple elements. And plan for what happens when the campaign ends — if you don't have a clear process for removing or updating the banner, it will outlive its relevance.

For most signatures, the case for a banner isn't strong enough to add one. The contact block, the CTA button, and the portfolio or website link already do the conversion work. A banner competes with those for the reader's attention without adding a different type of value.

Spacing and mobile-specific considerations

Vertical spacing in a signature has a narrow working range. Too little and the signature looks cramped; too much and it feels like a section of white space was accidentally appended to the email. The practical target: 4–8px between elements within a block (name, role, company in sequence), 12–16px between distinct blocks (contact block, social icons, CTA).

On mobile, tappable elements need to be large enough to hit without zooming. A CTA button should be at least 44px tall — Apple's Human Interface Guidelines use this as the minimum for tap targets, and it's a useful benchmark for email too. Text links in the contact block benefit from a little extra line-height (1.5–1.8×) so they don't run together when the signature reflowed to a narrow screen.

Send a test email to yourself and open it on your phone before rolling a signature out. This is the one step most people skip and the one that catches the most issues — a logo that forces horizontal scroll, a CTA button that's only 20px tall, a two-column layout that collapsed into a single column in a confusing order. The test takes two minutes; fixing the issue after it's in five hundred emails takes longer.

Quick reference: recommended dimensions

• Horizontal logo: 100–180px display width, exported at 2×, PNG, under 50KB.
• Square or stacked logo: 60–100px display width, exported at 2×, PNG, under 50KB.
• Profile photo: 80–120px display width, exported at 2×, JPG or PNG, under 80KB.
• Social icons: 16–24px display size, consistent style, 8–12px spacing between each.
• Overall signature width: 600px maximum.
• CTA button height: 44px minimum for tap target.
• Banner height: 80–100px maximum, 600px wide maximum.
• Vertical spacing within a block: 4–8px.
• Vertical spacing between blocks: 12–16px.