If you saw my earlier post on how to use high res images in your app, you might expect the app icon to be the same. Unfortunately it isn’t, at least not exactly. At first, I just put in the high res icon. That seemed fine. Everything looked good and all was well. Until I submitted it to the app store. Upon submission, I got an error saying that I needed to provide an icon that was 57×57 pixels. That low resolution doesn’t look so great on the iPhone 4.

So I did what I did for my other images. I created a 57×57 icon file called appicon.png and a 114×114 icon file called appicon@2x.png thinking that it would automatically load the high res icon on the iPhone 4. This was not the case, it only loaded the low res version.

Here’s how I got it working.

There is another value in your info.plist for icons. It is CFBundleIconFiles. Apple added this because there were beginning to be a semi-ridiculous amount of icons for iPhone/iPad apps. There is the app icon and the search icon, but with the iPad and iPhone 4 you have 4 more icons you need to have since they’re all different resolutions.  It’s a problem that I think Apple could solve a little bit more elegantly.

So there you go, just put that into your apps info.plist instead of the default icon key and everything should be fine. Hopefully this will prevent you from having the minor headache it caused me.

On the iPhone, one way to create UIImages is like this:

[UIImage imageNamed:@"compassGreen.png"];

It’s very simple and easy. Now how do you take advantage of the retina display?

Just make your image twice as big as the control.

Thats it? Yes, that is it, sort of. What if your designer doesn’t trust the cocoa touch scaling algorithm? How do you load a different icon for the older iPhones?

if( has retina display )
{
   [UIImage imageNamed:@"hiResImage.png"];
}
else
{
   [UIImage imageNamed:@"regularResImage.png"];
}

NO! Don’t do that. You could do it that way if you really wanted, but then every time you wanted to use an image you’d have to type that if statement. Also, what would you do for images in Interface Builder?

Luckily, Apple knows what they’re doing and added a URL naming scheme to solve this problem. Name your regular resolution image image.png and then your high resolution image will be image@2x.png. Then all of your calls will use the regular image name. So you just say [UIImage imageNamed:@”image.png”] and then it will automatically load the correct image based on your device.

It wasn’t all puppies and rainbows. I had a hard time getting some of my images to load correctly. I couldn’t figure it out. They looked great in Interface Builder but they wouldn’t load on my phone. It was just the hi-res versions too. It turned out that when I was saving them in Photoshop I didn’t change the image format. I just changed the file extension. This meant that even though the files looked like PNGs to me, they were actually PSDs. For some reason, they work just fine in Interface Builder, even though they aren’t PNGs.