Selected tab bar icons look fuzzy if not on Retina display

Question

I am working on an iPhone app that has a tab bar. I made the tab bar icons using a vector graphics editor and exported them to PNG. The icons look fine, except when selected.

This doesn't happen on the retina display.

I use self.tabBarItem.image = [UIImage imageNamed:@"Symbol"]; to set the image. Here is the actual PNG: http://i.imgur.com/dBTDe.png (though it happens with all the images).

What can I do about this? Why does this happen?

Answer 1

This appears to happen when the images don't have a margin. If you add a margin of 2px it will look fine:

Answer 2

You should have 2 copies of the image. One for normal or older devices, and one for retina display.

Your images should be named accordingly.

image1.png // older devices
image1@2x.png // for retina display. @2x is case sensitive as well

When you choose your image, be sure to choose the normal image. The OS will select the @2x image if it is capable of displaying it.