Roblox Badge Template Resizer

A Roblox badge image is 150 by 150 pixels and is displayed as a circle. Crop to that square here with the circular mask drawn on, so the corners the mask removes are visible while you position the artwork rather than after you publish.

Local-only

Drop a PNG, JPG, WebP or GIF

or drop anywhere on this page · Choose a file · 100 MB

Badges are the awards an experience gives players — finishing a level, finding something hidden, playing on a particular day. The image is 150 by 150 pixels and Roblox renders it inside a circle, both in the experience's badge list and on the profile of every player who earned it.

One hundred and fifty pixels is small, and the circular mask removes about a fifth of what you supply. A badge therefore has room for one idea: a shape, a symbol, a number. Anything more becomes a texture.

This page crops to the exact square with the mask drawn over the preview, so a design flush to a corner is caught before upload. It runs entirely in your browser, with no account and no upload step of its own.

The tile that represents the whole experience is a different size again — the experience icon resizer holds 512 by 512.

For artwork that has to meet a file size you were given, the compressor takes a target in kilobytes.

Where a badge is seen

Unlike an experience icon, a badge travels: it appears on the profiles of players who earned it, which is free promotion for the experience if the artwork is distinctive.

Surface	Rendered as	Design implication
Experience badge list	Circle, moderate size	The one place detail is visible at all
Player profile	Circle, small	Silhouette and colour only
Award notification	Circle, small	Must read in under a second

One idea per badge

At 150 pixels inside a circle there is space for a single symbol at high contrast. Achievement badges that work tend to be a simple object — a key, a star, a crown, a numeral — on a flat or gently graded background.

Where a set of badges marks progression, vary the background colour and keep the symbol family consistent. A viewer scanning a profile reads the colours long before they read the shapes.

Centre the symbol and leave margin; the mask eats the corners.
Two or three colours, high contrast against both light and dark profile themes.
Consistent symbol style across a set, varied background colour.
No text smaller than roughly a sixth of the badge's height.

The circular mask, in numbers

A circle inscribed in a square covers about 79% of its area, so roughly a fifth of what you upload is never shown — all of it at the corners. A design that fills the square edge to edge loses its outermost detail on all four sides.

The preview draws the mask at its real proportions. If the subject touches the circle's edge anywhere, zoom out a little: a badge with breathing room reads better at small sizes anyway.

Format and transparency

PNG, almost always. Badge artwork is flat and benefits from hard edges, and transparency outside the circle keeps the badge from carrying a visible square of background into a profile page. JPEG is available for photographic badge art, but it fills transparency with solid colour and rings around hard edges — both conspicuous at this size.

Frequently asked questions

What size is a Roblox badge image?

150 by 150 pixels, square on disk and circular on screen. Roblox applies a circular mask, so about a fifth of the square — all of it at the corners — is never displayed anywhere the badge appears.

Why does my badge art look cropped?

Because of the circular mask rather than a crop: the corners of your square are simply not drawn. Anything positioned there, including a signature or the edge of a logo, disappears. The preview shows the mask so you can position the subject with that loss visible.

How should a set of progression badges differ?

By background colour, with a consistent symbol style. At the size badges are shown on a profile, colour is read first and shape second, so a ramp of colours is legible where a ramp of increasingly ornate symbols is not.

Do badges show up outside the experience?

Yes — on the profile of every player who earned one, which makes distinctive badge art a small piece of ongoing promotion. It also means the artwork is seen against Roblox's profile layout rather than only inside your own interface.

Can a badge image have a transparent background?

Yes, and PNG is the format for it. Transparency outside the circular subject stops the badge carrying a visible square of colour into profile pages, and keeps it looking correct on both light and dark themes.

Is my badge artwork uploaded when I resize it?

No. The crop and the export are done by your browser on this page and nothing is transmitted — this site has no endpoint to receive a file. You then upload the result through the Roblox creator dashboard yourself.

ToolsByUs team · How we check our tools