alexdisler/cordova-icon

Automatic icon resizing for Cordova

cordova-icon

Automatic icon resizing for Cordova. Create an icon in the root folder of your Cordova project and use cordova-icon to automatically resize and copy it for all the platforms your project supports (currenty works with iOS, Android, Windows 10 and OSX).

Installation

$ sudo apt-get install imagemagick
$ # on Mac: brew install imagemagick
$ # on Windows: http://www.imagemagick.org/script/binary-releases.php#windows (check "Legacy tools")

$ sudo npm install cordova-icon -g

If you are using an older version of cordova (before 7.x):

$ sudo npm install [email protected] -g

Requirements

• ImageMagick installed
• At least one platform was added to your project (cordova platforms docs)
• Cordova's config.xml file must exist in the root folder (cordova config.xml docs)

Usage

Create an icon.png file in the root folder of your cordova project. You can provide a platform-specific icon by naming it icon-[platform].png (e.g icon-android.png, icon-ios.png). Then run:

 $ cordova-icon

You also can specify manually a location for your config.xml or icon.png:

 $ cordova-icon --config=config.xml --icon=icon.png

If you run a old version of Cordova for iOS / Mac and you need your files in /Resources/icons/, use this option:

 $ cordova-icon --xcode-old

For good results, your file should be:

• square
• for Android and iOS, at least 1024*1024px
• for Windows, at least 1240*1240px

Notes:

• Your config.ml file will not be updated by the tool (because images are automatically created in the good folders)
• Therefore, in your config.xml, be sure to remove all lines looking like <icon src="res/android/ldpi.png" density="ldpi" />

Creating a cordova-cli hook

Since the execution of cordova-icon is pretty fast, you can add it as a cordova-cli hook to execute before every build. To create a new hook, go to your cordova project and run:

$ mkdir hooks/after_prepare
$ vi hooks/after_prepare/cordova-icon.sh

Paste the following into the hook script:

#!/bin/bash
cordova-icon

Then give the script +x permission:

$ chmod +x hooks/after_prepare/cordova-icon.sh

That's it. Now every time you cordova build, the icons will be auto generated.

Splash screens

Check out cordova-splash

More

• cordova-plugin-inapppurchase - a lightweight cordova plugin for in app purchases on iOS/Android
• ng-special-offer - prompt users to rate your cordova app in the app store
• ionic-lock-screen - passcode lock screen for ionic (with touch id support for iOS)
• ionic-zoom-view - an easy way to add a zoom view to images using an ionic modal
• ng-persist - store data on mobile devices (using cordova) that persists even if the user reinstalls the app

License

MIT

cordova-icon's Issues

throw er; // Unhandled 'error' event

Hello,

When running "cordova-icon" i get the following error message:

$ cordova-icon --help

Checking Project & Icon

✓ platforms found: ios, android
✓ icon.png exists
✓ config.xml exists

Generating Icons for ios

events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn convert ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1046:32)
at child_process.js:1137:20
at process._tickCallback (node.js:355:11)

Anybody have a solution?

Thanks ;)
BR/benner

An alternative way to this problem - glob traget png files

Problem 1: If you source image is not square you'll notice on "emulate" xcode failing.
Problem 2: Its not up to date

So why not go the different route, only "update" the images which are in the target directory?
I wrote a simple PHP script instead.

The strategy is: resize always from origin to dest.
Use the png files in destination directories - thereby its always up to date.

So I was able to also create launchimages easily by adding a second directory.

Maybe it would even be best if the image files could be configured in the project directory so that you can avoid some which are important to you.

Maybe this code helps somebody as well.

    ## generate icons
    <?php

    $app_name = "";

    $source = "icon.png";
      $target_dirs = ["platforms/ios/$app_name/Images.xcassets/LaunchImage.launchimage/" , "platforms/ios/$app_name/Images.xcassets/AppIcon.appiconset/"];

    foreach ($target_dirs as $td) {
      foreach(glob($td."/*.png") as $file){
        echo $file."\n";
        $img_source = imagecreatefromstring(file_get_contents($source));
        $size_source = getimagesize($source);
        $size_target = getimagesize($file);
        $img_target = imagecreatefromstring(file_get_contents($file));

        imagecolortransparent($img_target, imagecolorallocatealpha($img_target, 0, 0, 0, 127));
        imagealphablending($img_target, false);
        imagesavealpha($img_target, true);

        imagecopyresampled($img_target, $img_source, 0, 0, 0, 0, $size_target[0], $size_target[1], $size_source[0], $size_source[1]);
        imagepng($img_target, $file);
      }

    }

Different icons for iOS and Android

I use different icons for iOS and Android. Would it be possible to define two source icons? Thanks for your work!

Problem to generate the icons

Checking Project & Icon

✓ platforms found: android
✓ icon.png exists
✓ config.xml exists

Generating Icons for android

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)

Check to see if ios is using assets catalog

First off, loving the script, a big life saver for cordova apps. Not sure if this would be possible, but it would be great if you could updates the icons for ios in the assets catalog.

Error: Command failed: Invalid Parameter - -set

Any idea how to solve this?
D:\projects\poc\mobile\abcdxapp>cordova-icon

Checking Project & Icon

√ platforms found: ios, android
√ icon.png exists
√ config.xml exists

Generating Icons for ios

{ [Error: Command failed: Invalid Parameter - -set
] timedOut: false, killed: false, code: 4, signal: null }

D:\projects\poc\mobile\abcdxapp>

Separate transparent background

Generally, Android has transparent icons and iOS does not. It would be nice to optionally add a transparent version of the icon.

Example:
icon.png <-- main
icon-transparent.png <-- transparent version
or perhaps
icon-ios.png
icon-android.png

missing icon for ipad pro

ipad pro icon 83.5pt is missing in the generation

Splash screens

Thank you very much for this great script!
Would it be hard to support also splash screen creation?

Icon folder change

For Cordova CLI [email protected] the location for the icons have moved.

/Images.xcassets/AppIcon.appiconset/

Error: spawn convert ENOENT

MBP-de-Pablo:cordova-app pablo$ cordova-icon

Checking Project & Icon

✓ platforms found: ios, android
✓ icon.png exists
✓ config.xml exists

Generating Icons for ios

events.js:160
throw er; // Unhandled 'error' event
^

Error: spawn convert ENOENT
at exports._errnoException (util.js:1026:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)

Fails to detect Android platform installed

tchiverton@ev34:/workspace/aki-app-ionic$ cordova platforms list
Installed platforms: android 3.6.4
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, ubuntu
tchiverton@ev34:/workspace/aki-app-ionic$ cordova-icon

Checking Project & Icon

✗ No cordova platforms found. Make sure you are in the root folder of your Cordova project and add platforms with 'cordova platform add'

tchiverton@ev34:~/workspace/aki-app-ionic$

Usage outside of cordova

This is a really useful tool. But now I'm doing react native. Anyway drop the dependency that the tool be run from a cordova project?

Cant install 0.30 via NPM

I'm starting with a 512x512 png and on my Nexus 5, the icon looks fuzzy, like it's not a perfect downsampling but rather a scaled down icon that is then sampled up 10%.

Not sure if I'm using the latest version though, since I'm not seeing a xxhdpi version generated.
Inside the index.js file I got I only see the xhdpi line. When I try to unzip the package from this page into node modules, I get a crash.

Installed the cordova icon with

sudo npm install cordova-icon -g

Version returned by

npm list -g

is cordova-icon 0.2.0

Initial icon.png size requirements ?

The README.md would be better with a short statement about icon.png's requirements.
I'am starting with icon.png of 128*128px, but I have no idea if it's fine for all possible cases / platforms. If you know, please add it.

And, naturally, thanks for this repository!

check if script runs from a cordova project root folder

Apple is rejecting binaries for missing required icons with Xcode 8 / iOS 10.

I am working on a change to cordova-icon to support the missing icons that my binary is now being rejected for with Xcode 8 / iOS 10. cordova-icon has brilliantly worked for us all the way up to a month ago with our last Xcode 7 / iOS 9 release, so I think the problem is that Apple has changed some requirements.

From the rejection email:

Missing required icon file - The bundle does not contain an app icon for iPhone / iPod Touch of exactly '57x57' pixels, in .png format for iOS versions < 7.0.

Missing required icon file - The bundle does not contain an app icon for iPad of exactly '72x72' pixels, in .png format for iOS versions < 7.0.

I am working on a local change to fix this, which I can submit a pull request for. I attempted to address the first rejection by adding the following lines to the ios section of index.js:

{ name : 'icon-57.png',       size : 57  },
{ name : '[email protected]',    size : 114 },

When I submit this, Apple stops complaining about the 72x72 icon, and continued to complain about the 57x57 icon!!

Let me restate that just to be clear. Adding a specification for the 57x57 icon eliminates the complaint about the 72x72 icon, but not the 57x57 icon.

I am continuing to analyze and hopefully work out a fix, but any help addressing this would be greatly appreciated.

support "[email protected]"

Seems like Apple is now requiring "[email protected]" with ios8

spawn convert ENOENT

Hi there!
I am having an issue to run your tool. It says:
Checking Splash & Icon

✓ model/icon.png exists
✓ model/splash.png exists

Generating Icons for ios

events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn convert ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)

Do you have any idea what is wrong?

Cheers,
Andrej

Doesnt work at all

C:\Users\gregc2\Desktop\ionicsignup - Copy\cordova>cordova-icon

Checking Project & Icon

√ platforms found: android
? icon.png does not exist in the root folder

C:\Users\gregc2\Desktop\ionicsignup - Copy\cordova>cordova-ico

Checking Project & Icon

√ platforms found: android
√ icon.png exists
√ config.xml exists

Generating Icons for android

{ [Error: Command failed: Invalid Parameter - -set
] timedOut: false, killed: false, code: 4, signal: null }

0.8.0 uses wrong folder for IOS icons

I've just run:

npm install cordova-icon

It looks like the icons for IOS are being written to the Resources folder, as if #55 is not included.

Error when launching cordova-icon

When I launch cordova-icon when it begin the icons for iOS (but it's the same for android) I get this error :

envent.js:72
throw er; // Unhandled 'error' event

Error: spawn ENOENT
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34)

Thanks in advance.

Supply Content.json for iOS

Images.xcassets didn't exist for me. First I created it manually. Later I realized that migrating to asset catalog inside xcode created these folders.

Created a new project just for getting the Content.json (so I didn't have to do it manually)

However, I discovered that some of the icons and most of the splash screens aren't mapped by the default Content.json generated by xcode (because filename isn't specified)

Now I'm still having to do it by hand...

And if all this is soved by doing it in another order or something then it would be nice to have it written in the readme

config.xml is not updated

Hi

When I run cordova-icon, the image files are generated but the config.xml file is not updated.
Is is normal ?
Should we edit it manually to target the generated images ?

Create a tag

Somebody submitted this project at VersionEye. But without a tag there is not much to track. Why not creating a first SNAPSHOT tag? And please use semantic versioning ;-)

0.8.0 Does not have latest changes.

Current official npm package does not have latest changes.

Reproducing steps:

$ npm install -g cordova-icon
$ grep xcassets <global node_modules path>/cordova-icon/index.js

Nexus7

Can't see all icons generated for Nexus7. Missing ones for GCM notifications.
Not sure if the issue is for Nexus7 only or other tablets too.

generate icons got removed after run "cordova run android"

I used cli to build locally.

First, 'cordova-icon' generated icons under '\platforms\android\res\drawable' etc.

Then, 'cordova run android' prompted that it could not find these generated icons and I found these icons got deleted(or removed?) during 'cordova run android' process.

I googled a lot but can not find a solution, and this is not an real issue. I just can not make this work, help me please.

Missing recommended icon sizes

Love the tool btw. I get the following warnings when submitting a recent app

 Missing recommended icon file - The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels, in .png format for iOS versions >= 7.0.

Missing recommended icon file - The bundle does not contain an app icon for iPad of exactly '76x76' pixels, in .png format for iOS versions >= 7.0.

Missing recommended icon file - The bundle does not contain an app icon for iPad of exactly '152x152' pixels, in .png format for iOS versions >= 7.0. 

add support for all cordova platforms

Support mipmap-* icon directories for [email protected]

Please support cordova-android v6.0.0. It expects icons in 'platforms/android/res/mipmap-*' directories instead of 'drawable' directories.
As I see it was changed by CB-8722.

Default App Icon doesn't change on Android?

Hello, May I know why the default icon doesn't change on my Android Device after following the step you provided.

The icon are generated successfully, and rebuild and deploy. But the app icon doesn't take effect.

Should we clean some cache or sth to achieve?
Or Do we need to modify the config.xml under the root of cordova project?

Thanks a lot.

Icons not created and config.xml not updates?

Hi there,

i followed the steps installing cordova-icon. I placed a icon.png inside the root folder and executed the cordoba-icon command.

` Checking Project & Icon

✓ platforms found: ios, android
✓ icon.png exists
✓ config.xml exists

Generating Icons for ios

✓ icon-40.png created
✓ [email protected] created
✓ icon-50.png created
✓ icon-60.png created`

Now where are these? I can't find. Also the config.xml seems not getting updates, is this correct?

kind regards!

Publish 0.9.1 to npm

Please publish v0.9.1 to npm.
Thanks!

Android Icon doesn't update

I change my icon.png... When I run whith android CLI I keep old icon... On ios I have the new one.
I tried to delete platforms folders and re install but I keep the old bad icon...
I forget something?

Still have the same error

Checking Project & Icon

✓ platforms found: ios
✓ icon.png exists
✓ config.xml exists

Generating Icons for ios

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:1001:11)
at Process.ChildProcess._handle.onexit (child_process.js:792:34)

TypeError: Cannot read property 'name' of undefined

Checking Project & Icon

✓ platforms found: ios, android
✓ icon.png exists
✓ config.xml exists
events.js:141
throw er; // Unhandled 'error' event
^

TypeError: Cannot read property 'name' of undefined
at /usr/local/lib/node_modules/cordova-icon/index.js:101:44
at Parser. (/usr/local/lib/node_modules/cordova-icon/node_modules/xml2js/lib/xml2js.js:462:18)
at emitOne (events.js:77:13)
at Parser.emit (events.js:169:7)
at Object.onclosetag (/usr/local/lib/node_modules/cordova-icon/node_modules/xml2js/lib/xml2js.js:423:26)
at emit (/usr/local/lib/node_modules/cordova-icon/node_modules/xml2js/node_modules/sax/lib/sax.js:625:33)
at emitNode (/usr/local/lib/node_modules/cordova-icon/node_modules/xml2js/node_modules/sax/lib/sax.js:630:3)
at closeTag (/usr/local/lib/node_modules/cordova-icon/node_modules/xml2js/node_modules/sax/lib/sax.js:874:5)
at Object.write (/usr/local/lib/node_modules/cordova-icon/node_modules/xml2js/node_modules/sax/lib/sax.js:1202:11)
at Parser.exports.Parser.Parser.parseString (/usr/local/lib/node_modules/cordova-icon/node_modules/xml2js/lib/xml2js.js:481:31)

iPhone Settings - IOS 5-8

Love using this plug-in and everything works great. There is one icon size that is missing for iPhone size:29 scale:3x

0.3.0 needs to be published to npm

See: http://url.brentvatne.ca/10idv

Error: Command failed

Hello,

I get an error when running cordova-icon

Checking Project & Icon

✓ platforms found: android
✓ icon.png exists
✓ config.xml exists

Generating Icons for android

{ [Error: Command failed: Invalid Parameter - -set
] timedOut: false, killed: false, code: 4, signal: null }

Am i missing some config? I got problems with the splashscreen aswell (but will place that in the right git)

wrench is deprecated

The author has recommended fs-extra.
Any plan to switch to using that?

cordova-icon not working, with imagemagick installed

I have been trying to run cordova-icon on a project and I get the following error during " Generating Icons for android":
Error:

 Checking Project & Icon

  ✓  platforms found: android
  ✓  icon.png exists
  ✓  config.xml exists

 Generating Icons for android

  ✓  drawable/icon.png created
{ [Error: Command failed: convert: unable to open image `platforms/android/res/drawable-ldpi/icon.png':     No such file or directory @ error/blob.c/OpenBlob/2701.
 convert: WriteBlob Failed `platforms/android/res/drawable-ldpi/icon.png' @   error/png.c/MagickPNGErrorHandler/1630.
 ] timedOut: false, killed: false, code: 1, signal: null }

I have imagemagick:
Version: ImageMagick 6.9.0-3 Q16 x86_64 2015-01-09 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2015 ImageMagick Studio LLC
Features: DPC Modules
Delegates (built-in): bzlib freetype jng jpeg ltdl lzma png xml zlib

And I am using OS X Yosemite version: 10.10.2

Error thrown on windows when running cordova-icon

I asked the question here:
http://stackoverflow.com/questions/26938411/cordova-icon-gives-error-on-run

Any help would be awesome!

Specify platform & folder to generate icons

Hi,

It would be nice if there is some parameters to specify wanted generated platform and output folder.
In my case I locally build Android and I want to build iOS on phonegap build. So I have to provide Android and iOS icons in the www folder but as I only added Android, iOS icons are not generated :(

Thanks for all

support for splash screens

Hi Alex, thanks for sharing your module. It has save me a lot of time already!
Do yo think it would be possible to add support for splash screens as well, or would it be better to put that in a separate cordova-splash module?

android unable to open image

Command failed: convert: unable to open image `platforms/android/res/drawable/icon.png': No such file or directory @ error/blob.c/OpenBlob/2675

[Suggestion] Expose API

Would you be able to refactor the code to expose an API that can be used from inside Node? It would be infinitely useful.
I could try to work on a PR for this if you are busy. Ditto for cordova-splashscreen.
Thanks!

check if ImageMagick is not installed and alert the user

unable to open image

not sure what this all means, signal, null. you could have wrote some meaningful errors

{ [Error: Command failed: convert: unable to open image platforms/android/res/drawable/icon.png': No such file or directory @ error/blob.c/OpenBlob/2701. convert: WriteBlob Failedplatforms/android/res/drawable/icon.png' @ error/png.c/MagickPNGErrorHandler/1630.
] timedOut: false, killed: false, code: 1, signal: null }

add high res android icons

http://stackoverflow.com/questions/10126310/how-to-comment-javascript-functions