Steam APNG maker
Combine PNG artwork frames into an APNG. Set canvas width, frame rate, colors, transparency, and loops.
In your browserNo Steam login needed
Character art, Steam emoticon mosaics and BBCode
Turn a picture into character art
Convert your image to Unicode dots like ⣿⣷⠿, then copy the text into a Steam comment.
Character art preview
Choose a picture or try the example to see its character art.
Copy preserves blank cells and line breaks. Copy or download TXT before leaving this page.
Steam's font can show faint dots in blank Braille cells, so character art may look different after pasting.
Steam profile comments display [code] tags literally. Paste plain text. Steam can reject Unicode art even below its stated 1,000-character limit; reduce the width and leave room for extra text and emoticon codes.
Turn an image into a grid of real Steam emoticons, then add it to your info box.
1. Choose an image
Your image stays in this browser. No Steam sign-in here.
The example uses public Steam emoticons. Post with emoticons you own.
Add or manage your own emoticons
0 loaded · 0 enabled · 0 used
In another tab, sign in to Steam and copy your EmoticonList JSON. This import is user supplied; manually added names are not ownership checked.
Open Steam EmoticonList ↗2. Preview your mosaic
Your grid will appear here
Draw or edit the canvas
Click or drag to draw. Hold Shift for straight lines or square shapes. On the canvas: arrows move, Space paints, Shift + Space erases; P/L/R/C/F/X/M/E select tools; Ctrl/⌘ + Z undoes.
A blank canvas replaces the drawing and clears the reference image; Undo restores the drawing.
3. Use your mosaic
Fill the canvas to see an exact character count.
Paste into a Steam field that supports emoticons. If :name: stays as text, use character art instead.
Import existing mosaic text
Paste equal-width rows of contiguous :name: codes. Import replaces the current canvas; Undo restores it.
Turn a video into a GIF
Advanced settings640px · 15 fps · 256 colors
Animate a sequence of PNG images
For Steam Featured Artwork, use the transparent-image helper’s PNG/APNG patch and artwork upload steps. Direct uploads can display as a still image. This community method is unstable; verify the saved showcase.
Canvas targetFeatured Artwork Showcase
Advanced animation settings12 fps · high · transparent
Make an animated PNG from artwork frames
Create an APNG from PNG frames
- Select at least two PNG frames, named in the order you want them to play.
- Check the displayed sequence. Set width, frame rate, color mode, loop count, and transparent or black background.
- Generate the APNG, inspect framing and motion, and download the animated .png file.
APNG frame, canvas, and timing controls
- Frame order
- Filename sorting uses numeric order, so frame-2 precedes frame-10.
- Canvas size
- Width ranges from 24 to 2400 px. Height follows the first frame’s aspect ratio, with a minimum of 24 px.
- Frame fitting
- Frames fit with centered padding and can be enlarged to fit the selected canvas.
- Color modes
- Choose RGBA, 256 colors, or 128 colors. Reduced palettes can change gradients and edges.
- Timing and loops
- One pass lasts frame count divided by frame rate. A loop count of 0 repeats continuously.
- File budget
- The 4.8 MiB budget is a result check, not an automatic compression target or Steam acceptance guarantee.
APNG settings
| Your goal | Starting settings | What to check |
|---|---|---|
| Transparent full-color animation | RGBA · transparent background · 630 px · 12 fps | Edges, gradients, and frame alignment |
| Try a smaller palette | 256 colors · same canvas and timing | Color changes and measured size |
| Reduce animation data | Smaller canvas or fewer source frames; compare 128 colors | Motion continuity and palette artifacts |
Make a two-second artwork loop from 24 PNG frames
- frame-001.png → frame-002.png → … → frame-024.png
- 24 frames ÷ 12 fps = 2 seconds per loop
- Canvas width: 630 px · RGBA · Transparent background · Loops: 0
Steam APNG preparation questions
Can I import a GIF or video?
No. Input must be at least two PNG frames.
Why does the APNG have a .png extension?
APNG is an animated PNG. A viewer without animation support may display only a still frame.
How do I set duration?
One pass lasts frame count divided by frame rate. Loop count sets repetitions, not the length of each pass.
Can I keep transparency?
Yes. Use transparent source frames and the transparent-background option. The black-background option fills transparent areas with black.
Why are some frames padded?
The first frame determines canvas proportions. Other frames fit with centered padding and may be enlarged.
Will the output automatically fit the file budget?
No. The 4.8 MiB budget checks the result; it does not control encoding to a target size.
Will APNG work in every Steam field?
No. In our Featured Artwork test, a direct upload was served as a still JPEG. The PNG/APNG patch plus the artwork upload steps preserved the animated file. Use the transparent-image helper for those steps and check the saved showcase. This community method is unstable and does not establish support in other Steam fields.