Changing the Cordova app icon

http://intown.biz/2014/03/07/changing-the-cordova-app-icon/

It seems that many Cordova tasks, even fundamental ones, require some degree of research.  In this case, I first found a solution that was “close enough”, and then found a better one.  Both are shown here.

The goal here is to use your own custom icon instead of the default icon.

The Sub-optimal Way

1. Find the drawable directory, and place the icon in it (Yes, I see there are actually 5 drawable directories.  For now I only care about one.)

2. Find the AndroidManifest file, and modify it to point to your file.  Note: leave out the extension of the icon file.

<application android:hardwareAccelerated=”true” android:icon=”@drawable/myIcon”android:label=”@string/app_name”>

3. Compile and run.

The Better Way

This way is better because as a best practice, it’s good to keep everything in the platforms/android directory generic.  Ideally you should be able to check out the code in a clean environment, use the cordova add platform android command and be ready to go.

This time we don’t have to change the manifest, because we’re just replacing the icon.png file by copying over it.

We achieve this using hooks, which are custom commands that run during the build process.  This particular command copies the icon files into their appropriate directories. Here’s the process:

1. Create a folder for hooks as shown in the image.  We’ll focus on the “after_prepare” point of the build, but there are a number of other points where you can run commands, as detailed here.
2. Create a configuration directory in the root, as shown. You could really put these files anywhere, if you want to use your own organizational structure.
   
3. Download these hooks:  http://www.mooreds.com/sample-hooks.tar.gz.  You’ll only need the one called 030_resource_files.js, though the others could come in handy too.  They are explained by Dan Moore on Devgirl’s excellent blog.
4. Tweak the file to suit your own nefarious needs.

Next time you build, your files should be copied into the appropriate places automatically.  And you still don’t need to check in your platforms directory!

PS:

我找到的一个在线生成app icon的网站：

http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.space.trim=1&foreground.space.pad=0&foreColor=33b5e5%2C0&crop=0&backgroundShape=bevel&backColor=ffffff%2C100