Generate iOS & Android app icons straight into a Phonegap project

This post is aimed at Mac users. It involves using a shell script, which would work on both Linux and Mac, but if you’re developing apps, you’re probably using a Mac. I’ll go through the whole process, so it doesn’t matter if you haven’t used a shell script before. I’ll assume you’re developing in Eclipse and Xcode for Android and iOS and have already set up your project for both platforms.

To start with, make your icon image at a minimum size of 1024×1024 pixels. You can save it in almost any format, but I prefer .png – that’s the filetype you’ll end up with after running the script anyway. Save it into the top folder that Phonegap created when you created your app.

I came across a handy script called Phonegap Icon Generator (hosted on github) by Tom Vincent (http://tlvince.com) a while ago. I don’t have much experience of shell scripts myself, and this was really useful to get started, but I added a few lines to it which will generate some of the icons for Android and iOS straight into the platform folders within the project. Grab my version of Tom’s script here: phonegap-icon-splash-generator.sh. Save that into the folder you keep your phonegap projects in – I keep mine in a folder inside my user folder called ‘apps’.

The advantage of using a generator script is that once you’ve done it once, and made a couple of changes in Xcode, you’ll be able to regenerate all the icons and splashes whenever you make a change.

Before you use that script, you’ll need to install ImageMagick. If you’ve worked with images in PHP before, that might sound familiar. You can install it on Mac just by downloading the binary, but I like using MacPorts – see instructions for both methods on the ImageMagick website.

Nearly ready to go! It’s quite important that all these files and folders I’ve mentioned are arranged in a particular way, so just to make sure, here’s a screengrab, as if your app was called ‘test’. I called my icon file 1024×1024.png.

folder structure

 

Next you need to open up the Terminal. Go to Applications -> Utilities -> Terminal.

Change to your app project folder (type the name of your app instead of ‘test’):

cd ~/apps/test

Decide what background colour you’d like to be used on your splash screens, around the edges of your app icon. In this example, I chose black, and my icon file is called 1024×1024.png. Type:

sh ~/apps/phonegap-icon-splash-generator.sh 1024×1024.png black

If you get a permissions error message after hitting enter, just type:

sudo sh ~/apps/phonegap-icon-splash-generator.sh 1024×1024.png black

and enter your password when you’re prompted.

..and you’ll see some output in the terminal window as the shell script generates the various icon sizes and splash screens. There is a way to set up your Mac so that you don’t have to type ‘sh ~/apps/phonegap-icon-splash-generator.sh’ every time you run the script, but this is the quickest method if you just want to get your icons!

Once the script has run, you’ll have a new folder in ‘apps’ called ‘res’, containing icons for many different platforms.

ANDROID

The default phonegap icons in the Android project should have been overwritten with your new icon. Open up Eclipse, CNTL-click on your project in the Project Explorer, and click Refresh. This will force Eclipse to refresh its cache and make sure that your new icons will show up when you next build your project. Just to make sure your icons were generated, you can open up your project in finder. Look at {your project folder}/platforms/android/res/drawable/ and the other folders like ‘drawable’. The files called ‘icon.png’ within each ‘drawable-..’ should be your new icon.

iOS

The default icons and splash screens should have been replaced when you look at your project in Xcode. You shouldn’t even have to refresh anything – Xcode is neat like that! However, some of the splash screens generated by the script either aren’t defined in the project or aren’t even added to the project by default. You’ll need to do that manually.

First of all, add the files which aren’t part of the project yet. In Xcode, expand your project and CNTL-click on Resources/splash, and select ‘Add files to “{your project name}”..’:

add files to project

 

In the file browser that appears, you’ll see that some of the files in ‘splash’ are greyed out and some are black. The black ones are the ones that aren’t part of your project yet. Select all the black ones, and click Add:

select files to add to project

 

Next, click on the top-level project at the top-left within Xcode, and select the ‘General’ tab. Scroll down to the ‘Launch Images’ heading.

xcode launch images

 

You’ll see under the ‘iPad’ subheading that some image sizes say ‘No image with correct dimensions found’ and some say ‘No image specified’.  Click the folder icons next to each splash image size, and locate Resources/splash/ in the file browser that pops up. To help you find the correct image size for each one, the files generated by the shell script have the pixel dimensions in their filenames. Xcode will prompt you to change the filenames as you add them.

BUG - ‘No image with correct dimensions found’ – with the release of iOS7, Xcode seems to have trouble locating files of the correct sizes. You can sidestep that by pressing ‘Use Asset Catalog’. Click the little grey arrow next to the asset catalog to define images in it. See Apple’s Asset Catalog Help.

 

That’s it! Now you can repeat the Terminal command whenever you make a change to your 1024×1024 icon, and all the icons and splashes for Android and iOS will be replaced.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>