Skip to main content

Discord Banner Size + Cropper

One source in, three Discord banner sizes out — profile (680×240), server (960×540), invite splash (1920×1080). X / Y / zoom sliders for the crop, brand-tint overlay, PNG or JPG.

One source in, three Discord banner sizes out. Client-side, no upload.

Discord banner sizes at a glance

Three banner slots, three pixel specs. Profile banner at 680×240 sits at the top of your Discord profile pop-out and is a Nitro feature — non-Nitro accounts see a flat colour. Server banner at 960×540 (16:9) appears above the channel list on the server's main view; it unlocks at Server Boost level 2 (7 boosts). Invite splash at 1920×1080 backgrounds the public invite landing page and unlocks at Boost level 1 (2 boosts). The cropper above generates all three from a single source image so you don't bounce between Photoshop and Discord uploading mismatched crops.

The middle-third rule

Discord renders the same banner at three different sizes across the UI: the full pop-out, the mini-profile preview, and the reply-message context. Each crop pulls a slightly different region of your source. The reliable safe-zone is the middle-third horizontally and the centre-50% vertically — anything inside that rectangle survives every Discord crop. Brand logos, faces, and key text should sit there. The X / Y sliders on the cropper let you anchor the source to that safe zone without leaving the browser.

PNG, JPG, or WEBP — what fits Discord's 10 MB cap

Discord caps every banner upload at 10 MB. PNG hits the cap easily on full-bleed photos with detailed gradients. The 1920×1080 invite splash is the most-affected size — a clean photo PNG often runs 8-12 MB. The fast fix is to switch to JPG at quality 92, which usually drops the same image to 1-2 MB without visible degradation. WEBP is even smaller but Discord's preview cache occasionally misses on WEBP, so we recommend JPG as the default for the splash and profile slots, and PNG only for designs with hard edges and transparency. The byte counter under each export flags any output that runs over.

When the brand-tint overlay helps

The Tint dropdown overlays a Twitch-purple, Kick-green, or Streamrise-violet flat colour on top of the source, blended at the opacity slider's percentage. Useful when the source photo is busy and you want a one-tone brand wash without retouching. Twitch streamers running multi-platform branding often apply a 25-35% Twitch-purple tint to bring the Discord banner into visual continuity with their Twitch panels and YouTube channel art. Set tint to Off for source-as-is exports.

Beyond the banner — Discord profile assets you might also need

Discord profile assets beyond the banner: avatar (256×256, 8 MB cap, animated GIF for Nitro), about-me text (190 chars max, basic markdown supported — covered by our Discord text formatter), profile accent colour (single hex value, fallback when no banner), and pronouns (40 chars). Server-side: server icon (512×512), invite splash (covered here), and server-discovery banner if you've passed the 1,000-member + Community-server threshold. Profile-banner and server-banner assets reuse the same source most often — keep your focal subject within the central 60% horizontally so the same upload survives all three crops.

Frequently asked

What is the Discord profile banner size?
Discord profile banners are 680×240 pixels (aspect ratio roughly 17:6). The slot only renders for Nitro subscribers — non-Nitro accounts see a flat colour profile bg. Upload accepts PNG, JPG, GIF (animated), and WEBP up to 10 MB. Discord crops slightly on profile pop-out vs. the full mini-profile, so keep the focal subject vertically centred between roughly 30% and 70% height.
What is the Discord server banner size?
Server banners are 960×540 pixels (16:9). The banner appears above the channel list on the server page and requires Server Boost level 2 (7 boosts) to unlock. Discord scales the banner down on smaller viewports, so don't put critical text below the lower 25% — it gets clipped on narrow window widths. PNG, JPG, WEBP accepted, 10 MB max. Animated server banners require Boost level 3 (14 boosts).
How big is the Discord invite splash background?
Invite splashes (the background of an invite landing page) are 1920×1080 pixels (16:9). Available at Server Boost level 1 (2 boosts). Discord overlays the server name, member count, and a Join button over the lower-left third of the image — keep busy details out of that area. JPG export under 1 MB usually loads fastest on the public invite link, since the splash renders before the user has loaded the rest of Discord.
Can I upload an animated Discord banner?
Yes, but only with the right Nitro / Boost tier. Profile banners support animated GIF for full Nitro subscribers (Nitro Basic does not include animated banners). Server banners require Server Boost level 3 (14 boosts) for animation. Invite splashes do not support animation. The cropper above outputs static PNG / JPG only — for animated source, prepare the GIF separately at the target size before uploading.
Why does Discord crop my banner differently across views?
Discord renders the same banner at multiple cropped sizes — the full pop-out, smaller mini-profile previews, and tighter in-message reply contexts. The middle of the source image is always visible across every render; the outer edges are clipped on smaller views. Design rule: keep faces, logos, and text within the central 60% horizontally and 50% vertically. This cropper centres on those defaults; the X / Y sliders let you re-anchor.
What format should I use for a Discord banner?
PNG for designs with sharp edges, transparency, or large flat colours (logos, brand work). JPG for photographic or gradient-heavy banners — it usually halves the file size at quality 92, well below Discord's 10 MB cap. WEBP works too and beats both for size, but the "Save as" UX still defaults to PNG / JPG on most browsers; we expose both as the export options. GIF is only relevant for the animated profile-banner case (Nitro).
Does my server banner show on mobile?
Yes, but cropped harder. Mobile Discord shows the server banner cropped tighter from the source's vertical centre, with the top and bottom edges typically clipped. Server-list view on the home tab shows a square preview that uses the very centre of the banner. Test by reducing your browser to ~360px width before publishing — that mimics the mobile crop closely.
How do I reset the focal point on a non-square banner?
The horizontal and vertical sliders shift the crop window inside the source image. xCentre = 50% means centre-crop (default). xCentre = 0% pulls the image to the left edge, xCentre = 100% pulls it right. Same for y. Zoom adjusts how much of the source falls inside the export — useful when the source is wider than 16:9 and you want to show less of it without re-importing. The export preview updates as you drag.