What size should a Discord server banner be?

Use 960x540 pixels (16:9). Discord shows the banner behind your server name and online count at the bottom-left, so keep logos and text in the upper and center area.

Why does my Discord icon look cut off?

Discord masks every server icon and profile picture into a perfect circle. Anything in the four corners is removed. Keep your logo inside the central 65-70% of the square image.

Does Discord profile picture show a status dot?

Yes. On desktop a small online/idle/DND dot sits at the bottom-right of your avatar, so avoid placing important detail in that corner.

Discord UI Previewer Banner, Icon & Profile

🎨 Discord Creator Tool

Discord UI Previewer

See exactly how your art is cropped as a banner, server icon, or profile picture — in dark or light mode — before you upload it.

📁

Click or drop an image here

JPG, PNG, WEBP or GIF — processed in your browser, never uploaded

Recommended size: 960 × 540 px (16:9). Server name + online count cover the bottom-left.

Icon

Keep logo inside

Avatar

Keep face inside

Status dot

Why Discord Creators Need a Previewer

Discord does not show your image the way your design tool does. It stretches banners, masks icons into circles, and drops a status dot on top of avatars. The result is a logo with its corners sliced off or a banner where the server name sits right on top of your text. This previewer reproduces those exact masks so you catch the problem before you hit upload.

Exact Image Specs for Every Slot

Server Banner — 960 × 540 px (16:9). On the server home page, Discord paints your server name and the live online count over the bottom-left of the banner. Keep headlines and faces in the top and center.
Server Icon — 512 × 512 px (square). It is cropped to a perfect circle, so anything in the four corners disappears. Design inside the central 65–70% and you are safe.
Profile Picture — 512 × 512 px (square). Also circular, and on desktop a small online / idle / do-not-disturb dot covers the bottom-right corner.

Dark Mode vs Light Mode Actually Matters

Most members use Discord's dark theme, but a large share use light mode, and the border around circular icons flips from dark grey to white. A logo with a dark transparent edge can vanish on one theme and look fine on the other. Flip the Dark mode toggle above to test both backgrounds in one click.

How to Use the Safe-Zone Guide

Turn on Safe-zone guide after uploading. The green dashed area is where your important content should live; the red dashed area is what Discord's own interface will cover. For banners the red box marks the server-name zone, and for avatars it marks the status dot. Line your artwork up to the green box and your upload will look clean on every device.

Your Image Never Leaves Your Device

This tool reads the file inside your browser using the FileReader API and draws it on the page locally. Nothing is sent to a server, so you can preview unreleased logos, private banners, or client work without any privacy risk.