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:
Related
I am using canva.com to create an app icon. I create it using 1024x1024 and plug it into the app icon generator which returns all the sizes for the icons. However, as the size decreases the image gets completely ruined to the point that it is completely illegible.
This is the original:
and this is the size that shows up on the users device (home screen icon):
It is completely blurred out and shows up this way on my device. Any way to fix this?
You've designed your icon incorrectly. You have not planned for the size that it actually will be, so when your icon is shrunk, your strokes are all too thin and the image in the square is ridiculously small. You cannot make a small icon by shrinking a large icon; you need to supply both a large icon and a small icon, each drawn correctly.
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 have an app that I can't update for the new size of the iPhone 5- basically it's built around the asset sizes I have, and there's no way to get updated assets. The app still works fine, but it has a solid white background, and the letterbox (the black bars at the top and bottom) is black, which is really ugly.
Is there any way to set the color of the letterbox to white?
Well, you could just have google searched it. "You cant!". But there is a workaround. All you have to do is just add a "Default-568h#2x.png" file. You app will fill the display. All you have to do now is just add a white graphic on top and bottom if the device is iPhone5.
No, there is no way to do that :) But, you could resubmit your app without using updated assets and support iPhone 5 screen. To achieve that, 1) you have to add iPhone 5 launch screen. 2) make your view and subviews resizable so that they appear on their places (No need to create separate nibs) 3) test with iPhone 5 (iPhone 5 simulator), and you are good to go ;) Good Luck!
I have created my iPhone .png application 'icon' (57x57 with 72 Resolution), however, when I test on my iPhone 4, the image does not appear to cover the entire icon space (a tad small in height) and is a little blurred when compared to the original. Is this because of the high resolution display offered on the iPhone 4? How should I edit my image, so that the device will display a clear and correctly sized icon?
Thanks in Advance,
Jeremy
Create a new icon at 114x114. Call it icon#2x.png and add it to your Resources.
This will use the higher resolution icon for Retina displays.
You can see the full list of recommended icon names and sizes here http://developer.apple.com/library/ios/#qa/qa1686/_index.html
Indeed, you'll have to double the amount of pixels you have: create a 114x114 image and name it Icon#2x.png.
You should have a high quality icon (512x512) already if you plan to release your app on the app store, reducing it's size should work just fine.
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**.