Why your icon looks fuzzy on the player

You found a lovely picture of a fox, dropped it into the Yoto app, and what came out looks like someone sneezed on a mood board. It happens to everyone the first time. The good news is that it's one specific problem with one specific fix.

A Yoto icon is 256 pixels. That's it.

Icons on the player are 16 pixels wide and 16 pixels tall. If you draw a 16 by 16 grid on squared paper, that's your whole canvas. Two hundred and fifty six little squares, and you choose a colour for each one.

It's much less room than it sounds. A whole person at that size gives you about four squares for the head, which isn't enough for a face. That one fact explains nearly everything else on this page.

Why shrinking a photo doesn't work

When your computer makes a picture smaller, it blends. To turn a big image into a small one it takes a whole patch of the original, works out the average colour, and uses that.

Blending is fine when you're going from big to slightly-less-big. It falls apart at this size. Shrink a 500-pixel photo down to 16 and each little square you end up with is the average of about a thousand original pixels. Average a black outline with the white paper next to 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 was.

This is why apps that offer to “turn your photo into an icon” so often disappoint. They're not doing anything wrong exactly. They're just blending, and blending is the enemy here.

The sneaky version of the same problem

Here's the one that catches people who are already being careful. Say you drew proper pixel art, but you made it 28 squares across instead of 16. You resize it and it still comes out wrong.

That's because 28 doesn't divide neatly into 16. Some of your squares get merged with a neighbour and some don't, more or less at random. Anything that was only one square wide has a good chance of simply vanishing.

We lost a cat's eyes to exactly this. The icon was perfect, the eyes were one pixel each, and the resize ate them. The cat came out blind and we spent an embarrassing amount of time working out why.

So what do you do instead?

Start at 16 by 16. Not “draw it big and shrink it later” — set the canvas to 16 by 16 before you draw a single thing. Every free pixel editor lets you do this, and it turns the whole problem into colouring in.

If you do need to resize, only ever double or halve: 16 to 32 to 64 and back. And look for a setting called nearest neighbour (sometimes just “pixel” or “none”). That tells the software to copy squares rather than blend them, which is exactly what you want.

Two rules nobody tells you

Don't use pure black

The player shows your icon by lighting up little dots. A dot that's switched off and a dot that's pure black look identical, so anything you draw in true black turns into a hole rather than a line.

Black outlines are the most natural thing in the world to draw. On paper they define the shape. On the player they delete it. Use a very dark grey instead, or better, a darker shade of whatever colour it's sitting next to. A dark brown outline round an orange fox looks lovely. A black one looks like a fox with bites taken out of it.

Yoto's own designers clearly know this. We went through their entire public icon library and near-black shows up in only about one icon in sixteen, and never as more than a tiny accent.

Make the background transparent

A white background looks completely fine on your laptop and like a glowing white box on the player. When you save your icon, look for the transparency option — in most editors it's the default for PNG files, but it's worth checking.

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 is plenty. Once you're 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 letters if you really pushed it, and they'd be ugly.

And nothing thinner than one square, which sounds obvious but rules out more than you'd think: bike spokes, cat whiskers, the rigging on a sailing boat, the legs on a spider. Long thin things are genuinely hard. 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 zoomed in on your editor at 800% where it looks magnificent, but tiny, roughly the size of your thumbnail. If you can tell what it is at that size, you're done. If you can't, no amount of extra detail will rescue it, and taking detail away usually helps more than adding it.

Then check the boring things: is it exactly 16 by 16, is the background transparent, and is there any pure black in there.

If you want to see all three approaches to making one, we wrote those up in how to make your own Yoto icons.