You drew the emote. It looks great at 512 px. Then you shrink it to 28 px and it turns into a smudge.
Twitch wants more than one size. So does Discord. Here are the sizes and limits, how to keep an emote readable when it is tiny, and how to export everything from one image.
Twitch emote sizes
A static Twitch emote comes in three square sizes:
- 28x28 px
- 56x56 px
- 112x112 px
Each is a PNG with a transparent background. Twitch's emote guidelines are the source of truth: each file must be square and no larger than 1 MB. Smaller files are still worth aiming for, because a lean 28 px file usually means cleaner detail.
There is also a shortcut. Twitch can make the smaller sizes for you if you upload one image between 112 and 4096 px, under 1 MB. Many creators still upload all three by hand, because it lets them choose which details survive at 28 px.
Design at 112x112 or bigger, then scale down. Scaling up from 28 px never works.
Animated emotes are GIFs with the same two routes: one image of 112 to 4096 px for auto-resize (up to 1 MB), or 28, 56 and 112 px by hand (up to 512 KB each), with at most 60 frames.
Twitch badge sizes
Twitch badges use three sizes, also PNG with a transparent background:
- 18x18 px
- 36x36 px
- 72x72 px
Discord, 7TV and BTTV
You will probably want the same art in other places. These are the limits as the Ziztu emote resizer page lists them for 2026. Check each platform's own page before you upload.
| Platform | Sizes (px) | Format | Max file size |
|---|---|---|---|
| Twitch static emote | 28, 56, 112 | PNG, transparent | 1 MB per file (Twitch's limit) |
| Twitch badge | 18, 36, 72 | PNG, transparent | Keep each small |
| Discord custom emoji | 128 | PNG or GIF | 256 KB |
| 7TV | 28, 56, 112, 128 | WebP, PNG, GIF or AVIF | 2.5 MB |
| BTTV | 28, 56, 112 | PNG or GIF | 1 MB per size |
Design for 28 px
At 28x28, an emote is about the size of a capital letter. These habits keep it readable:
- Square canvas from the start. All the Twitch sizes are square, so you never crop or squash.
- A bold outline. A 1 to 2 px outline in a contrasting color is what defines the shape at the smallest size.
- Few colors. Lots of shades of one color merge into grey. Use 3 to 6 distinct values per hue.
- One idea. A single face, expression or symbol reads better than a scene.
- Check both backgrounds. Chat can be dark or light. A transparent emote has to work on both.
A flat or cel-shaded style also keeps files small. If a size is over the limit, reduce the number of colors, avoid dithering and flatten extra layers.
Export every size with ffmpeg
If you have ffmpeg, one loop does it. This keeps the transparent background.
for s in 28 56 112; do ffmpeg -i emote.png -vf "scale=${s}:${s}:flags=lanczos" "emote_${s}.png" done Write ${s} with braces. Without them, some shells read $s:flags as a modifier and the command breaks. I hit exactly that in zsh.
I ran it on ffmpeg 8.0.1 with a 512x512 RGBA test image. The three outputs were 28x28, 56x56 and 112x112, still RGBA, and a corner pixel stayed fully transparent. Swap the sizes for 18 36 72 for badges, or 128 for Discord.
For pixel art, use flags=neighbor instead of lanczos, so edges stay crisp.
Then check file sizes with ls -l. If one is over Twitch's 1 MB limit, or heavier than it needs to be, reduce the colors and export again.
If your art is not square, fit it into a square canvas first:
ffmpeg -i wide.png -vf "scale=112:112:force_original_aspect_ratio=decrease,pad=112:112:(ow-iw)/2:(oh-ih)/2:color=black@0" wide_112.png Export every size in the browser
No terminal, or no ffmpeg? Ziztu's Twitch emote resizer does it from one image. There are other emote resizers. This is the one I use, and this is what its page says:
- Free, no account. The resize and export run entirely in your browser. Your image is never uploaded.
- Input: a PNG, JPG, GIF or WebP.
- Pick a platform: Twitch Emote, Twitch Badge, Discord Emoji, 7TV or BTTV. It draws every required size side by side.
- Light and dark preview. Each size is shown on a white and a dark grey background, so you can check contrast at 28 px before you upload.
- File-size check. A green or red indicator next to each size tells you whether the PNG is within the platform limit.
- Download. Save single files, or click Download ZIP to get every size at once.
- Transparency is kept. The alpha channel from your PNG carries through.
It also has an optional background removal step. That one is separate: it sends the image to an AI provider, uses credits and needs an account. The resizing does not.
A short checklist before you upload
- Art is square, at least 112x112, with a transparent background.
- Exported sizes: 28, 56 and 112 for emotes. 18, 36 and 72 for badges.
- Each PNG is under Twitch's 1 MB limit, and as small as it can be without losing detail.
- You looked at the 28 px version on a light and a dark background.
- Discord version is 128x128 and under 256 KB.
Happy streaming.
This post was written with AI assistance.
![Why Object.keys(user) Returns string[], Not (keyof User)[]: TypeScript Means It](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2q4w48b9bzs43tynyhsf.png)
