EmoteResize

Twitch Emote Makerany image in, a finished emote set out

Drop a drawing, a render or a screenshot — crop it square, cut the background, add the outline, and take away the full 112 / 56 / 28 set ready to upload. Animated GIFs work too. Free, no account, and your artwork never leaves the browser.

Drop your artwork here

PNG · JPEG · WebP · GIF — or paste from clipboard

How to Make a Twitch Emote

  1. 1 · Start from any image

    A drawing, a render, a cropped photo of your cat — anything works. Square art is easiest, but rectangular images are handled: Fit pads them into the square, Fill crops to the centre. You do not need Photoshop for this part.

  2. 2 · Cut the background and add an outline

    Turn on Remove background to clear a flat backdrop, then add an outline. That outline is what separates a real emote from a shrunken picture — it keeps the shape legible against both the light and dark chat themes.

  3. 3 · Export the whole ladder

    Twitch wants every emote three times over — 112×112, 56×56 and 28×28 — each under 25KB. All three are generated and compressed for you, named and zipped ready for the Creator Dashboard.

What Makes an Emote Read at 28 Pixels

28px is where emotes live

The 112px version is what you admire while uploading; 28×28 is what viewers actually see, scrolling past at speed. Judge your emote on the smallest preview above — if it does not read there, nothing else matters.

One idea per emote

A whole character rarely survives the shrink. A single expressive face, hand or object does. Crop tight with Fill rather than fitting an entire body into 28 pixels.

Outline is not decoration

A contrasting outline of roughly 2–4% is what keeps your emote from dissolving into the chat background. White works on dark themes, dark on light — a mid-tone outline covers both.

Contrast beats detail

Bold shapes and high contrast survive downscaling; fine linework, gradients and small text turn to mush. Drop the detail before the pixels drop it for you.

Transparency, not a white box

Emotes sit directly on chat, so the background has to actually be gone. Exports here are PNG with the alpha channel intact — no white square, no grey matte at the edges.

Already have finished art?

If your emote is done and only needs the three sizes, skip the editor — the Twitch emote resizer takes a batch of finished files and returns every size in one pass.

FAQ

How do I make a Twitch emote?

Start from any drawing, photo or render. Crop it to a square, cut away the background so the shape reads on its own, add a contrasting outline so it survives at chat size, then export it at 112×112, 56×56 and 28×28. This page does all four steps in the browser.

Do I need Photoshop to make an emote?

No. The parts of emote making that actually matter — square crop, background removal, outline and the three export sizes — are all handled here. A drawing app is only needed if you are creating the artwork itself from scratch.

What size does a Twitch emote need to be?

Every emote is uploaded in three square sizes: 112×112, 56×56 and 28×28 pixels. Static emotes must be under 25KB per file; animated emotes are GIFs and may go up to 1MB.

Can I make an animated Twitch emote?

Yes. Drop an animated GIF and every frame gets the same crop, outline and background treatment, then the whole animation is re-encoded at all three sizes with its original timing. The preview shows the first frame; press Render animated emote to process the rest.

How do I make an emote with a transparent background?

Turn on Remove background. The colour is sampled from the four corners and flood-filled inward, so only background connected to the edge is cut and matching colours inside the artwork survive. Raise the tolerance for a slightly uneven backdrop; lower it if part of your art starts disappearing.

Is my artwork uploaded anywhere?

No. Every step runs locally on an HTML canvas in your own browser. Unreleased emote art never touches a server, and closing the tab leaves nothing behind.

More Tools

Made the emote? The rest of the channel needs its own sizes — the hub compares all seven specs and resizes them from a single upload.

Link to This Tool

Bloggers, mods, and forum members are welcome to share this page. Copy the snippet below to credit the source.

<a href="https://emoteresize.com/twitch-emote-maker/">Twitch Emote Maker</a> — free online tool