Skip to main content

Image Sizes & Design Guidelines for Your Community Hub

This guide lists every image you can upload to your Zealot Community Hub, the recommended size for each, and how it's displayed to advocates. Following these specs keeps your hub crisp on every screen.

T
Written by Tom Aristone

Universal Rules (All Images)

  • Max file size: 10 MB (JPG, PNG, GIF, WebP); SVGs max 2 MB

  • No automatic resize/crop: What you upload is what advocates see, scaled to fit

  • Match recommended dimensions exactly to avoid unexpected cropping

  • Text overlay: Most surfaces auto-generate text (titles, CTAs, timers, countdown) — upload clean backgrounds only, no baked-in text

  • Test at smallest display size before uploading


Image Specs by Asset

Hub Home Banner

The hero strip across the top of your hub home page.

  • Size: 1600 × 200 px

  • Aspect ratio: 8:1 (wide)

  • Formats: PNG, JPG, WebP

  • Display: Fixed at 120 px tall, full width; top/bottom cropped as needed

  • Tip: Keep key visuals centered — edges will crop. Leave empty to use default animated gradient.

Mission Cards

Action cards in your hub feed (surveys, content, events, etc.).

  • Size: 800 × 800 px

  • Aspect ratio: 1:1 (square)

  • Formats: PNG, JPG

  • Display: Used as cover background; platform overlays title, points, timer, CTA

  • Safe zones: Top-left has countdown timer; top-right has icons; bottom has title & CTA — keep critical art centered

  • Tip: Clean, center-weighted square reads best across all layouts.

Rewards

Reward catalog images displayed in square tiles.

  • Size: 800 × 800 px

  • Aspect ratio: 1:1 (square)

  • Formats: PNG, JPG

  • Display: Centered in square tile with rounded corners

  • Tip: Product shots on clean/transparent background work best; keep subject centered.

Badges

Achievement icons shown on profiles, in earn pop-ups, and on level cards.

  • Size: 512 × 512 px

  • Aspect ratio: 1:1 (square)

  • Formats: PNG with transparent background required

  • Display: As small as 64 × 64 px, up to ~128 px in modals; often shown in circular containers

  • Tip: Keep design inside a centered circle (~400 px of the 512) to avoid clipping. Simplify and center.

Event Imagery

Images for events shown as card thumbnails and event detail banners.

  • Size: 1200 × 800 px

  • Aspect ratio: 3:2 (enforced crop)

  • Formats: PNG, JPG, WebP

  • Display: Center-cropped as card thumbnail and wider modal banner

  • Tip: Keep key content centered — edges crop on smaller cards.

Brand Logos & Icon

Configured in Settings → Customize. Three separate assets:

Brand Icon

  • Size: 512 × 512 px

  • Formats: PNG, JPG

  • Used for favicon and mobile

White Logo

  • Size: ~400 px wide

  • Formats: PNG with transparent background (required)

  • Use on: Dark/colored backgrounds (email headers, colored nav)

Colored Logo

  • Size: ~400 px wide

  • Formats: PNG, JPG

  • Use on: Light backgrounds

Tip: Provide both white and colored logos. Use transparent PNGs so no white box shows.

Favicon

Small icon in browser tab.

  • Size: 32 × 32 px or 64 × 64 px

  • Aspect ratio: 1:1 (square)

  • Formats: PNG, ICO, JPG

  • Falls back to: Brand Icon, then colored logo if not set

Profile Avatar (Advocate-Uploaded)

Photos advocates upload in Settings.

  • Size: 300 × 300 px

  • Aspect ratio: 1:1 (square)

  • Formats: JPG, PNG, GIF

  • Display: Circular, ~80 × 80 px in hub; smaller in lists and comments

  • Falls back to: Advocate's initials if no photo set

Loader Animation

Optional animated loading screen for your hub.

  • Format: Animated GIF only

  • Shape: Square works best (displayed small, centered)

  • Tip: Leave empty to use default loader.

Community & Space Images

Cover images for community spaces and advocate-posted content.

  • Size: Any; max 10 MB

  • Aspect ratio: Any (no fixed dimensions)

  • Formats: PNG, JPG, GIF

  • Display: Scaled-to-cover

  • Tip: Use reasonable landscape for space covers; keep subject centered.


Level & Tier Cards

Loyalty levels/tiers reuse badge and reward images. Follow specs above and cards auto-format correctly.


Quick Specs Reference

Asset

Size

Aspect

Formats

Hub home banner

1600 × 200

8:1

PNG, JPG, WebP

Mission cards

800 × 800

1:1

PNG, JPG

Reward image

800 × 800

1:1

PNG, JPG

Badge

512 × 512

1:1

PNG (transparent)

Event image

1200 × 800

3:2

PNG, JPG, WebP

Brand icon

512 × 512

1:1

PNG, JPG

Logo (white)

~400 px wide

PNG (transparent)

Logo (colored)

~400 px wide

PNG, JPG

Favicon

64 × 64

1:1

PNG, ICO, JPG

Profile avatar

300 × 300

1:1

JPG, PNG, GIF

Loader

square

1:1

GIF

Community images

any

any

PNG, JPG, GIF


Best Practices

  • Keep text and logos within the centered safe zone of every image

  • Don't bake system-generated text (titles, points, CTAs, timers, countdowns) into uploads

  • Use high-resolution PNG or JPG; use transparent PNG for badges and white logo

  • Match the recommended aspect ratio exactly to avoid surprise cropping

  • Preview every image at its smallest display size before uploading

Did this answer your question?