cordova-icon-splash v1.0.2

cordova-icon-splash

Automatic icon and splash screen resizing for Cordova. Create icon.png, splash.png in the root folder of your Cordova project, use cordova-icon-splash to automatically generate related icons and splashes for (ios, android, windows), icons will be generated under {root}\res\icon\\{platform}\, splashes under {root}\res\screen\\{platform}\, you must configure your config.xml to use these files, see the example in Notes bellow.

Important!

This is a compination of cordova-icon and cordova-splash, BUT, it does not create the icons, splashes directly in the related platform project, Instead, it depends on config.xml related configurations, see Notes bellow.

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-splash -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 these files in the root folder of your cordova project.

• icon.png: for Android and iOS, at least 1024x1024px, for Windows, at least 1240x1240px
• splash.png: The splash screen image should be 2208x2208 px with a center square of about 1200x1200 px. The image may be cropped around the center square. You can also use larger images with similar proportions.
• icon26.png: optional, for android api-26 and above, make the icon with 1024x1024 then make canvus size 1536x1536px with transparent background

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-splash

Notes:

• Your config.xml file will not be updated by the tool, example config.xml

    <platform name="android">
        <allow-intent href="market:*" />
        <!-- https://cordova.apache.org/docs/en/latest/config_ref/images.html -->
        <resource-file src="res/values/colors.xml" target="/app/src/main/res/values/colors.xml" />
        <icon background="@color/background" density="ldpi" src="res/icon/android/icon-36-ldpi.png" foreground="res/icon/android/icon-36-ldpi.png" />
        <icon background="@color/background" density="mdpi" src="res/icon/android/icon-48-mdpi.png" foreground="res/icon/android/icon-48-mdpi.png" />
        <icon background="@color/background" density="hdpi" src="res/icon/android/icon-72-hdpi.png" foreground="res/icon/android/icon-72-hdpi.png" />
        <icon background="@color/background" density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" foreground="res/icon/android/icon-v26-96-xhdpi.png" />
        <icon background="@color/background" density="xxhdpi" src="res/icon/android/icon-144-xxhdpi.png" foreground="res/icon/android/icon-v26-144-xxhdpi.png" />
        <icon background="@color/background" density="xxxhdpi" src="res/icon/android/icon-192-xxxhdpi.png" foreground="res/icon/android/icon-v26-192-xxxhdpi.png" />
        <!-- https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html -->
        <!-- land -->
        <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
        <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
        <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
        <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
        <splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi"/>
        <splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-xxxhdpi"/>
        <!-- port -->
        <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
        <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
        <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
        <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
        <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi"/>
        <splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-xxxhdpi"/>
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <!-- https://cordova.apache.org/docs/en/latest/config_ref/images.html -->
        <icon src="res/icon/ios/icon-40.png" width="40" height="40" />
        <icon src="res/icon/ios/icon-40@2x.png" width="80" height="80" />
        <icon src="res/icon/ios/icon-50.png" width="50" height="50" />
        <icon src="res/icon/ios/icon-50@2x.png" width="100" height="100" />
        <icon src="res/icon/ios/icon-60.png" width="60" height="60" />
        <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120" />
        <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180" />
        <icon src="res/icon/ios/icon-72.png" width="72" height="72" />
        <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144" />
        <icon src="res/icon/ios/icon-76.png" width="76" height="76" />
        <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152" />
        <icon src="res/icon/ios/icon-83.5@2x.png" width="167" height="167" />
        <icon src="res/icon/ios/icon-small.png" width="29" height="29" />
        <icon src="res/icon/ios/icon-small@2x.png" width="58" height="58" />
        <icon src="res/icon/ios/icon-small@3x.png" width="87" height="87" />
        <icon src="res/icon/ios/icon.png" width="57" height="57" />
        <icon src="res/icon/ios/icon@2x.png" width="114" height="114" />
        <icon src="res/icon/ios/icon-167.png" width="167" height="167" />
        <!-- https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html -->
        <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
        <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
        <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
        <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
        <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
        <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
        <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
        <splash src="res/screen/ios/Default@2x~ipad~comany.png" />
    </platform>

MIT