How to Add a Banner to Your Email Signature (Without Breaking It)
· 6 min read
Why add a banner at all?
A signature banner is a small, clickable image placed beneath your contact details. It turns everyday email — a channel you already use constantly — into gentle promotion: a product launch, a webinar, a seasonal offer, a link to book a call, or an award you just won. Because it rides along on messages you were sending anyway, a banner is one of the lowest-effort marketing placements you have. The catch is that a banner is also the part of a signature most likely to render badly if you rush it.
Step 1: Design the banner at the right size
Match the banner's width to your signature so the layout stays tidy. Most signatures sit between 400 and 600px wide, so design your banner to that width and keep the height modest — roughly 90 to 150px. A banner taller than your actual message content looks pushy and eats the reader's screen on mobile.
- Export at 2x resolution for sharp display on high-density screens, then set the on-screen width with the image's width attribute.
- Keep the file lightweight — compress it so it loads instantly and doesn't bloat your emails.
- Put any important text and your call to action within the image, but also plan for the image being blocked (more on that below).
Step 2: Host the image on a public URL
Never embed the banner as pasted or base64 data — that inflates every message and can trip spam filters. Instead, upload the banner to a public URL and reference it with a normal image tag. Hosting has a second benefit: you can swap the image at the destination URL to run a new campaign without editing the signature in everyone's mail client, as long as you keep the filename and dimensions the same.
Step 3: Place it below your signature in a table row
Add the banner as its own full-width row beneath your contact block, inside the same table that structures the signature. Keeping it in the table — rather than floating it — is what keeps Outlook from shoving it out of place. Set explicit width and height attributes on the image so the layout doesn't shift while it loads and Outlook doesn't rescale it awkwardly.
Step 4: Make the whole banner clickable
A banner that isn't linked is a wasted opportunity. Wrap the image in an anchor tag pointing to the relevant page — the offer, the signup form, the booking link. Use a full https:// URL to your own domain rather than a shortener, which both looks more trustworthy and avoids reputation issues.
Send the banner to a page built for the click. A banner promoting a webinar should land on the webinar registration page, not your generic homepage.
Step 5: Write alt text for blocked images
Many clients block images by default, so a meaningful alt attribute is essential. Instead of "banner.png," describe the offer — for example, "Join our free product webinar on March 12." When images are off, that text still delivers your message and remains clickable through the surrounding link.
Step 6: Test across clients and on mobile
Before rolling it out, send yourself a test and check three things in Outlook, Gmail, and Apple Mail:
- The banner sits directly under your details with no unexpected gaps.
- Clicking it opens the correct page.
- On a phone, it doesn't force horizontal scrolling or shrink into illegibility.
Outlook is the strictest renderer, so if the banner behaves there, it will behave nearly everywhere.
Keep it fresh, and keep it honest
A banner works because it is timely. Update it when the campaign changes, and remove it when the offer ends — a stale banner promoting last quarter's event undercuts your credibility. Resist the urge to stack multiple banners; one clear message outperforms a cluttered strip of competing calls to action.
The easier path
Hand-placing a banner row, sizing the image, linking it, and adding alt text is fiddly to get right in raw HTML. Signature tools such as Sigmint include a banner option in their templates, so you can drop in a hosted image and a link and get correctly structured, client-tested markup out the other side. However you build it, the fundamentals are the same: right size, hosted image, real link, honest alt text, and a quick test before it goes on every email you send.
Build a signature that renders everywhere
Free, no signup, no watermark. Copy it in under a minute.
Open the generator →