How to save small png files (icons) with minimal pixelation?


Question

I've been tasked with creating a bunch of icons for a software product that my company develops. The problem is, I keep getting feedback that the icons are too "pixelated" for them to use...

The icons need to be 24 x 24px, and saved as PNG. I created the icons in Photoshop, set the resolution to 300 (to try and make it as crisp and sharp as possible) and saved each file as a PNG. Here's an example of how they turned out: Icon Example

I was under the impression that, at 24x24 px, it wasn't going to get much less pixelated than this. Am I wrong about this? Is there a way to export these tiny little image files so that they are as un-pixelated as possible?

How can I save these files and get the best possible result?

1
1
3/16/2016 6:54:00 PM

That is not pixelation, that is blurred. Your icon is blurry.

The problem is that you made them at different resolution and downscaled it, and the program made a resampling. To simulate the apropiate proportion of the stroke it applied some anti alias.

You need to make them:

a) pixel perfect at the exact resolution.

b) make them in vectors, like svg.

c) resample them turning anti alias off.... I don't think this will work but you can try.

d) Try to apply some sharpening... Could work, but they will not be as clean as the options a, and b.

Aditional notes.

The 300 dpi which are actually not dpi, but ppi, does not have anithing to do with an icon for web. Just use plain pixels as the size of your document.

Edited:

A close up of your icon:

A pixel perfect icon should look more or less like this:

Here is the icon at 24x24 px: compared to

4
7/1/2019 7:04:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^