Yes, Yoto icons can be animated

Most people don't realise this, and it's the single best trick the player has. Yoto icons can move. A little rocket with a flickering flame, a cat that blinks, a star that twinkles. They loop away on the screen while the track plays and small children find them completely magic.

It's not hidden or unofficial. It just isn't signposted, and there's one setting that ruins it if you don't know to look for it.

The setting that catches everyone

When you upload an icon, Yoto offers to convert it for you. That conversion is helpful for still pictures — it tidies up the size and the colours.

For an animation it's a disaster, because converting flattens your looping GIF down to a single still frame. You upload a lovely animation, everything says it worked, and what lands on the card is one frozen picture.

Turn auto-convert offwhen you're uploading an animated icon. In the API this is the autoConvertsetting and it needs to be false. If you're using a tool or script that someone else wrote, this is the first thing to check when your animation arrives as a still.

What the file needs to be

A GIF, 16 pixels by 16 pixels, with a transparent background. Same size as a still icon, same transparency, just a GIF instead of a PNG.

Keep it short. Two to eight frames covers almost everything you'd want to do, and fewer frames usually looks better than more. A blink is two frames. A flickering flame is three. You're not making a cartoon, you're making something twitch pleasingly.

Use the same handful of colours across every frame. If the colours shift between frames the whole thing shimmers in a way that's more annoying than charming.

Animations that actually work at this size

You have 256 pixels and no room for anything clever, so the good ideas are all small:

A blink.Two frames, eyes open and eyes shut. Hold the open frame for about a second and the shut one for a fraction of a second. Works on anything with a face and it's the easiest one to make.

A bob. Shift the whole thing up by one pixel and back down. Boats bob, balloons bob, ghosts bob. One pixel is plenty.

A flicker. Swap two or three pixels between colours — candle flames, rocket exhaust, fairy lights, a fire.

A twinkle. Turn a couple of pixels on and off. Stars, sparkles, snow.

What doesn't work is anything that needs the shape to change much. A walking animation needs legs, legs need about six pixels of height, and by the time you've spent that you've no room left for the rest of the creature.

Making one

Piskel is free, runs in the browser, and has a frame timeline built in. Set the canvas to 16 by 16, draw your first frame, duplicate it, and nudge the copy. It shows you a live preview at actual size in the corner, which is the bit that really helps — you can see immediately whether the movement reads or just looks like a glitch.

The trick is to start from a still icon you already like. Get the picture right first, then duplicate the frame and change as little as possible. Almost every good animated icon is one very small change repeated.

If it arrives as a still image

Nine times out of ten it's the auto-convert setting. Check that first.

After that, check the file really is a GIF and not a PNG with a misleading name, and that it's exactly 16 by 16. And make sure the GIF is set to loop rather than play once, which is a checkbox in most editors and easy to miss.

The rest of the format rules are the same as for still icons — no pure black, transparent background, don't shrink a big picture down. Those are all in why your icon looks fuzzy on the player.