The Exact Discord Banner Size Guide for Sharp, Clean Designs

Getting the right discord banner size prevents blurry images, awkward crops, and text that vanishes behind interface elements. Discord uses different dimensions for server banners and profile banners, and each has its own safe areas and quirks. Knowing those differences before opening Photoshop or Figma saves time and keeps your branding consistent.

This guide walks through exact pixel sizes, aspect ratios, safe zones, and export presets so your banners look sharp on both desktop and mobile.

Key Discord Banner Sizes at a Glance

Before diving into details, it helps to see the most important sizes side by side.

Core dimensions:

Server banner (server boost banner): 960 × 540 px (16:9)
Server invite splash / server discovery cover: 1920 × 1080 px (16:9)
Discord profile banner size (user profile): 600 × 240 px (2.5:1)

File formats and size limits (typical):

Formats: PNG, JPG/JPEG, GIF (for animated banners, Nitro only)
Recommended max file size: ≤ 10 MB (staying under 5 MB keeps uploads snappy)

Quick example:

If a gaming community wants a clean server banner that works on most screens, designing at 960 × 540 px, exporting as PNG, and keeping important text inside the central 70% of the image produces a banner that looks crisp and avoids UI overlaps.

Discord Server Banner Size and Layout

The server banner appears at the top of the channel list on desktop and in various discovery or preview contexts depending on boost level. It behaves more like a wide cover image than a traditional header.

Recommended Discord Server Banner Size

For a standard server banner:

Size: 960 × 540 px
Aspect ratio: 16:9
Orientation: Landscape

Discord scales and crops this banner slightly depending on window width. That means the outer edges are never fully safe. Treat the banner as a background canvas and keep key content away from the borders.

Practical example:

A tech support community wants its name and URL visible on all screens. The designer builds a 960 × 540 px banner, places the server name in the center, and keeps it at least 120 px away from the left and right edges. On ultra-wide monitors, the sides stretch, but the central text stays intact.

Horizontal and Vertical Safe Areas for Server Banners

Think of the banner as three horizontal zones and three vertical zones.

Horizontal zones (left to right):

Left bleed (unsafe): ~15% of width
Central safe area: ~70% of width
Right bleed (unsafe): ~15% of width

On a 960 × 540 px banner, that translates roughly to:

Left bleed: 0–145 px
Central safe area: 145–815 px
Right bleed: 815–960 px

Text, logos, and critical illustrations should stay inside the central 70%. Background gradients, abstract shapes, and subtle textures can extend into the bleed areas.

Vertical zones (top to bottom):

Top trim zone: ~10% of height
Core content zone: ~80% of height
Bottom trim zone: ~10% of height

On a 540 px tall banner:

Top trim: 0–54 px
Core content: 54–486 px
Bottom trim: 486–540 px

The Discord interface overlays the server name and some UI elements near the top, especially in compact layouts. Keeping important elements away from the top 10% reduces conflicts.

Example of safe placement:

Logo: centered horizontally, vertical position around 40–60% of the banner height
Tagline: directly below the logo, still within the central zone
Background pattern: extends into all bleed and trim areas without affecting readability

Difference Between Server Banner and Server Discovery Cover

Discord also uses a larger discord cover image when a server qualifies for discovery or uses a splash screen.

Server invite splash / discovery cover: 1920 × 1080 px (16:9)

This cover image behaves more like a traditional hero image on a website:

It often appears in marketing-like contexts where the image occupies a large portion of the screen.
It may be cropped or scaled on smaller screens but generally keeps the central area visible.

Design approach:

Start with a 1920 × 1080 px canvas.
Place crucial content (logo, main text) inside a safe rectangle of ~60% width and ~60% height in the center.
Extend artwork, patterns, and photos out to the edges.

For a coding bootcamp server, the designer may place a laptop illustration and the server name in the middle, then fade code snippets into the corners. On mobile, the center stays visible, while the corners crop gracefully.

Discord Profile Banner Size and Behavior

The discord profile banner size differs from the server banner and introduces a new complication: the avatar overlaps part of the banner.

Recommended Discord Profile Banner Size

For user profiles:

Size: 600 × 240 px
Aspect ratio: 2.5:1

This banner appears at the top of the user profile panel. Discord scales it, but the aspect ratio remains consistent. Designing at 600 × 240 px balances file size and clarity.

Example:

An illustrator wants a portfolio-like profile. A 600 × 240 px banner with a wide painting and no text keeps the artwork clean. The avatar overlaps a small, non-critical part of the painting, so nothing important is hidden.

Horizontal and Vertical Safe Areas for Profile Banners

Profile banners need both vertical and horizontal safe zones because the avatar sits near the left side.

Horizontal safe zones (left to right):

Avatar overlap zone: left ~30% of the banner
Primary content zone: middle ~50%
Right background zone: right ~20%

On a 600 × 240 px canvas:

Avatar overlap zone: 0–180 px
Primary content zone: 180–480 px
Right background zone: 480–600 px

The avatar circle usually overlaps roughly the left third of the banner. Exact pixels can shift slightly with interface updates, but keeping key elements to the right of 180 px is a safe baseline.

Vertical safe zones (top to bottom):

Top safe strip: 0–70 px
Middle safe strip: 70–170 px
Bottom safe strip: 170–240 px

Most UI overlays affect the left side more than the top or bottom, so the entire height can host important visuals as long as they stay clear of the avatar zone.

Concrete layout example:

A freelance developer wants a profile banner that highlights a tagline:

Background: subtle gradient across the full 600 × 240 px
Avatar overlap zone (0–180 px): abstract shapes only
Tagline: “Building fast, secure web apps” centered around x = 360 px, y = 120 px
Small icon: placed near the right edge at x = 520 px

On desktop and mobile, the avatar circle covers the abstract shapes, while the tagline and icon remain fully visible.

Nitro and Animated Profile Banners

Animated profile banners require Nitro and follow the same discord profile banner size of 600 × 240 px.

Design rules stay the same:

Keep motion subtle in the avatar overlap zone.
Avoid fast flickering or high-contrast patterns near text.
Export as GIF or short MP4/WebM if converting via a tool before upload.

A streamer, for example, can use a 600 × 240 px loop with a slow moving gradient and a static logo in the primary content zone. The animation draws attention without making the profile hard to read.

Server Banner vs Profile Banner: Key Differences

Although both are often called a discord cover image, server banners and profile banners serve different purposes and follow different rules.

Size and Aspect Ratio Differences

Server banner: 960 × 540 px, 16:9 ratio
Server discovery cover: 1920 × 1080 px, 16:9 ratio
Profile banner: 600 × 240 px, 2.5:1 ratio

The server banner behaves like a classic widescreen background. The profile banner is much more panoramic, with a strong horizontal emphasis.

Example:

A brand using the same artwork for both types will need two versions:

Server banner: full illustration with breathing room around the logo.
Profile banner: cropped, horizontal slice focusing on the logo and a short phrase.

Safe Area and Overlay Differences

Server banner:
- Risk: cropping on left and right edges.
- UI overlays near the top.
- Safe zone: central 70% horizontally, central 80% vertically.
Profile banner:
- Risk: avatar overlapping the left side.
- Safe zone: middle 50% horizontally, full height, plus right side.

For a community manager, this means text that works on a server banner may not work on a profile banner without repositioning. The same tagline placed in the left third of a profile banner will vanish behind the avatar, while the center of the server banner stays visible.

Content Strategy Differences

Treat each banner as a different communication space.

Server banner:
- Best for: community identity, event promotions, simple slogans.
- Works like a billboard for everyone entering the server.
Profile banner:
- Best for: personal branding, portfolio highlights, role or expertise.
- Works like a business card background for your profile.

A developer running a coding server could use:

Server banner: “WebTechMatrix Dev Hub” with a code-themed background.
Profile banner: a minimal gradient with “Full-stack engineer · JS, Go, Rust” aligned in the primary content zone.

Designing with Safe Areas in Figma, Photoshop, and Canva

Most design tools support guides, frames, and templates, which make it easy to respect the discord banner size and safe areas.

Figma Setup Example

Create a new frame at 960 × 540 px for a server banner.
Add vertical guides at 145 px and 815 px to mark the central 70%.
Add horizontal guides at 54 px and 486 px to mark the core content zone.
Place the logo and text inside the guided rectangle.
Extend the background beyond the guides to fill the full frame.

For a profile banner:

Create a frame at 600 × 240 px.
Add a vertical guide at 180 px to separate the avatar overlap zone.
Keep all critical content to the right of that guide.

This approach makes it visually obvious where text and logos stay safe.

Photoshop Setup Example

Create a new document at the desired discord banner size.
Use View → New Guide Layout to create columns and rows.
For a server banner, set:
- Columns: 3 (left bleed, safe center, right bleed)
- Rows: 3 (top trim, core, bottom trim)
Place important elements only in the center column and middle row.

For a profile banner, create a custom guide at 180 px from the left to represent the avatar overlap zone. Keeping text and logos to the right of that guide ensures they stay visible across devices.

Canva Workflow Example

Canva does not use pixel-perfect guides the same way, but a few tricks help:

Create a custom design with the correct dimensions.
Add a temporary rectangle over the left third of the profile banner to represent the avatar overlap.
Keep all important elements outside that rectangle.
Delete the rectangle before exporting.

A small community manager can build both server and profile banners in Canva using this method while still respecting safe areas.

Export Presets for Crisp Discord Banners

Export settings matter as much as the layout. Poor compression or mismatched resolution turns a sharp design into a muddy banner.

General Export Rules

Resolution: 72–96 PPI (Discord displays in screen resolution; higher PPI does not help much).
Color space: sRGB.
Format:
- PNG for sharp text, logos, and flat graphics.
- JPG/JPEG for photos or gradients with many colors.
- GIF for simple animated banners.

Staying close to the recommended discord banner size avoids heavy downscaling and preserves clarity.

Suggested Export Presets by Tool

Figma export presets:

Server banner:
- Frame: 960 × 540 px
- Export: PNG, 1× scale, sRGB
Discovery cover image:
- Frame: 1920 × 1080 px
- Export: JPG, quality 80–90%
Profile banner:
- Frame: 600 × 240 px
- Export: PNG, 1× scale

Photoshop export presets:

Use File → Export → Export As.
Server banner (960 × 540 px):
- Format: PNG
- Color space: Convert to sRGB checked
- Metadata: None (keeps file size small)
Profile banner (600 × 240 px):
- Format: PNG or JPEG (quality 80–90)
- Convert to sRGB checked

Canva export presets:

Server banner:
- Size: 960 × 540 px
- Download: PNG
- Compression: default or slightly reduced if file is too large
Profile banner:
- Size: 600 × 240 px
- Download: PNG

Concrete export example:

A design agency preparing assets for a WebTechMatrix community might export:

webtechmatrix-server-banner.png at 960 × 540 px, PNG.
webtechmatrix-discovery-cover.jpg at 1920 × 1080 px, JPEG quality 85.
webtechmatrix-profile-banner.png at 600 × 240 px, PNG.

These files respect the correct sizes, stay under size limits, and render sharply across devices.

FAQ: Discord Banner Sizes and Best Practices

What is the recommended discord banner size?

For a standard server banner, 960 × 540 px with a 16:9 aspect ratio works best. This size balances clarity and file weight while matching how Discord displays server banners.

What is the correct discord profile banner size?

The recommended discord profile banner size is 600 × 240 px. Designing at this resolution keeps the banner sharp and matches the 2.5:1 aspect ratio Discord uses for user profile covers.

Can the same image be used for both server and profile banners?

The same artwork can be adapted, but the exact file should not be reused without adjustments. Server banners are 16:9, while profile banners are 2.5:1. Cropping and repositioning key elements is necessary to keep logos and text inside the safe areas for each format.

Why does my banner look blurry on Discord?

Blurriness usually comes from one of three issues:

Uploading a very large image that Discord downscales heavily.
Exporting with aggressive JPEG compression.
Designing at the wrong aspect ratio, forcing Discord to stretch the image.

Sticking to the recommended discord banner size and using PNG for text-heavy designs usually fixes the problem.

Where should text go on a discord cover image?

On server banners and discovery covers, text belongs in the central area, away from the left and right edges and slightly below the top. On profile banners, text should stay in the middle or right side, clear of the avatar overlap zone on the left.

Can discord cover images be animated?

Animated banners are available for users with Nitro. The dimensions stay the same as static banners. For profiles, that means 600 × 240 px. For servers, the size depends on the banner type, but most follow the 16:9 ratio. Subtle loops work better than fast, distracting animations.

By matching each discord banner size to the right context, respecting horizontal and vertical safe areas, and exporting with clean presets, your server and profile banners will look intentional, sharp, and consistent across Discord and devices.

The Exact Discord Banner Size Guide for Sharp, Clean Designs

The Exact Discord Banner Size Guide for Sharp, Clean Designs

Key Discord Banner Sizes at a Glance