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 cat that glances around, a heart that beats, a set of traffic lights changing. They loop away on the screen while the track plays and small children find them completely magic.

Worth saying plainly: Yoto clearly didn't build this thing to be watched. There's no video, the screen is 16 pixels square, and that restraint is the whole point of the player - it's audio, and it isn't trying to get your child staring at a screen. I like that about it, and I wouldn't want a card where every track wriggles.

But the occasional animation is just too cool to pass up. One moving icon on a card is a small delight. Twelve is a fruit machine.

The spec

• GIF, exactly 16 by 16 pixels. Same canvas as a still icon, 32-bit RGBA, just a GIF instead of a PNG.
• Transparent background, for the same reason as a still icon - it sits on the player's dark screen.
• autoConvert set to false. Not optional. See below.
• Set it to loop rather than play once. A checkbox in most editors and easy to miss.
• Two to eight frames. Fewer usually looks better. You are not making a cartoon, you are making something twitch pleasingly.
• One palette across every frame. If colours shift by a shade between frames the whole icon shimmers, which reads as broken rather than lively.

Frame timing matters more than frame count. A blink held for half the loop is a face falling asleep; held for a tenth of it, it's a blink. Most editors let you set a delay per frame - use it.

Animations that actually work at this size

We built eight of these, and the pattern that decides success is simple: the part that moves has to be at least two pixels thick, and it has to move by whole pixels. There is no half a pixel to move into.

• Pupils move
• Colour cycles
• Lamps switch

Eyes looking around. Move the pupils left, centre, right. We tried a blink first and it doesn't work - two pixels changing for a fraction of a second reads as a dropped frame, not a blink. An eye is about four pixels wide, so sliding the pupil one step is a quarter of it, and that registers.

A colour cycle. Keep the shape identical and change only the colour. The most forgiving of the lot, because nothing moves - but every frame has to be pixel-for-pixel the same drawing or the subject jitters.

A pulse. Shrink the whole shape by one ring and grow it back. Works on anything solid: a heart, a balloon, a sun.

A quarter turn. Rotating by 90 degrees is free - every pixel lands exactly on another pixel and nothing is resampled. Four frames and you are back where you started. Any other angle has to guess which pixel goes where, and one-pixel details drop out.

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

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

A glow. Leave the subject alone and pulse a halo behind it. Only works if the icon leaves empty space around itself, since the glow has to go somewhere.

What to avoid

Walking legs, waving hands, flapping wings, spinning wheels with visible spokes. All of them are thin things moving, and thin things are what this size destroys - the same reason a whale is harder to draw than a bear.

The easiest way to make one

Start from a still icon you already like and change one thing about it. Every animated icon in our library was made that way: load the finished 16×16, move a couple of pixels, save the result as the second frame.

This is much easier than drawing frames independently, and it avoids the failure that ruins most attempts. Two separately drawn versions of the same cat will never line up exactly, and at this size a one-pixel difference between frames looks like the whole icon twitching.

You can see all of them on our free animated Yoto icons - free, the right size, and a reasonable place to start if you want to take one apart and see how few frames it really needs.

If it arrives as a still image

Nine times out of ten it is one setting, and it catches everyone.

When you upload an icon, Yoto offers to convert it for you. For a still picture that is helpful - it tidies up the size and the colours. For an animation it is fatal, because converting flattens your looping GIF down to a single frame. You upload a lovely animation, everything reports success, and what lands on the card is one frozen picture.

Turn auto-convert off. In the API this is autoConvert and it has to be false. If you're using a tool or script someone else wrote, this is the first thing to check.

After that: check the file really is a GIF and not a PNG with a misleading name, that it is exactly 16 by 16, and that it is set to loop rather than play once.

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.