iOS Icons, one of my newest applications that I’ve developed for Mac OS X is a great tool for any iPhone, iPad and / or iPhone 4 developer. It is very common that if you are developing an app for any of the devices in the “i” family that your app will be compatible with the iPad, iPod Touch, iPhone and iPhone 4. One of the many things you have to do to make your application look presentable is to make sure that your icons are properly sized.
The task of resizing your icons is easy enough. Create an icon in photoshop at the highest resolution, usually 512 x 512. When you’re done resize it, save it, resize it, save it, etc… This process becomes cumbersome after a while. I for one really liked the Icon Composer that comes with XCode and don’t know why Apple didn’t make a similar app for generating iOS icons.
I first developed a php script that does what iOS Icons does and then came to the conclusion that it would be easier to have an app that runs natively in OS X to generate these icons.
iOS Icons has been submitted to the Mac App Store and once approved will go on sale for $2.99. Please be patient during the approval process. I will update this site once the app has been approved.
How to use iOS Icons:
After downloading iOS Icons, go ahead and unzip and move the App to your Applications folder. After you have done that you can double click the app and you should see a user interface as in the screen shot below:
iOS Icons - User Interface
After iOS Icons has launched you can drag your 512 x 512 icon file into the big window. If the application successfully accepted your image you will see your image loaded within the 512 x 512 window. At this point you can click preview to see what your generated icons will look like. If you click on Preview you should see something similar as in the screen shot below:
iOS Icons - Preview
It’s up to you if you want to click the Preview button or not, all of the icons will be generated regardless. Now all you have to do is click on Save and a Choose Folder Dialog will appear, as in the screen shot below:
iOS Icons - Choose Folder
You can either choose a folder to save your newly generated iOS icons to or you can choose to create a new folder and save them within the new folder. Once you have a folder picked out you can click on open. After clicking on Open, iOS Icons will quickly generated and save your icons to the specified folder. If all went well you should get a notification similar to the screen shot below:
iOS Icons - Finished
That’s it, that’s all there is to it. To me this is an invaluable tool and saves a lot of time. As always I’m hoping that the applications I develop help very many people and if it helps you feel free to drop me a comment saying thanks. Donations are always welcome.
***UPDATE*** —1/16/11—
Version 1.1 of iOS Icons has been submitted to the App Store today and will hopefully be approved soon. The new version allows you to preview what your icons will look like on the device and also allows you to specify a name for your icons. The new features have been requested by the community and I thought they were good features to add to the app. Below is a screen shot of version 1.1:
Let me know what you guys think and if you have any other suggestions or feature requests, feel free to let me know and I’ll see what I can do.
***UPDATE*** —1/26/11—
Version 1.1 is now live in the Mac App Store, don’t forget to update 
Version 1.2 of iOS Icons has been submitted to the Mac App Store today and should be available soon. I’ve decided to post a preview of it so that everyone can see what’s coming in Version 1.2
I think that I’ve satisfied everyone’s feature request / enhancement… If anyone has any more requests for features or anything else that they think should be added to the app, please comment and let me know.
Changes in this version:
- Export to ICNS ( Creates Icon Set for Mac Apps )
- Now generates iTunesArtwork file
- Export iOS & ICNS icons with rounded corners
- Export iOS & ICNS icons with rounded corners and glass
- Re-Designed User Interface
- Open files using Command + O or File -> Open
- History of recently converted icons using File -> Open Recent
- Clicking New will start a new project
Screen Shots of Version 1.2:
No Glass / No Rounded Corners
Rounded Corners
Rounded Corners / Glass
So that’s it for the screen shots. Hopefully this update will be approved a little quicker then 1.1. Although I think that the typical approval time seems to about 10 days or so.
***UPDATE*** —2/10/11— iOS Icons Ver. 1.2 is “In Review”
***UPDATE*** —2/13/11—
The app name iOS Icons has been changed to “Icons” due to some Apple Trademark violations. While changing the name of the app I have also submitted version 1.3, bypassing version 1.2. Version 1.3 offers many new and exciting features and should be available very soon as Apple stated that they would perform an expedited review.
Icons is all new, with a new look and a new Icon and new features. Download version 1.1 now while it is still on sale for $.99 because as soon as 1.3 becomes available the price will go back up to $2.99.
Thank you everyone for your support and your patience.
***UPDATE*** —2/16/11— Icons 1.3 is “Ready for Sale”
Version 1.3 of Icons is now available on the Mac App Store, Icons has a whole new look and feel with many new features. If anyone has any issues with the new version please feel free to post a comment here or send me an e-mail to chris [at] chris-fletcher [dot] com
I thank you all for your support and suggestions for helping to make Icons the best Icon program on the Mac App Store. Please continue to submit your ideas / suggestions / requests and I will continue to implement them as quickly as I can, but please keep in mind that I am at the mercy of the App Review Team when it comes to updates being available. I will upload some screen shots of Icons 1.3 a little later in the day.
Screen Shots:
Here is a comparison of the Apple generated icon and one that was generated using Icons 1.3:
64 Responses to “iOS Icons”
Comments are now closed, please use the forums to post bugs, suggestions or questions. You can get to the forums by clicking here Support Forums
Hello Chris,
I am glad that the 1.3 update finally came through. I waited for that one eagerly, because I need to generate app icons in 512×512 with the effects that Apple applies. Unfortunately both the glass effect and the corners are off in Icons 1.3, which renders this function unusable for me—I need those icons to match the ones from Apple, or at least come so close that you can’t see a difference. See this image for an example:
http://dl.dropbox.com/u/8723171/IconsGlitches.png
For the FromApple icon, I used a 57×57 PNG 50% gray as an Icon, and let the iPhone simulator handle corners and glossiness. For the FromIcons example, I used a 512×512 PNG 50% gray and generated the icons using Icons 1.3, then used the generated Icon.png and told the app that it is a pre-rendered icon. There are four glitches here:
- The glossy shadow is less pronounced than Apple’s
- The lower part of the glossy shadow is flat, and not a gradient
- The corner radius is wrong
- The corners seem to get cut without antialiasing.
Take care,
Tammo Freese
Tammo,
Thank you for the very detailed comment. Please be assured that I am looking into each of the issues. Just some quick responses to your bug reports.
- I see what you mean with the glossy shadow, I will likely be adding some settings that allow you to manipulate the amount of shine ( Alpha Channel )
- The Lower Part of the glossy shadow? do you mean the bottom of the icon?
- I have been tinkering with this some more and have found a more appropriate setting for the corner radius. I will also add a feature that allow you to set your own corner radius
- I have been messing with the anti-aliasing and it does indeed use anti aliasing when making the corners but I think I forgot to use anti-aliasing when resizing, therefore the 512 result looks perfect while the smaller sizes appear more rough.
Again, I thank you for the time you took to give me enough detail to work with. I will get an update out as soon as possible.
Chris
Hi Chris,
thanks for your fast response. With
“- The lower part of the glossy shadow is flat, and not a gradient”
I meant that the shadow on the icon changes. If you look at the screenshot I provided, you’l notice that the icon from apple is very dark where shadow begins (right below the middle of the icon), but gets lighter towards the bottom. The icon your application provided is the same color from middle to bottom.
Hope that helps,
Tammo
Tammo,
Thanks for the clarification, I know what you mean now, I’ll have that fixed in the next version. In 1.4 I will focus more on all of the options being more flexible and user controlled rather then specified within the program.
Chris
Hi Chris,
I am looking forward to repeat my icon comparison with the new version and I hop to find no differences anymore
Take care,
Tammo
wrong positioning of glass effect in version 1.3!
cyb,
Not sure what you are referring to, could you please provide some additional information. A screen shot would help tremendously. I have added a comparison image of 2 icons to the page. One of them was generated by Apple and the other one was generated using Icons 1.3.
Please let me know.
Chris
Hello Chris, I really like iOS icons! Most of my feature wishes will be met in 1.3 (iTunesArtwork, export with effects applied, export ICNS). However, you know how users are: They always ask you for one more feature
Please consider adding a feature that allows adding custom icon sizes – like for a website or an avatar image.
Tammo,
I am starting a new feature request list and have added your request. I am trying to wait a while before submitting the next version since it has taken Apple a little over 3 weeks now and they have yet to approve this update.
Chris
Hi,
Just bought your app (1.1) from the appstore. When I drag my 512×512 artwork onto the app, it does not show the 512×512 icon in the full space, it just shows a small version in the ITunes, iPhone4, iPad spaces. It does fill the space in the iPhone and Settings/Spotlight areas.
Do you have any idea why that would be? I’ve tried TIF, JPG, PNG and PSD and they all behave exactly the same.
Thanks.
Pete,
Just so I can get a better idea, can you email me a screen shot? you can send it to chrs944 [ at ] gmail [ dot ] com
Thanks,
Chris
Hi Chris,
I may be doing something wrong. So I hope you can help.
When I drag and drop any graphic into iOS Icons the big main picture appears and I can add glass and corners yet no other icon views appear. I have also saved them off just to check if it corrected the issue on save however they were blank. I even tried different file formats, sizes (dpi, pixels etc) but there was no change. I have put the program on both my machines now still each one does the same thing.
What am I missing it has to be simple?
Thanks for your patience
Neil
Neil,
What format is your image in? What version of OS X are you using?
Chris
Hi Chris,
OSX 10.6.6
I just had a thought about what I was doing wrong.
I was opening the file in Photoshop and draging all layer to iOS Icons – WRONG!!
I found all I needed to do was drag the file from Finder an that – WORKSSSS!!
Sorry about that however one last problem.
The files now go out and populate all the other spaces, I can put the glass and corner affects to the files. On saving, the files save as flat images without the affects.
What can you suggest I try.
Thanks once again for your help and patience,
Neil Davis
Hi Chris,
I have just noticed on this page you mention version 1.2 of iOS Icons I only have 1.1 from the app store. Would this be a problem?
Neil
Neil,
Version 1.2 is sitting in the App Store waiting for approval from Apple, you will be notified via the app store as soon as that update becomes available. Version 1.1 only has the ability to preview shine and rounded corners. In version 1.2 you can save the shine and corners.
Chris
Hi Chris,
No problem.
By the way I think iOS Icon is a great app keep up the great work and pay no attention to those who cannot help you to increase in your ability to achieve.
Thanks
Neil
Thanks Neil, I appreciate the support
Hey Chris,
Have another feature request that you may want to add.
I don’t know the statistics for the number of users still running 3.1.3, but it’s important to note that devices running 3.1.3 use a fixed naming convention for icons. What this means is that if a developer were to choose a custom name for their icon set, the iOS Icons app should provide the developer the ability to toggle a checkbox to “Support 3.1.3 Devices”. By enabled that checkbox, the app would output image files using the fixed names to support 3.1.3 devices in addition to the custom name the developer may have chosen for devices running 3.2+.
You can find the article talking about this here:
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/BuildTimeConfiguration/BuildTimeConfiguration.html#//apple_ref/doc/uid/TP40007072-CH7-SW1
Here is the excerpt from that article:
“If your iPhone application is running in iOS 3.1.3 or earlier, the system does not look for the CFBundleIconFiles key and instead looks for icon files with specific names. The CFBundleIconFiles key was introduced in iOS 3.2 and is not recognized by earlier versions of the system. Although the sizes of the icons are the same as those in Table 6-3, if your application supports deployment on iOS 3.1.3 and earlier, you must use the following file names when naming your icons:
* Icon.png – The name for the application icon on iPhone or iPod touch.
* Icon-72.png – The name for the application icon on iPad.
* Icon-Small.png – The name for the search results icon on iPhone and iPod touch. This file is also used for the Settings icon on all devices.
* Icon-Small-50.png – The name of the search results icon on iPad. ”
The only part of this that confuses me is that I thought all first gen iPads ran 3.2, but yet they include iPad in the list. May need to do more research on that?!?
Anil,
I will check into that and will most likely be adding this into version 1.3. Just thought I’d mention really quick that 1.3 will come with lots of new and exciting features that will make iOS Icons a must have for any developer that develops for the iPhone or the Mac. I’ll keep the features of 1.3 a secret for now and might reveal them a day before it becomes available on the App Store. As always, thanks for your input
Chris
So after talking to someone, the iPad portion is correct and is for apps that are built against 3.1.3 that run on the iPad from what I understand.
Hi,
I am from Youtube and begins with Mac and iPhone app reviews. Here’s our channel:http://www.youtube.com/user/MacGameTester
We wanted to ask if you give us two promo codes (iOS icons for mac) would be a present to the app (ifyou wish, we would like to do it with your permission), and the second to give away toone (giveaway, so we have more subscribers to get and more people are our Watch videos in which your app is also available).
A friend of mine has this app, and I was pleasantly surprised.
(we speak German)
Sincerely, Tim on youtube of MacGameTester
Tim,
Unfortunately, Apple does not allow the use of promo codes for the Apps on the Mac App Store, otherwise I would be happy to supply you with some.
Chris
Hello,
This app does not work! What am I missing? The app will not produce images when the check box is selected for corners & glass. All I get is square images… How do I make your app work? Please advise…
I have tried to get your app to produce images with corners and glass and it simply will not do it. I have also found the following annoyances.
1. You have have to close and open the app for every icon you want to create.
2. The App will not accept an image if you click the check box Corners & Glass first.
3. The App does not prompt you when you are overwriting an image.
4. App will not create images with corners & glass at all.
At this point my 3.00 would have been better spent at starbucks.
ebrind,
I’m sorry you are having these issues but please be patient for version 1.2 to be released. It has already been submitted to the app store and will hopefully be available next week. Your points 1, 2 and 4 have been addressed in version 1.2 and point 3 will be available in version 1.3
Version 1.1 was not meant to be used to save your icons with rounded corners and glass but only show you a preview instead. Version 1.2 will save your icons with either just rounded corners or rounded corners and glass as well as many other features. If there is anything else that you would like to see in the next version, let me know.
Chris
No worries… I understand. Thanks for the update! I will wait for the update and looking forward to using your product.
Thanks,
ebrind
Glad to see that a “New” button is being introduced, such a pain closing and opening everytime to create a new files.
Also an overwrite warning would be very good, or a requirement that you name your icons. or Both!! i created about 5 sets of icons, saving them to the save folder, before i realised each one had just overwritten the previous one. very annoying but a minor thing.
although you may not want to go down this route i think that the ability to import more than one image to one icon would be good, along with the ability to move them around. i know this is stepping into the realm of full on image manipulation but i think it would be a nice feature.
Sam,
Thanks for the comment. I’ll add the overwrite warning request to my list of features to implement with the next version. Just so that I’m clear on what you are asking for, you want to be able to import 2 images and make 1 icon out of them by moving them around within a 512 x 512 image well? I’m guessing you are wanting to create icons with overlays? maybe adding the openfeint logo or Lite Version or something similar?
Let me know, I’m thinking that maybe I can add support to add openfeint, crystal, etc… logos to the icon and maybe have some standard Lite / Free / On Sale Texts that you can choose from to overlay on the icon. What do you think?
So I took a look at the reviews again, can you believe they removed my honest and in depth review and left the review from an uninformed buyer???!!!
Anil,
I know, I am highly upset about this, I wish I would have taken a screen shot of it as proof. I’m sending another e-mail to Apple, this is ridiculous. I wonder if you could try posting it again if its not too much trouble.
Chris
Hi,
Thanks for the App. Just downloaded 1.1 and giving it a try, it’s looking good so far.
One thing I’d like to see in a future update if possible is to be able to save the images with the rounded corners and shine, and also be able to adjust the amount of shine on the icon. I always put the App icon on my website with rounded corners and I currently have to do it in photoshop. If your app could output with the shine and corners then it would make it really easy for me to create the website graphic I need. Also if this could be a user definable/none iOS standard size that would be even better.
Many Thanks and keep up the good work. Left a 4 star review for you.
Jon
Just a couple of, what I would say are bugs. Maybe?
1. I dragged a 512 PNG onto the main window but it didn’t expand to fill the window, just looked small. It may have been saved at 300dpi so this may not be a bug. It’s just not what I expected
2. When the shine/corners button is ticked you can’t drag another icon onto the window, it just rejects it.
Jon,
Most of your comments have been addressed in the next release of iOS Icons. I will look into implementing a shine alpha and maybe even a tint adjustment and will also look at implementing a non standard Icon Size export. Thanks for the review, much appreciated. I’ll look into the issue you had with dragging the image into the well and it not expanding all the way. Not being able to drag another image into the well after applying the shine / corners has been fixed in the next release.
Chris
I just bought from AppStore iOS Icons but I was wrong because I’m not a developper.
I ask to not charge the cost.
Thanks a lot
Francesco,
Unfortunately I cannot give you a refund, all of the payment processing is handled by Apple.
Chris
Hey Chris,
Just another feature request:
Ability to use File -> Open or ⌘O to navigate to a file to use when creating an icon set opposed to always needing to dragging an icon into the application. And in conjunction with this, ability to make use of the File -> Open Recent list
Thanks!
-Anil
Anil,
I’ll add those features in with version 1.2. Still waiting on Apple to approve 1.1
I have a lot of new feature in 1.2 already as well as a totally new look for the app, I think everyone will be very please
As soon as 1.1 goes live I’ll post a preview of 1.2 here. By the way, thanks for that awesome review, it is much appreciated.
Chris
You’re welcome. Keep working on the updates, and I’ll keep providing feedback and reviews.
-Anil
Hi, from the screenshot of the new version I’ve notices that there’s just one option to do/undo both the round corner and shine transformation. Is it correct? What about one looking for just rounding the icon corners, leaving the shine effect if it’s not necessary?
Gianluca,
I will add this to the list of feature requests for version 1.2, Apple’s approval process seems to be incredibly slow. I am already working on enhancements for version 1.2 and version 1.1 has been waiting for approval for the past 7 days. After 1.1 has been approved, I will wait about another week or so before submitting 1.2 to the App Store so that if anyone else has any more feature requests I will be able to implement them with the next release.
Chris
Don’t know if you want to handle this scenario, but came across a [possible] bug.
I was testing your app last night, didn’t have a 512 x 512 icon handy so I found an image from google images (http://fc01.deviantart.net/fs70/i/2010/295/1/4/lego_icon_by_gunnyboy-d2w913v.png) to try out. I simply dragged the image from Firefox into the iTunes View area of the app. The iTunes view updated with the image, but when I clicked Preview, none of the other icons were generated.
So I then saved the image from the browser to my desktop. Dragged the image from my desktop to the iTunes view area of the app, clicked preview and the app generated the other icons.
Again, I don’t know how often people may do this, but thought that you should at the least be informed of the problem.
Anil,
The reason for this is because you are dragging the image from the browser instead of from the file system. The app looks for a local path when creating previews and exporting icons. I’ll see if maybe I can find a method to save the image to a temp location on the file system if it does not exist. Appreciate you testing it out. It’s people like you that help apps become better apps. I think if we had more people speak up with their ideas and needs then we would have a lot more high quality apps in the app store.
Chris
I figured it was that and knew it had to do with the way files viewed within the browser are being stored on the file system. Just wanted to be sure you were aware of the problem. Better to be prepared than surprised.
I enjoy providing feedback about all of the applications I use, because that is the only way the products can get better. If I think of any other features or come across any other issues I’ll be sure to let you know. Thanks again for taking the time to address my questions.
Anil,
No problem, I appreciate your help…
Chris
Here is a review someone left for iOS Icons and he gave me 1 star. Is it really my fault that he was not able to read and understand the description of the App ??? Now because of people like this providing reviews that are completely irrelevant it will deter people away from my app. I’ve already filed a complaint with Apple so lets see what happens there. Please anyone that downloads and finds iOS Icons helpful, please write a relevant and accurate review.
Would be great if you saved the 512×512 icon in the iTunes format.
With file named iTunesArtwork saved in png format, but named without the .png extension as documented in Technical Q&A QA1686.
Rob,
I’ll definitely look into adding this…
Chris
Good sample app from Apple that shows all the icons that could/should be set up for an application:
http://developer.apple.com/library/ios/#samplecode/Icons/Introduction/Intro.html
Anil,
Thanks, I’ll check that out.
Chris
FYI, I tweeted a link to this page, but didn’t find you on twitter to give you a shoutout.
Anil,
Thanks for the great link, I will look into that, I think its a great idea and will probably be something that I will consider doing in a major upgrade. Appreciate the tweet, you should be able to find me by searching for empocmedia
Chris
Just another random idea for ya, what about making the app create icons for various platforms in lieu of just iOS devices?
Here is a good reference I found for icon sizing for various platforms/devices: http://hicksdesign.co.uk/iconreference/
Based on information like this and as platforms are updated, you could have a single icon generating application that developers could use to make their cross platform development that much easier. And to take it a step further, depending on how this is implemented, you could provide a mechanism whereby developers could add custom sets where in the set the developer chooses what sizes they want icons to be output as and what to name them, etc. to cover situations where they may be doing something custom for say a website, or some other application development where they would need small, medium, or large icons and use the tool to automate that process for them.
What I’d like to see is the ability to drag into any well as downsizing from the first one (Blurry settings icons aren’t pretty as an example).
Trevor,
I’ve got a few updates coming out with version 1.1 and already have some more in the works for version 1.2
Before I release 1.2, I’d like to get some more feedback from everyone, I want to try and pack as many feature requests as I can into the app.
Also, please rate the App on the Mac App Store, I see lots of downloads but no reviews or ratings.
Thanks everyone for your support.
Chris
As a developer I gotta ask this question because I haven’t found the answer to it, how do you know what the corner radius is for icons? I’ve been trying to figure that out so that I can properly design icons with that in mind.
You can disregard my post, I did some more research and found a couple sources that provided all the information I needed. Sorry about that.
Anil,
Sorry I didn’t get to respond sooner, I’m hoping that Apple will approve the update soon because I’ve got another really cool update almost ready for the next version. I think everyone will like that one.
Chris
No worries dude. I’m looking forward to seeing what you have lined up. And thanks again for integrating my feature request.
In none of the screenshots do I see the capability of adding the sheen that Apple adds when that option is enabled in your Info.plist. The sheen can make a dramatic change to the look of the icon and being able to preview without having to deploy it to the simulator/device would be pretty powerful. If this capability does not exist, is this a feature you would include? If so, when?
Wayne,
This is definitely a feature that I will be including with the next update which I hope to release next week.
Chris
Does the app give you the ability to choose a name to use when saving all the various icons?
Anil,
It currently does not, but I will add that feature and submit an update for the app.
Chris
Thank you for your prompt response. Looking forward to seeing the next update.