Generating an app's icon in all necessary sizes for both Android and iOS can be really time consuming and boring. It would be ok to do this work manually if you'd only have to do it once for each app just before release. Unfortunately that's not the case since the final app icon is most likely something that evolves through iteration. Needless to say, there is time to save by finding an efficient way to automate the icon generation.
There are many tools out there that can help out with this. I've tried a couple of them and they've all worked just fine. The problem is that I've found that they don't actually save me that much time in the end.
For iOS, you need a completely square icon and iTunes/iOS will handle the rounding of the corners for you. For Android on the other hand, you have complete freedom when designing the shape of your icon. I prefer to have my Android icon look as similar to the iOS icon as possible, which means that I'll have to create an icon with prerounded corners before I generate the thumbnails. Using an online tool means that I'll have to upload each of these icons separately, and then manually sort through the resulting thumbnails to find my iOS/Android icons. The process also includes renaming many of the resulting thumbnails to match the names I've specified in my config files. That's still quite a lot of very tedious and error-prone work.
Because of this I decided to write a simple little bash script to generate the icons, using a couple of command line tools to resize the images and reduce file sizes.
The tools used by the script are:
Two icon images are also required by the script, one for iOS and one for Android. They should both be sized 1024x1024 pixels and be placed in the same folder as the script.
Finally, just copy the files to wherever you need the icons. I've chosen not to include the copying in the script, but you could easily add that if you want to. Here's the actual script. It has only been tested on Windows 10.
There are many tools out there that can help out with this. I've tried a couple of them and they've all worked just fine. The problem is that I've found that they don't actually save me that much time in the end.
For iOS, you need a completely square icon and iTunes/iOS will handle the rounding of the corners for you. For Android on the other hand, you have complete freedom when designing the shape of your icon. I prefer to have my Android icon look as similar to the iOS icon as possible, which means that I'll have to create an icon with prerounded corners before I generate the thumbnails. Using an online tool means that I'll have to upload each of these icons separately, and then manually sort through the resulting thumbnails to find my iOS/Android icons. The process also includes renaming many of the resulting thumbnails to match the names I've specified in my config files. That's still quite a lot of very tedious and error-prone work.
Because of this I decided to write a simple little bash script to generate the icons, using a couple of command line tools to resize the images and reduce file sizes.
The tools used by the script are:
- ImageMagick - Great tool for image manipulation. I use it only for resizing in this script. Can be downloaded for free at http://www.imagemagick.org.
- pngquant - Reduces file size for png images. I use this for all my images in my apps, not only the icons. Haven't noticed any difference in image quality when using it, but file size is often down to ~30%. Downloaded for free at https://pngquant.org.
Two icon images are also required by the script, one for iOS and one for Android. They should both be sized 1024x1024 pixels and be placed in the same folder as the script.
- icon-template-ios.png
- icon-template-android.png
As mentioned, I prefer to have the icons look identical for Android and iOS, so my two icon files for Ice Trap would look like this:
 |
| iOS icon template - Must be square, rounding will be handled by iTunes and iOS |
 |
| Android icon template - Trying to mimic the iOS rounding |
The filenames generated by the script are adapted for Corona SDK, as listed here. If you prefer other filenames, just edit the script.
When everything's installed and setup, run the script from the command line and the following directories should be generated:
- ios - iOS icons
- android - Android icons
- itunes -Large icon for iTunes
- google-play - Large icon for Google Play
Finally, just copy the files to wherever you need the icons. I've chosen not to include the copying in the script, but you could easily add that if you want to. Here's the actual script. It has only been tested on Windows 10.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| # Create directories that don't exist | |
| mkdir -p ios | |
| mkdir -p android | |
| mkdir -p itunes | |
| mkdir -p google-play | |
| # iOS icons | |
| convert icon-template-ios.png -resize 167x ios/Icon-167.png | |
| convert icon-template-ios.png -resize 180x ios/Icon-60@3x.png | |
| convert icon-template-ios.png -resize 87x ios/Icon-Small@3x.png | |
| convert icon-template-ios.png -resize 60x ios/Icon-60.png | |
| convert icon-template-ios.png -resize 120x ios/Icon-60@2x.png | |
| convert icon-template-ios.png -resize 76x ios/Icon-76.png | |
| convert icon-template-ios.png -resize 152x ios/Icon-76@2x.png | |
| convert icon-template-ios.png -resize 40x ios/Icon-Small-40.png | |
| convert icon-template-ios.png -resize 80x ios/Icon-Small-40@2x.png | |
| convert icon-template-ios.png -resize 57x ios/Icon.png | |
| convert icon-template-ios.png -resize 114x ios/Icon@2x.png | |
| convert icon-template-ios.png -resize 72x ios/Icon-72.png | |
| convert icon-template-ios.png -resize 144x ios/Icon-72@2x.png | |
| convert icon-template-ios.png -resize 50x ios/Icon-Small-50.png | |
| convert icon-template-ios.png -resize 100x ios/Icon-Small-50@2x.png | |
| convert icon-template-ios.png -resize 29x ios/Icon-Small.png | |
| convert icon-template-ios.png -resize 58x ios/Icon-Small@2x.png | |
| # Android icons | |
| convert icon-template-android.png -resize 192x android/Icon-xxxhdpi.png | |
| convert icon-template-android.png -resize 144x android/Icon-xxhdpi.png | |
| convert icon-template-android.png -resize 96x android/Icon-xhdpi.png | |
| convert icon-template-android.png -resize 72x android/Icon-hdpi.png | |
| convert icon-template-android.png -resize 48x android/Icon-mdpi.png | |
| convert icon-template-android.png -resize 36x android/Icon-ldpi.png | |
| # iTunes icon | |
| cp icon-template-ios.png itunes/icon-itunes.png | |
| # Google Play icon | |
| convert icon-template-android.png -resize 512x google-play/icon-google-play.png | |
| # Reduce file sizes for all iOS and Android icons | |
| pngquant --force --ext .png ios/*.png | |
| pngquant --force --ext .png android/*.png |
Comments
Post a Comment