The iTunes Connect Developer Guide says that the developer must provide a whole bunch of different icon sizes. But I only know from the "normal" app icons (57x57, 114x114) that the device applies the gloss effect and corner rounding automatically.
But how about those other icons? How about the 512x512 iTunesArtwork.png icon? Are the effects applied automatically? Must this icon be shipped inside the bundle of the app? Is there any way to see it "live" how it finally looks, when those effects are applied?
I slightly remember that there was a tool from apple that applied those effects to an icon, so you could see them. Does anyone know more details about this?
The glow and rounded corners are applied automatically. You can control the glow, by adding a key to your Info.plist file: UIPrerenderedIcon set to YES will indicate that your icon is "prerendered" and you don't want the glow.
The AppStore will honor that setting for the 512x512 icon as well.
You actually should supply 6 icons now. One for the iPhone4, iPad, normal iphones/ipod touch, and 2 smaller icons for spotlight search (one is double resolution).
I wrote a pretty cool photoshop script to take you 512px icon and convert it using photoshop into 6 smaller sizes all named correctly.
http://github.com/sponno/iPhone-Photoshop-JSX-Icon-Exporter
You will also see in the header of the file, now to update your info.plist to include all these icons.
For more details on those six icons and their required sizes, here's two great resources:
http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
http://blog.cocoia.com/2010/iphone-4-icon-psd-file/
Note that even though the app store honors the UIPrerenderedIcon setting for the icons supplied with your app bundle, the 512x512 icon submitted within iTunesConnect in the app management must not have rounded corners or gloss. If you click the ? next to the icon in iTunesConnect you get this message:
"A large version of your app icon that will be used on the App Store. It must be at least 72 DPI and a minimum of 512 by 512 pixels (it cannot be scaled up). It must be flat artwork without rounded corners."
Why they make it such a p.i.t.a. and make you provide a square icon for this is beyond me. My app icon is rounded with a decorative frame, this square version will look like a**.
Related
I have an icon for my iOS app that seems to be missing some margins that other icons have. This creates an irregular, unwanted border around the icon when it is selected in Springboard (as the darkened selection overlay is smaller than the actual icon), as visible in this image:
When another app is selected (Safari, for example), there is no extra border:
I've tried this out with "Prerendered" setting (in the Xcode Target Summary page) on and off with no visible difference. I've also noticed other apps icons that have this issue. When I look at the icon for an app that doesn't have this issue, I do notice margins of a few pixels on every side.
I couldn't find any values listed online for the margins of different icon sizes. Does someone happen to know the values for the margins, or a program that can create the images with the correct margins? Or is there something else I may be missing?
(Note that the icons are not parallel due to the wiggling icons do in the app-deletion mode of Springboard. The 72#2x visible on the icon is--I assume--a separate issue.)
UPDATE: I myself have verified this on both a iPod Touch 4 (iOS 5) and iPhone 4 (iOS 6). (If it matters, both devices are jailbroken.) The project contains the following icons: Icon (57x57), Icon#2x (114x114), Icon-72 (72x72) and Icon-72#2x (144x144).
UPDATE 2: Since I'm developing an app for Cydia, the automatic icon rounding done by Springboard for regular App Store apps doesn't seem to be a possibility (see comments in #Vojtech Vrbka's answer).
UPDATE 3: Posted my solution to this problem (also removed the linked question in the last paragraph before the updates).
If you are making round corners manually, don't. Use square icon and the round corners will be added automatically.
Here is list of all sizes, that you should include in your app: Custom Icon and Image Creation Guidelines
It turns out the main problem I had was not knowing what margins to use, but that my app did not get the automatic rounded corners (and margins) from Springboard which regularly installed apps would get (as my app is for Cydia, meaning it's basically a System App, and I was installing it manually to /Applications).
I found a similar question here, which had two useful answers, one which provides a potential way to prepare the icons manually, and another which names a useful app in Cydia which can create the icons correctly: http://cydia.saurik.com/package/org.thebigboss.iconmaker (most likely using the method from the other answer).
I use a icon.png file of size 57*57 and a icon#2x.png file of size 114*114 as app icons. When building as a normal app, which is installed at /var/mobile/Applications, everything seems normal.
But when I build it with iOSOpenDev, installed at /Applications, the icon turns a little bigger than others (the right icon).
Any ideas? How can I set the icon's size to normal?
I've noticed this before, too. It isn't just an iOSOpenDev issue. I see this with jailbreak apps installed to /Applications, not built with iOSOpenDev, too. I'm not sure, but here's what I guess is going on:
With iOS apps, you can choose whether or not the OS should apply a gloss effect to your app icon by setting a flag in your app's Info.plist file:
<key>UIPrerenderedIcon</key>
<true/>
So, obviously, the OS is not just displaying app icons the way you originally drew them. I'm guessing that the OS also applies a standard shadow effect to app icons, at least for normal app store apps (installed in /var/mobile/Applications). The difference is that this effect is not optional for those App Store apps.
Looking at a screenshot off my jailbroken Retina iPhone, it appears that iOS is reserving 120 pixels (for Retina devices) for the app icon, and if you simply provide a 114x114 icon image, it will scale it up. That's what you're seeing.
So, try making your app icon 120x120 pixels. You don't need to change the actual rounded rectangle square. Simply open it up in a photo editor, and increase the canvas to 120x120. The extra space should be transparent. It appears that you don't want the rounded rectangle to be centered, but instead have maybe 1 pixel of transparent space above it, and about 5 pixels of transparency below it.
Rebuild your app with the Icon#2x.png at this larger 120x120 size, and see how it looks.
If you really want to get it perfect, I think you're also going to need to draw in the shadow effect yourself. The light source is from the top, so the shadow should be below the icon.
Note that for jailbreak apps installed in /Applications, your app icons absolutely can have transparency (and PNG supports it). It's just App Store apps that Apple doesn't want using transparent icon images.
Here is the app icon from Cydia, found on your filesystem at /Applications/Cydia.app/icon\#2x.png. As you can see, it comes with the gloss effect and the bottom shadow embedded in the image:
"the itunes icon submitted within iTunesConnect in the app management must not have rounded corners or gloss"
Can I add settings for "Prerendered" for it to have pre-set corner and gloss for it?
You can do any thing with the image. But I guess rounded will not be accepted because Itunes renders it itself. And if you put a shade. Itunes will put another shade in it so your image will not be shown as your need.
For my experience, it not recommended to put a shade on it, because Apple will apply their own one. In fact, your app may not be accepted. Also, there are another conditions for icons etc (read ITunes good practises).
The area where the corners will be rendered (and they will be there, since the system adds them automatically! There is no way arround the corners.) is just never displayed anywhere. You can do what you want in that area, but it doesn't have any usage.
But I will not recommend you to add corners to your image, since the corner doesn't have the same radius in different situations/resolutions.
I'm working on an iPhone app and I'm not sure which plist property to use out of the following:
Could anyone shed some light on what each of them do and the difference between them?
Apple requires that you include an icon that measures 57x57 pixels. If you are just going to use that image, then you put it under the Icon File property.
However, Apple recommends that you include images of different sizes for different purposes, such as for the retina display, the ipad, and the search bar. If you are going to include multiple images, which will make your app look better, especially the retina one, then you include all of those images in the Icon Files property. Do note that you do not need the Icon File property if you are using the Icon Files property.
I am still developing for IOS 4 so I do not know about the Icon Files (IOS 5) property but I would assume that there are new places where your icon might pop up in IOS 5 where it will not pop up in older IOS versions. You would place those images under that property.
Hope that helps.
What are the specifications for the icons required by Apple for a custom iPhone application published?
57x57, PNG, No Transparency, No Layers, 72 PPI
512x512, TIFF or JPEG, No Transparency, No Layers, 72 PPI
Note: iPhone OS applies rounded corners, optionally shine, and other effects
Also have a large version of your logo with the name of the application in case Apple contacts you needing a version for marketing purposes.
The icon should be a 57x57 pixel PNG. The PNGs generated by Apple have a PPI of 72.01 so I guess something in that range will work fine. Don't have a very high PPI else images are not rendered properly.
If you want to use a custom icon and not let the iPhone to apply the gloss to your icon, add a key to info.plist called UIPrerenderedIcon (is a boolean value) and make it checked.
When submitting the app to the app store, you will need a 512x512 pixel version of your app's icon (this one in jpeg or tiff format) and at least one screenshot of your app. You can have additional 4 screenshots of the app.
EDIT
Now the specs for icon (to be submitted in iTunes connect) and the app icons have changed. The icon to be submitted to itunesconnect must be 1024x1024 px.
For the app icons, you can find details here - http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW1
Also, make sure the icon files are NON-INTERLACED PNG files. Recently one of our apps' binary was marked invalid since one of the app icon files was an interlaced PNG.
From here:
To ensure that your icon can take advantage of these visual enhancements, provide an image in PNG format that:
Measures 57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone OS scales it)
Does not have any shine or gloss
Name your icon file Icon.png and place it at the top level of your application bundle.
As of May 2012, the official Apple Docs include this chart:
This describes the icons that must be visible in the app. The docs also say the file must be jpeg or png but doesnt specify a dpi.
You must also include a larger copy for the page in iTunes. Again, from the apple docs
full docs available here.
The new retina display is at 114 x 114 for icons.
To submit app to iTunes store you need to have following sizes:
57x57
72x72
114x114
228x228
512x512
Reference: http://ios-funda.blogspot.in/2013/02/all-icon-size-needed-for-app-store.html
The app store is looking for a 512x512 icon as well (not sure the PPI). Best bet is just to design it as vector then you can easily resize and export it as whatever.
This blog post describes all icon sizes and where are they used.
57x57 pixels png... you can choose via code to apply or not the gloss effect.
I made a complete list of the ten (10) needed app icon files in my blog post, iOS App Icons, Listed and Summarized . My information is current as of iOS 3, 4, 5, and 6. Two links take you to the crucial Apple documentation.
I show three tables, each listing the icon files needed for:
Handheld devices (iPhone, iPod touch)
Tablet devices (iPad)
iTunes & App Store
Note: iOS ignores the PPI (Pixels Per Inch) of icon images. You may
author your icon images at any PPI but their width and height, as
measured in pixels, must match the values in the tables below.
This is coming from Apple Technical Q&A QA1686 and contains also information about sizes and files types.