Home · Free tools · Discord server icon generator
Free tool · no account · nothing uploaded
Discord Server Icon Generator
Design a server icon and take it away as a square 512×512 PNG — with a live preview at 128 px down to 16, so you can see whether it survives the member list before you upload it.
The generator
Per fess azure and purpure, a mullet or.
5.2:1 — strong. Still legible at 16 px, which is the real test.
A server icon is the smallest identity on the internet. It sits in a column beside twenty others, at a size where you have about a thousand pixels to work with, and it has to be recognisable to somebody who is not looking at it. That is a genuinely hard design brief, and it is why so many servers end up with a wordmark nobody can read.
This tool exists to make the hard part visible before you commit: the strip above is your icon at 128 px down to 16, redrawn every time you change anything. If your design dies at 32, you find out now rather than after you have asked forty people to join.
The square becomes a circle, and the corners are gone
Discord renders server icons as circles. Your upload is a square; a circle is inscribed in it; the four corners are cut off and never seen. That is not a setting and there is nothing to opt out of, so it is worth knowing exactly what it costs: the visible area is about 78.5% of the square you uploaded — that is π/4, the ratio of a circle to the square around it — and the missing fifth is entirely in the corners, where people habitually put things.
Two consequences follow, and they are the whole design brief:
- Fill the square anyway. Do not upload a circle on a transparent background. The parts outside the circle are discarded, so transparency there buys you nothing, and if a surface ever shows the square uncropped you get a hard-edged circle floating on whatever colour is behind it. The download from this tool is a full-bleed square for exactly this reason.
- Keep the mark well inside. Turn on the Safe area button above and you get two rings: the outer one is the crop, the inner one is a working safe circle at 80% of the width. Anything that touches the outer ring looks like a mistake even when it is technically inside it, because the anti-aliased edge of the mask eats a pixel or two and the eye reads the result as a clipped design.
What happens to a file that is not square
Discord does not letterbox it and it does not squash it. It hands you a cropping step and asks you to choose the square you want, which you can move and zoom; everything outside that square is discarded on upload. This matters more than it sounds, because it means a wide logo — a wordmark, a horizontal lockup — cannot be used as a server icon at all. You are not choosing how to fit it in; you are choosing which part of it to throw away.
If you have a horizontal logo, the correct move is not to shrink it into a square. It is to take the one element from it that reads on its own — the monogram, the animal, the shape — and make that the icon.
Sizes and formats
Discord's own server settings ask for an image of at least 512×512, and square. That is the size this tool exports, and it is the right one for the obvious reason: everything downstream is a downscale, and downscaling is something software does well, while upscaling is something no software does well. Uploading a 128 px file to save space produces a soft icon on every high-density screen in the world.
There is an upper limit on file size, enforced by the uploader — the exact figure is Discord's to change and not worth quoting here. It is not a constraint you will meet with artwork like this: a flat two-colour 512 px PNG is typically a few kilobytes, which is one of the quiet advantages of a design with no gradients in it.
| Format | Use it for | The catch |
|---|---|---|
| PNG | Flat colour and hard edges — exactly what this tool makes | None worth naming. This is what the download button gives you |
| JPEG | Photographs | Its compression clusters artefacts around hard edges, and a two-colour mark is nothing but hard edges. Visible even at small sizes |
| GIF | The animated option | A limited palette, and a first frame that has to work on its own — see below |
Why a busy design dies, in arithmetic
Detail is not lost gradually, it is lost at a threshold, and the threshold is easy to compute. Take a stroke that looks elegant at 512 px — say six pixels wide, which is barely more than a hairline at that size. At 32 px that stroke is 6 × 32 ÷ 512 = 0.375 of a pixel. It cannot be drawn. What you get instead is a smear of the average of the two colours it sat between, which is exactly how a crisp design turns into grey mush.
The same arithmetic gives you the rule: anything narrower than about a sixteenth of the width will not survive. At 512 px that is 32 pixels — a stroke thick enough to look almost clumsy on your monitor. That clumsiness is the point. Every icon you can recognise in a rail is built from shapes that big.
| Size | Roughly where an icon lives at this size | What fails first |
|---|---|---|
| 128 px | A profile or server overview, opened deliberately | Nothing yet — this is the size everybody designs at, which is the problem |
| 64 px | Invite embeds and roomier lists | Thin outlines merge into their fill; two-pixel gaps close up |
| 48 px | The server column, on a desktop | Any third element. Two shapes is the ceiling |
| 32 px | Dense lists and compact layouts | Text. Anything longer than two characters is a smudge |
| 24 px | Mobile chips, mentions, tight rows | Interior detail. Only the silhouette and the two colours survive |
| 16 px | Favicons, badges, the smallest thing anyone will ever show you at | Everything except the colour contrast. If it still reads here, it reads anywhere |
The contrast readout, and the number behind it
Under the preview is a live contrast measurement between your symbol and the background it sits on — and when the background is split, it measures against the worse of the two colours, because a mark that vanishes over half the icon has vanished.
The threshold it uses is 3:1, which is not invented for this page: it is the ratio the Web Content Accessibility Guidelines ask for between a graphical object and its background, on the grounds that below it the shape stops being identifiable for a substantial number of people. At icon sizes it stops being identifiable for everybody. Two dark tinctures side by side can look rich and deliberate at 512 px and be a single dark blob at 24, and the number is what tells you which one you have made.
Animated icons, and what they need
An animated server icon is a GIF, and it is not available to every server: it is one of the perks unlocked by Server Boost Level 1. How many boosts each level requires has been changed by Discord more than once, so rather than print a number that may already be wrong, check the boost panel in your own Server Settings — it states the current requirement for your server.
Two things are worth deciding before you spend an evening animating anything. First, the first frame has to work on its own: plenty of people run with animation reduced or turned off, at the operating-system level or in Discord's own accessibility settings, and they will see a still. Second, motion at 32 px reads as flicker rather than as animation. The animated icons that work are the ones where a single element moves slowly across a design that was already fine when it was still.
Before you upload
- Look at the 32 px and 24 px previews above, not the big one.
- Check the contrast line reads 3:1 or better.
- Turn the safe area on and confirm nothing important crosses the inner ring.
- Squint at it, or step back from the screen. Whatever is left when it blurs is what people will actually recognise you by.
- Download the 512 PNG and upload the square. Let Discord do the circle.
Where the artwork comes from
The eight colours are a heraldic palette — flat, high-contrast tinctures that were chosen centuries ago for a problem identical to this one: being recognised at a distance, in bad conditions, by somebody who is not concentrating. The splits and symbols are generic armory, which is to say they predate every fictional setting and belong to nobody.
They are also, literally, the palette of the strategy game this site belongs to: the tinctures, divisions and charges are read out of the game's own compiled code when this page is built, rather than copied into it, so the mark you make here is a legal design in there. If you want the full heraldic treatment — a shield, a banner, and a blazon written out in the language of armory — the coat of arms forge is the same engine wearing a different frame.
Can I use the icon I make here?
Yes — for anything, including commercial work, with no permission and no credit required. Short strings like a name or a two-word motto are not the kind of thing anyone can own, and the crest you compose is your composition, not ours. Take it to a novel, a tabletop campaign, a stream overlay, a band, a boat, a business card.
We ask for exactly nothing in return: no account, no email, no sign-up, no watermark. Nothing you type or click here is sent anywhere — every one of these tools runs entirely inside your own browser, so there is no server that could keep your design even if it wanted to. If you want to tell somebody where it came from, a link back is kind, but it is not a condition.
The rest of the free tools
Discord profile picture maker — the personal version of this tool, with a monogram option and the status-dot corner marked out.
Before the picture there is usually a name: guild names, clan names and tags, alliance names, team names and war cries are all on this site, all free and all without an account. If you want the full heraldic version of this mark — a shield, a banner, a blazon written out in the language of armory — that is the coat of arms forge. Everything else lives on the tools index.