How to Design a Banner Ad That Works on a Live Stream

A banner ad works on a live stream when a viewer can understand it in a two-second glance at a small size: one short message, large bold text, strong light-dark contrast, a recognizable logo, and a clean area for the QR code. Design at the streamer's exact pixel size, test it scaled down to 720p and on a phone, and export text-heavy designs as PNG.

Key takeaways

• Your banner is a small part of the frame, scaled down again by the stream's output resolution, then compressed. Design for that, not for your monitor.
• One message, a few words, big bold type. Fine print doesn't survive.
• Make text stand out by brightness, not just color. Live video usually stores color at lower resolution than brightness.
• On AD on Live, keep the left side of the banner clear for the QR code, and the top-right corner free for the small "Ad" label and countdown.
• Before uploading, check the design at 50% and 25% zoom, in grayscale, and on a phone.

Why stream banners are harder than web banners

A web banner is shown at its own size on a sharp screen. A stream banner goes through four steps that make it harder to read before anyone sees it:

1. It's a small part of a big frame. A 300 × 100 pixel banner on a 1920 × 1080 canvas covers about 16% of the width and 9% of the height.
2. It gets scaled. Streamers compose on a canvas, then software such as OBS outputs at the Output (Scaled) Resolution, which the OBS overview guide describes as "the resolution that the stream/recording will output at." A 1080p canvas streamed at 720p shrinks everything by a third.
3. It gets compressed. Live video is encoded in real time with lossy compression, and fine detail suffers first (more on color below).
4. It's watched on small screens. When Twitch launched Dual Format streaming in June 2026, it wrote that "Mobile is now the front door to Twitch." A banner that's roughly one-sixth of the frame width is roughly one-sixth of a phone screen's width.

And viewers are watching the game or the streamer, not your ad. Your banner gets glances, not reads.

How big will your banner really look?

Here's what happens to the default 300 × 100 banner in common setups:

Example calculations; streamers can also scale the overlay up or down in their software.

Then the viewer's player shrinks the whole frame to fit their screen. That 8-pixel line is likely unreadable on a phone. The 20-pixel headline has a chance. That's the whole design brief in one table: go big, say less.

Write for a two-second glance

Treat the banner like a billboard seen from a moving car, not like a web page.

• One message. Brand plus one benefit or offer. Example: your logo, "New co-op roguelike", and "Play free". As a rule of thumb we suggest staying under about seven words in total.
• A clear action. On a stream, the action is "scan". Something like "Scan for 20% off" (example) tells viewers what the QR code is for.
• No fine print. Terms, dates and disclaimers belong on the landing page, where people can read them.
• No URLs spelled out. The QR code carries the link. A short brand name is enough for people who'd rather search.
• A recognizable mark. On a phone, viewers may only register your logo and colors. Make the logo large and simple.

Typography: size, weight and font

Pick a bold sans-serif with simple shapes. Avoid thin, script, decorative and very condensed fonts. W3C's notes on WCAG contrast warn that thin fonts can render "with a much fainter color than the actual text color," and suggest choosing fonts with "stronger/thicker lines." On compressed video, that advice matters even more.

For size, here's a starting point to test (our suggestion, not an industry standard):

• Headline: about one-third of the banner's height (around 32 px on a 100 px tall banner).
• Anything else: no smaller than about one-fifth of the height (around 20 px).
• Lines: one or two lines of text, maximum.

If the words don't fit at those sizes, the fix is fewer words, not smaller type.

Contrast: brightness beats color

The WCAG 2.1 minimum for text is a contrast ratio of 4.5:1, or 3:1 for large text (at least 18 pt, or 14 pt bold). Treat that as the floor on a stream, not the target.

Here's why color alone fails. Live video is typically encoded with 4:2:0 chroma subsampling: a widely used color-format guide on the OBS forums notes that "for streaming, OBS Studio always forces subsampling 4:2:0." Microsoft's video documentation defines 4:2:0 as "2:1 horizontal downsampling, with 2:1 vertical downsampling" of the color channels. In other words, color is stored at half the resolution of brightness in each direction.

The practical result:

• Text that differs from its background mostly in hue (red on green, blue on purple, orange on pink at similar brightness) smears into the background.
• Text that differs in brightness (white on dark navy, black on yellow) stays crisp.

The grayscale test: convert your banner to black and white. If the headline gets hard to read, it will struggle on stream too.

A few more contrast habits:

• Put text on a solid or darkened panel, not directly on a busy photo.
• If text must sit on an image, add a subtle dark shadow or outline.
• Avoid hairlines, 1 px borders and tiny icons. They can shimmer or vanish after scaling and compression.

Leave room for the QR code and countdown

On AD on Live, the overlay places a QR code on the left side of your banner and a small "Ad" label with a countdown timer in the top-right corner, both on top of your artwork. Plan for it:

• Keep roughly the left third clear of text and logos. On a 300 × 100 banner, that's about the first 100 pixels (our recommended margin of safety).
• Keep that area plain. A solid color or a soft gradient lets the code stand out. QR codes need empty space around them: Denso Wave, the company that created the QR code, specifies "a four-module wide margin at all sides of a symbol", and busy artwork right next to the code works against that.
• Don't add a second QR code to your artwork. It would be smaller than the overlay's code and wouldn't be tracked.
• Point to it. A small arrow or "Scan" cue near the left edge connects your message to the code.

Our guide to QR codes on live streams covers scannability in depth.

Safe margins inside the banner

• Keep text and logos a little away from all edges. About 8–10% of the banner's height is a sensible inner margin.
• Keep nothing critical in the corners.
• Let the background run edge to edge. The image fills the whole slot, so a full-bleed background looks more finished than a floating box.

File formats and export settings

These recommendations follow MDN's image format guide, which says PNG "is preferred over JPEG for more precise reproduction of source images," notes GIF's 256-color palette, and warns that with lossy encoding "blurring and colored fringes around text and sharp edges are very visible."

Export tips:

• Design at the streamer's exact pixel size, or at exactly 2× or 3× with the same aspect ratio.
• Preview at 100% and judge it at that size, not zoomed in.
• Keep important detail away from where the upload cropper might trim if your ratio is slightly off.

Pre-upload checklist

• One message, about seven words or fewer.
• Headline around one-third of the banner height; nothing below about one-fifth.
• Passes the grayscale test; contrast comfortably above 4.5:1.
• Left third clear for the QR code, top-right corner clear for the "Ad" label and countdown (on AD on Live).
• No fine print, no spelled-out URL, no second QR code, no hairlines.
• Exact aspect ratio; PNG for text-heavy designs.
• Checked at 50% and 25% zoom and on a phone screen.
• Landing page matches the banner's offer and works on mobile. See how to track live stream ad results.
• Content you'd be comfortable showing to the streamer's community. Streamers can reject any ad, so check it against common brand-safety and platform rules first.

How this works on AD on Live

AD on Live lets anyone book a short, time-based banner slot on a streamer's overlay without creating an account:

1. Open the streamer's booking page (scan the QR code on their stream, follow a link or browse the channels directory). It shows the streamer's banner size.
2. Enter your email, an optional destination URL, and a duration of 1–60 minutes.
3. Upload a JPG, PNG or GIF up to 2 MB, crop it to the streamer's aspect ratio (it's resized to the exact pixel size automatically), review, and pay with PayPal.

At checkout, PayPal only authorizes the payment. Funds are captured when the streamer approves the ad (or immediately if they've enabled auto-approve and are on air when you book). If the streamer rejects it or doesn't respond within 3 days, the authorization is voided, so you're never charged for a rejected ad. While the ad runs, your banner appears with a QR code, a countdown and a small "Ad" label, and the code goes through a short tracking link that counts scans. You'll get email updates, including a completion summary with the click count. See how it works for the full flow.

Ready to put your banner on a live stream?

Good stream creative is simple: few words, big type, brightness contrast, a clear space for the code, and a test at real size before you upload. If you're planning a first campaign, start with our practical guide to live stream advertising, then find a streamer and book a slot.