Hi-Res App Icons for iPad 3

Solar2D General Questions/Discussion
#1

Hi Everybody,

I just wanted to issue a friendly reminder - whether you have an iPad 3 or not - to remember to add a higher-res app Icon in all your iPad and/or Universal builds. I just popped a 144x144 icon into an app I’m updating on account of the whole “iPad-gate” thing, and you’d be surprised the difference it makes. And the better your icon looks, the more likely your users will be to tap on it, right?

And for the uninitiated, here’s how to include the HD icon:

In the same folder as your main.lua file, you should already have an “Icon.png” image (57x57), and if you’re developing for iPad, an “Icon-72.png” image (72x72), plus any number of other icon sizes (small for search results, “Icon@2x.png” for iPhone 4/4S, etc.). Just create an identical icon PNG, sized at 144x144, and call it “Icon-72@2x.png.” Then in your build.settings file, make sure to include “Icon-72@2x.png” in your list of “CFBundleIconFiles.”

See below for a sample build.settings file that would include the new HD icon - this example would be appropriate for an iPad-only app, but make sure that you include any settings required for your app to function properly. This is a pretty basic example:

settings = {  
  
orientation = {  
 default = "landscapeLeft",  
 supported = { "landscapeLeft", "landscapeRight", }  
},  
  
iphone = {  
 plist = {  
 UIAppFonts = {}, -- insert any custom fonts here  
 CFBundleDisplayName = "Your App Name",  
 UIStatusBarHidden = false,  
 UIPrerenderedIcon = true,  
 UIApplicationExitsOnSuspend = false,  
  
 CFBundleIconFiles=  
 {  
 "Icon-Small-50.png",  
 "Icon-72.png",  
 "Icon-72@2x.png" -- This is your new iPad 3 HD icon!  
 },   
 }  
 }  
}

And that’s it - your app icon will look AMAZING on the new iPad’s retina display. Happy coding, everybody!

-Jason [import]uid: 27636 topic_id: 23444 reply_id: 323444[/import]

#2

Thanks Jason!
I thought my icon was looking a little weak!
I was trying to use Icon-144.png

You saved me! :slight_smile: [import]uid: 21331 topic_id: 23444 reply_id: 93974[/import]

#3

Jason, do you know how to configure so that the hi-res graphics are used?

Thanks! [import]uid: 66859 topic_id: 23444 reply_id: 93983[/import]

#4

@Jason - Thanks for that. Nice to remember that I have to “duplicate & rename” my 144px icon to have it able for the new iPad too. :slight_smile:

PS: Please, I have just a question: Ive used to have an icon at 114x114px already at all my published apps named: **Icon@2x**. So, whats the deal of that and how about its name?
Cheers,
Rodrigo. [import]uid: 89165 topic_id: 23444 reply_id: 93982[/import]

#5

@Rodrigo: Icon@2x (114x114) is for iPhones & iPod touches with Retina displays, as it is twice the size of the non-retina iPhone icon (57x57). For iPads, the default icon size has always been 72x72 (“Icon-72.png”), but now with the iPad 3, we can double that to 144x144. So universal apps should ideally include both an “Icon@2x.png” (114x114) and an “Icon-72@2x.png” (144x144). I hope that makes sense.

@MeApps: I havent had much time yet to figure out using display.newImageRect() on iPad 3 to display Retina images, but I’d imagine that for iPad-only apps, it will work just like it does on iPhone: pick a suffix for your higher-res images like “@2x”, and specify a factor of 2 in your config.lua file to load those images, with a content sized for older iPads (1024x768):

application =  
{  
    content =  
    {  
        width = 1024,  
        height = 768,  
        scale = "letterbox",  
   
        imageSuffix =  
        {  
            ["@2x"] = 2,  
        },  
    },  
}

For universal apps it’ll get a little trickier to maximize screen resolution across all iOS devices, because you’ll need 3 sets of images: one for older iPhones (320x480), one for Retina iPhones (640x960, and in my experience these also work well on non-Retina iPads) with an “@2x” suffix, and now a third set for Retina iPads - I’m not sure exactly what ratio to use, but probably 4. Of course, with Corona you can have as many suffixes and image sets as you like, but is does get unwieldy at a certain point. I am curious if we’ll see a return to developers creating 2 versions of their apps: one for iPhone and one for iPad, since the iOS ecosystem is becoming a little more fragmented with the iPad 3.

But if you’re developing an iPad-only app, it’s very easy to use Corona’s built-in dynamic content scaling to support the iPad 3’s screen (in theory at least - I haven’t yet tried it). If anybody has advice after actually using images built for the iPad 3, please share in the comments!

Thanks,
Jason [import]uid: 27636 topic_id: 23444 reply_id: 93992[/import]

#6

Thanks for the reminder Jason as I am re-building some apps now.

Here’s a list with some additional entries showing sizes and usages that I’ve pieced together from various posts and the HIG

--http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html CFBundleIconFiles = { "Icon.png", --57x57 (iPhone and iPod touch application icon) "Icon@2x.png", --114x114 (RETINA iPhone and iPod touch application icon) "Icon-iPad.png", --72x72 (iPad 1 application icon) "Icon-72.png", --72X72 (RETINA iPad 2 OLD name) "Icon-iPad@2x.png", --144x144 (RETINA iPad 3) "Icon-Small.png", --29x29 (iPhone and iPod touch Spotlight search results and Settings icon) "Icon-Small@2x.png", --58x58 (RETINA iPhone and iPod touch Spotlight search results and Settings icon) "Icon-Small-50.png", --50x50 (iPad 1 Spotlight search results and Settings icon) "Icon-Small-50@2x.png", --100x100 (RETINA iPads Spotlight search results and Settings icon) }, [import]uid: 48203 topic_id: 23444 reply_id: 93997[/import]

#7

Thanks Jason! I’ll give that a try. Do you know (or anyone) can we build for xcode and use the xCode iPad Retina device? I am only able to use the iPhone sets. I have iPhone+iPad selected when building.

Thanks! [import]uid: 66859 topic_id: 23444 reply_id: 93998[/import]

#8

@Croisened: Thanks! I’ll need to revise my own naming conventions to match the Apple HIG. Best to stick to the official names, I think. I also forgot about doubling the resolution of the “small” icon! D’oh! :slight_smile: [import]uid: 27636 topic_id: 23444 reply_id: 94001[/import]

#9

@Jason & @croisened - Thanks for the insight guys.

Cheers,
Rodrigo. [import]uid: 89165 topic_id: 23444 reply_id: 94013[/import]

#10

Great thread! :slight_smile: [import]uid: 52491 topic_id: 23444 reply_id: 94032[/import]

#11

Thanks for the advice Jason, will do new icons.

Perhaps Apple should consider just letting us use a single 512x512, then use that for everything by scaling down themselves accordingly. [import]uid: 10284 topic_id: 23444 reply_id: 94088[/import]

#12

Thanks, Jason.

Hi, guys,
I’ve also updated the Icon Robot.
It’s a FREE tool to assist you in resizing and renaming icons.
Please feel free to grab it here :

http://www.fu-design.com/iconrobot [import]uid: 4992 topic_id: 23444 reply_id: 94903[/import]

#13

fudesign, you rock! [import]uid: 98393 topic_id: 23444 reply_id: 109519[/import]

#14

Hi, here is an update Iconbot (drag & drop Icon converter) : http://iconbot.strikingly.com.

#15

Hi, here is an update Iconbot (drag & drop Icon converter) : http://iconbot.strikingly.com.