Tiered Badge Visibility: Optimizing Subscriber Badges for Every Display Size

Subscriber badges display at three sizes, and your design must work at all of them. What looks stunning at 72 pixels might become an unreadable blob at 18. Tiered visibility ensures every viewer sees clear, recognizable badges regardless of their interface or device.

This guide covers designing for all badge display sizes.

Understanding Badge Display Sizes

Where and how badges appear.

The Three Tiers:

Standard badge sizes:

• 18x18 pixels (smallest, most common)
• 36x36 pixels (2x, retina displays)
• 72x72 pixels (largest, hi-DPI)

Display Contexts:

Where badges appear:

• Chat messages (usually smallest)
• Hover/profile views (may be larger)
• Different screen densities
• Various device types

Size Reality:

What each tier means:

• 18px: Thumbnail tiny
• 36px: Still very small
• 72px: Small but visible
• All require readability

Use EmoteShowcase's badges tool to preview badges at all three display sizes.

The Smallest Size Challenge

Why 18px is the critical test.

18px Reality:

What you're working with:

• Roughly 1/5 inch
• Extremely limited space
• Every pixel matters
• Maximum simplification required

Detail Loss:

What happens:

• Fine details disappear
• Colors blend together
• Text becomes illegible
• Complexity becomes noise

Design Implications:

What this means:

• Design for smallest first
• Simplicity is required
• Bold shapes survive
• Subtle dies

Design-First for Small

Starting with constraints.

Smallest-First Approach:

Design strategy:

• Begin at 18px scale
• Ensure readability there
• Then expand for larger sizes
• Add detail up, not simplify down

Why This Works:

Practical advantage:

• Can't simplify well later
• Easy to add detail up
• Forces essential design
• Guarantees smallest works

Minimum Viable Badge:

Essential elements:

• What must be recognizable?
• Core identity
• Essential shape
• Readable at any size

Shape Optimization for Visibility

Shapes that survive sizing.

Bold Silhouettes:

Clear shapes:

• Distinctive outline
• Recognizable as silhouette
• Clear boundaries
• Strong shape identity

Simple Forms:

Reduced complexity:

• Basic geometric shapes
• Limited detail
• Clean construction
• Readable forms

Negative Space:

Breathing room:

• Space around elements
• Clear separation
• Not cramped
• Visual clarity

Edge Definition:

Clear boundaries:

• Strong outlines
• Defined edges
• Clear where badge ends
• Crisp boundaries

Color for Multi-Size Visibility

Color choices that work at all sizes.

High Contrast:

Visibility essential:

• Strong light/dark contrast
• Colors don't blend at size
• Clear color separation
• Readable combinations

Limited Palette:

Color simplicity:

• Few colors in design
• Each color distinct
• No subtle variations
• Bold color choices

Test Backgrounds:

Background compatibility:

• Light Twitch theme
• Dark Twitch theme
• Both must work
• No mode fails

Color Separation:

Adjacent colors:

• Don't place similar colors together
• Clear color boundaries
• Distinct at small size
• No color confusion

Detail Scaling Strategy

Managing detail across sizes.

Size-Specific Detail:

Different versions:

• 18px: Maximum simplification
• 36px: Moderate detail
• 72px: Full detail possible

Same Design, Different Detail:

Consistent identity:

• Same basic design
• Detail level varies
• Recognition maintained
• Appropriate to size

What to Add/Remove:

Detail hierarchy:

• Essential: Shape, main color
• Secondary: Some detail, texture
• Tertiary: Fine lines, small elements
• Remove bottom-up for smaller sizes

Testing Visibility

Verification methods.

Actual Size Testing:

Real preview:

• View at actual pixel sizes
• No zooming during test
• Real display assessment
• Honest evaluation

Distance Testing:

Viewing conditions:

• View from normal distance
• Simulate casual viewer
• Quick glance readability
• Natural viewing test

Side-by-Side Testing:

Tier comparison:

• All sizes together
• Consistency check
• Identity maintained?
• Progression visible?

Multi-Device Testing:

Platform variation:

• Different screens
• Different densities
• Mobile and desktop
• Real-world conditions

Preview all sizes instantly with EmoteShowcase's badge preview.

Common Visibility Problems

Issues and solutions.

Problem: Detail Mud

Issue: Fine detail becomes noise Cause: Too much detail for size Solution: Simplify, remove fine elements

Problem: Color Blending

Issue: Colors merge at small size Cause: Similar colors adjacent Solution: Higher contrast, distinct colors

Problem: Lost Identity

Issue: Can't tell what badge is Cause: Essential shape not clear Solution: Strengthen primary silhouette

Problem: Edge Confusion

Issue: Unclear where badge ends Cause: Weak outline or boundary Solution: Stronger edge definition

Problem: Invisible Elements

Issue: Key features disappear Cause: Elements too small/subtle Solution: Enlarge or remove

Tier-Specific Optimization

Designing for each size.

18px Optimization:

Smallest size focus:

• Maximum simplification
• Bold, clear shapes only
• High contrast essential
• Nothing subtle survives

36px Optimization:

Middle ground:

• Core design clear
• Some detail possible
• Balance simplicity and interest
• Readable without squinting

72px Optimization:

Largest size:

• Most detail possible
• Visual interest can increase
• Still badge, not illustration
• Quality at full view

Consistency Across Sizes

Same badge, different scales.

Identity Preservation:

Recognition at any size:

• Same basic design
• Recognizable scaling
• Consistent colors
• Clear same badge

Intentional Variation:

Appropriate differences:

• Detail level varies
• Same identity
• Size-appropriate execution
• Thoughtful scaling

Avoid:

Problematic approaches:

• Different designs per size
• Unrecognizable at size
• Random variation
• Inconsistent identity

FAQ: Tiered Badge Visibility

Why do my badges look good in design software but bad in Twitch?

Design software often shows zoomed view. You're not seeing actual size. Always test at actual pixel dimensions, not enlarged.

Should I create separate designs for each size?

Same design, potentially different detail levels. The badge should be recognizable across sizes. Major redesign per size creates confusion.

How do I test 18px when my screen shows it so tiny?

Create preview at actual dimensions. Don't zoom. If you can't see it clearly at that size, neither can viewers. That's the test.

What if my detailed badge just doesn't work at 18px?

Simplify the design. The small size is non-negotiable reality. Redesign for constraints rather than fighting them.

Do viewers actually see badges at 18px?

Yes—especially on lower-density displays or when chat moves quickly. Design for worst-case visibility. Many viewers see smallest version.

Can I use more detail since some viewers see 72px?

Yes, 72px version can have more detail. But 18px must still work. Design smallest-first, add detail for larger versions.

Visibility Checklist

Pre-submission verification.

18px Check:

Smallest size:

• Shape recognizable?
• Colors distinct?
• Not muddy or blobby?
• Clear what it is?

36px Check:

Medium size:

• Detail appropriate?
• Readability maintained?
• Identity clear?
• Quality acceptable?

72px Check:

Largest size:

• Full detail working?
• Quality at close view?
• Consistent with smaller?
• Professional appearance?

Background Check:

Theme compatibility:

• Works on light mode?
• Works on dark mode?
• Visibility maintained?
• No mode problems?

Use EmoteShowcase's toolkit for comprehensive badge visibility testing before submission.

Tiered badge visibility isn't optional—it's the reality of how badges display. Design for 18 pixels first, ensure readability at every size, and create badges that represent your channel clearly regardless of how viewers see them. The constraints are fixed; your design must adapt to meet them.