One logo, seven sizes: the chain from 1024 down to 32 pixels

A server logo is not one image. It is the same mark at seven sizes across four platforms, and the difference between a server that looks organised and one that does not is usually whether those seven came from the same file.

Where it ends up

Seven sizes, four platforms, and two of them crop to a circle. That last part is why the mark has to be designed inside a circle from the start rather than fitted into one later.

Why one render, not seven exports

The alternative that people reach for is drawing the mark again at each size, simplifying as it gets smaller. That sounds sensible and it produces a set of logos that are not quite the same logo. Stroke weights drift. The badge shape gets slightly rounder at 96 because it looked better that way in isolation. Six months later nobody can say which one is correct.

Cutting every copy from a single 1024x1024 render with a proper downscale gives the opposite property: they are provably the same mark, and when the server rebrands, one render changes and the chain regenerates. The 96x96 server list icon is the same artwork as the 512 Discord icon, not a cousin of it.

What survives being small

Two properties decide whether a mark is still legible at 32 pixels, and neither of them is detail.

Silhouette

At 32 pixels the mark is an outline with some colour in it. If the outline of your badge is the same as every other badge, nothing else can save it. A pennant, a hexagon and a shield read differently at that size; three slightly different shields do not.

Contrast between the mark and its hole

Most server marks are a letterform inside a shape. The thing that has to survive is the gap between them. A two-pixel gap at 1024 is a quarter of a pixel at 32, which means it is gone, which means the letter and the badge merge into a blob. The fix is not a thinner letter, it is a wider gap at full size than looks necessary.

The circular crop

Discord crops both the server icon and the profile picture to a circle. Nothing is going to change that, so the corners of a square logo are not design space, they are offcuts.

• Design to the inscribed circle, not the square. The corners can carry scene, never content.
• Leave a margin inside the circle too. Discord's own ring and hover states eat a few pixels at the edge.
• Check it as a circle at 48 pixels, which is what the sidebar actually shows.

The 300x300 profile picture renders at 900x900 and is delivered at 300, for the same downscale reason as everything else: three times the target, then a clean reduction, rather than a native render at the small size.

The FiveM server list icon

96x96 is the odd one in the set and the one with the most leverage. It appears next to your server's name in a list of thousands, at a size where almost nothing is readable, beside entries that mostly have no icon at all or a stretched screenshot.

Because it is cut from the 1024 master rather than drawn separately, it inherits the silhouette decision made at full size. That is the whole value: the thing that makes it recognisable in a list is the shape, and the shape was chosen once.

The animated copy

The animated logo is an APNG rather than a GIF, because the mark has a soft outer glow and a bevelled edge, and GIF transparency is one bit: a pixel is opaque or invisible, with nothing between. Put a GIF version of a glowing mark on a dark background and the glow becomes a visible fringe in the shape of whatever it was blended against.

Discord's animated server icon unlocks at boost Level 1 and is a GIF slot, so that copy is a GIF with the glow handled differently. The APNG is for everywhere else: overlays, store pages, anywhere a file sits on an unknown background.

Testing the chain before you ship it

Every failure in this set shows up at small sizes, and every small size is impossible to judge on a design canvas at two hundred per cent. The test takes two minutes and it is the only thing standing between a mark that works and one that becomes a blob in the server list.

1. Put the 96 and the 32 side by side at their real pixel size on a dark background. Not zoomed. Actual size.
2. Step back from the monitor until the 32 is at the apparent size of a favicon in a tab. If the shape is still distinguishable, the silhouette is doing its job.
3. Repeat on a light background. Platforms change themes and the mark cannot assume dark.
4. Mask the 512 to a circle and check that nothing important was living in the corners.
5. Open the APNG on a white page. Any grey fringe means the transparency was baked against a dark plate somewhere in the chain.

The most common failure that survives all the way to a live server is the fourth one. A mark designed as a square looks balanced as a square, and Discord then crops a circle out of it that is off-centre or that clips a point of the badge. It costs nothing to check and it cannot be fixed later without redrawing.

Keeping the set organised

Seven files that look nearly identical is a filing problem as much as a design one. A year later somebody needs the 96 and finds three candidates in a Discord thread.

• Size in the filename, always. It is the only thing anyone needs to know to pick the right one.
• One folder, in the same place as the rest of the branding, not in whoever made it last.
• When the server rebrands, the master changes and the whole chain regenerates. Never patch a single size.

Questions people actually ask

Can I just upload the 1024 everywhere?

For slots that accept it, yes, and the platform downscales. The reason the smaller copies exist is the slots that do not accept it, the favicon especially, and the fact that a platform's own downscale is not always as good as a controlled one.

Why does my logo look rough at 96?

Usually because it was exported at 96 from a vector rather than downscaled from a large raster. A direct export has no anti-aliasing information from the surrounding detail; a downscale averages it, which is what makes small marks look smooth.

Does the favicon really matter?

It matters for the one thing nothing else covers: a pinned tab. If your community keeps your store or your rules page open, the favicon is your branding for hours a day at 16 pixels.