cordova-icon-splash
v1.0.2
Published
Automatic icon and splash resizing for Cordova, supports android Adaptive Icons, exports to res/icon, res/secreen, config.xml should be set accordingly.
Downloads
4
Readme
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 1240x1240pxsplash.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, exampleconfig.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/[email protected]" width="80" height="80" />
<icon src="res/icon/ios/icon-50.png" width="50" height="50" />
<icon src="res/icon/ios/[email protected]" width="100" height="100" />
<icon src="res/icon/ios/icon-60.png" width="60" height="60" />
<icon src="res/icon/ios/[email protected]" width="120" height="120" />
<icon src="res/icon/ios/[email protected]" width="180" height="180" />
<icon src="res/icon/ios/icon-72.png" width="72" height="72" />
<icon src="res/icon/ios/[email protected]" width="144" height="144" />
<icon src="res/icon/ios/icon-76.png" width="76" height="76" />
<icon src="res/icon/ios/[email protected]" width="152" height="152" />
<icon src="res/icon/ios/[email protected]" width="167" height="167" />
<icon src="res/icon/ios/icon-small.png" width="29" height="29" />
<icon src="res/icon/ios/[email protected]" width="58" height="58" />
<icon src="res/icon/ios/[email protected]" width="87" height="87" />
<icon src="res/icon/ios/icon.png" width="57" height="57" />
<icon src="res/icon/ios/[email protected]" 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