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:

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?

Answer 1

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

Answer 2

Looks like your design is not aligning to the pixel grid properly. This creates all sorts of artifacts that are very difficult to control.

I would suggest to set the dimensions of your canvas to 24px x 24px and zoom in enough that you can see the pixel grid. Then nudge and/or resize your icons until they align with the specific pixels. This will minimize the anti aliasing on the rectangular shapes. Not much you can do about tiny circles though. There will be anti aliasing, want it or not.

I have circled things that suggest misalignment. If a rectangular shape is aligned to the pixel grid and its stroke and width are perfect pixel dimensions, then the colours on both sides should be the same. In fact, the colour should be solid, not 3 different shades of the same colour.

This does not mean that your design is wrong. You can make things whatever width you want and place them wherever you want. It just means that to be rendered at such a small size PS needs to use anti aliasing.

You can take a peek at my OCD guide to pixel perfection in this question. Although the answer is suggesting to use AI, not PS, some of the comments apply as well.

Things to consider:

• The strokes might not be aligned to the pixel grid. They might be centered on it and therefore being rendered with antialiasing. Try aligning the strokes to the inside or the outside of the rectangles.
• The with of the strokes might not be a full pixel.
• The rectangles might have rounded corners
• The rectangles might be slightly tilted. Not likely but the changes of colour on the left side of the smaller rectangle are suggesting something is wrong.

One last thing. Your comment about 300dpi confuses me. If you are creating an image that will be seen at 24px x 24px on a screen, talking about its resolution has no place. I talk about that topic in this answer.