Yoto icon size: 16×16 pixels, PNG or GIF

If you're anything like me, the rabbit hole of making custom Make Your Own cards started innocently enough. But you couldn't just stop at uploading the songs - you had to pick the right icon for each one. And there were never enough icons.

So I went looking. Yotoicons is a genuinely lovely community and I found plenty there, just not everything - there is no icon for the specific song your kid asks for every night. Which meant I just had to make my own ;-)

That turned out to be much harder than it looks - not only artistically, but technically. It's one thing to open Canva and do some basic editing. Figuring out pixel art is a whole different story.

But since I'm not the kind of mom to give up easily, things escalated quickly and I ended up fine-tuning an AI model to generate icons of buffalos and bananas. Yeah.

So here is everything I learned the hard way, starting with the bits I wish someone had put at the top of a page.

P.S. It's about to get technical from here. If you're not into the nitty gritty tech stuff, go and browse our free Yoto icons or our playlists instead - they're free and they need none of this.

The spec

Every Yoto icon is 16 pixels wide and 16 pixels tall. That's 256 pixels in total - draw a 16 by 16 grid on squared paper and you're looking at the whole canvas.

The whole spec, in five lines:

• Exactly 16 by 16 pixels.
• PNG for a still icon, GIF if it moves.
• 32-bit RGBA. Eight bits each for red, green, blue and alpha. That's just what your editor saves when you export a PNG with transparency - the alpha channel is the transparency.
• Transparent background. Not compulsory, but it looks far better against the player's own background colour.
• Go easy on pure black. It's allowed, but it behaves oddly. More on this below - it's the one that surprises people.

256 pixels is far less room than it sounds. A whole person at that size gives you roughly four pixels for the head, which isn't enough for a face. That one fact explains nearly everything below.

Why shrinking a photo doesn't work

When your computer makes a picture smaller it blends. It takes a patch of the original, works out the average colour, and uses that for one pixel of the result.

Blending is fine going from big to slightly-less-big. It falls apart here. Shrink a 500-pixel photo to 16 and every pixel you end up with is the average of about a thousand original ones. Average a black outline with the white paper beside it and you get grey. Average a fox's fur and you get beige. Do that 256 times and you have a small brown blur where your fox used to be.

This is why tools that offer to turn a photo into an icon so often disappoint. They aren't doing anything wrong - they're blending, and blending is the enemy at this size.

The version that catches careful people

Say you drew proper pixel art, but you made it 28 squares across instead of 16. You resize, and it still comes out wrong.

That's because 28 doesn't divide evenly into 16. Some of your squares get merged with a neighbour and some don't, essentially at random. Anything one square wide stands a good chance of vanishing outright.

I lost a cat's eyes to exactly this. The icon was fine, the eyes were one pixel each, and the resize ate them. The cat came out blind and it took me far too long to work out why.

Start at 16×16 instead

Set the canvas to 16 by 16 before you draw anything - not “draw it big and shrink it later”. Every free pixel editor lets you do this, and it turns the whole problem into colouring in.

If you must resize, only ever double or halve - 16 to 32 to 64 and back - and find the setting called nearest neighbour(sometimes “pixel” or “none”). That tells the software to copy squares rather than blend them.

Three things to pay attention to

• Go easy on pure black. Use it as an accent - a pupil, a nostril - never as an outline. Black has nothing to separate it from the player's dark background, so lines drawn in it lose their shape. Use a very dark grey instead, or a darker shade of the colour beside it.
• Transparent backgrounds aren't compulsory, just better. A white background looks fine on your laptop and like a glowing white box on the player.
• You're allowed soft edges. This one is hard to pull off by hand, but partial transparency is what makes Yoto's own icons look as good as they do - we counted, and 65% of their 520 published icons use it.

Animated icons

These really surprised me when I first saw one. I wasn't expecting animation on a screen this simple, and they turn out to be just as fun as they are hard to make.

Technically they're the same 16×16 with a transparent background, saved as a GIF instead of a PNG. Keep the frame count low and share a palette across frames - the animation reads better and the file stays small. There are a few free animated Yoto icons in our library if you want to see what works before making your own.

One thing to know if you upload through Yoto's API rather than the app: there's a flag called autoConvert. Leave it on and Yoto resizes whatever you send to 16×16 for you, which is handy for a still icon and fatal for an animated one - the conversion flattens your animation to a single frame. Set it to false for a GIF, and then your file really does have to be exactly 16×16 already. That flag is the usual reason an animated icon arrives on the player sitting perfectly still.

Icons that change by themselves

There's a third kind, and it's the reason the 32-bit RGBA detail above is worth knowing. Instead of uploading a file, you can point a track at a URL you control, and Yoto fetches the icon from there. Yoto's documentation calls these dynamic icons, and that page is where the 16×16 PNG, 32-bit RGBA requirement is written down most explicitly.

It's a developer feature rather than something you'll reach from the app, but it's the neat one: a weather icon that matches the actual weather, a countdown that ticks down. Worth knowing it exists.

What actually fits in 256 pixels

One thing. Not a thing plus a background plus a little border. Just the thing.

Three to five colours. Past about eight they stop looking different from each other at the size you'll actually see them.

No words. A readable letter needs about five squares by seven, so you could fit two if you pushed it, and they'd be ugly.

Nothing thinner than one square. That sounds obvious but it rules out more than you'd expect: bike spokes, cat whiskers, the rigging on a sailing boat, a spider's legs. We generate icons here and thin subjects are still the ones that fail - a whale is much harder than a whole family of bears, purely because of the shape.

Before you upload

Zoom out and look at it at actual size. Not at 800% in your editor where it looks magnificent - tiny, about the size of a thumbnail. If you can tell what it is, you're done. If you can't, more detail won't rescue it, and taking detail away usually helps more than adding it.

Then check the boring things:

• Exactly 16 by 16?
• Background transparent, not white?
• Any pure black in there?
• PNG for a still icon, GIF if it moves?

And if you'd rather not draw one at all - which is where this started for me - our library of free Yoto icons is free to use on your own cards, and how to make your own Yoto icons covers all three ways of making one.