Converting logo into 16 x 16 pixels

morten's picture

Hi everyone,

We have a little problem here: How do I convert a picture (EPS, TIFF, etc.) to 16 x 16 pixels for use on the web? For the best result?
Thanks in advance for your kind assistance!


Picto.jpg86.34 KB
Arno Enslin's picture

"Converting" is the wrong expression there. It had to be made for that purpose, at least if you still want to see a kind of bicycle driver at the slope of a hill. But in case of your logo it should be possible.

Theunis de Jong's picture

... 16 x 16 pixels for use on the web ..

You are looking for the term "favicon".

Try downscaling the image to about 64 x 64. Clean up as much antialiasing as you can -- it's of no use for anything this small. You can even try downscaling without resampling, and check if there is enough recognizable detail left to work with.
From that version, scale down to 16 x 16 and clean it up one pixel at a time.

I drew my own favicon literally one pixel at a time, from scratch:

-- worth the effort, as it preserved the black-white pixelated view I was after.

Caspian Rehbinder's picture

You can choose either to use the icon as a whole, or to cut out one piece of it, making that piece representative for the whole. Either way, you’d achieve the best result if you would draw it by hand, pixel by pixel.

Caspian Rehbinder's picture

Just for the fun of it, I made a version. You’re free to use it if you find it good enough.


Same image, only bigger:

dberlow's picture

If you count the transitions (green to white to green to white...) left to right, or top to bottom, you'll find you have just barely enough pixels at 16 to represent this image. I'd start with a 16X16 photoshop file and do your best. It's not that many pixels.


wormwood's picture

I can never resist a low res pixel challenge...

Caspian Rehbinder's picture

Yours looks good, Wormwood, although I actually prefer mine. Yours is a bit smoother, and if I had spent more time doing mine, it would probably have been a little more like yours in some parts. For example, I think you did the back of the cyclist better. On the other hand, I prefer my rougher style when it comes to the head, which I think should be separated from the body, and the wheels, which I deliberately made bigger, to make it look more like a bike, and less like a kick scooter.

Syndicate content Syndicate content