I think it hasn’t landed yet in the CLI, please read the “What’s Next” paragraph at the end of this post: http://ionicframework.com/blog/automating-icons-and-splash-screens/
Same problem with aspect ratio!
Thanks for that tool, I was actually having trouble with handling the splash image for iPhone 6 and 6+, so this comes in at the right time !
So I tried a few minutes ago, using the .psd template provided in the blog post. Everything went well in the cloud, and I got all my images in ./resources/ios/splash/. I did a ionic build ios, went to Xcode and tested the app in the iPhone 6 simulator.
No luck. The images are there, the config.xml does point to the right images for the right sizes (not sure actually but it did update the config.xml) but no splash is displayed…
Am I missing something ?
BTW I’m using cordova 3.6.3-0.2.13
OK on Windows with Android the splashscreen is not working.
I created a blank project : ionic start splash tabs
I copied the pictures in the resource folder.
I created the platform : ionic platform android
C:\Users\DEV\splash>ionic resources
Ionic icon and splash screen resources generator
V icon android drawable-ldpi-icon.png (36x36) from cache
V icon android drawable-mdpi-icon.png (48x48) from cache
V icon android drawable-hdpi-icon.png (72x72) from cache
V icon android drawable-xhdpi-icon.png (96x96) from cache
V icon android drawable-xxhdpi-icon.png (144x144) from cache
V icon android drawable-xxxhdpi-icon.png (192x192) from cache
V splash android drawable-land-ldpi-screen.png (320x200) from cache
V splash android drawable-land-mdpi-screen.png (480x320) from cache
V splash android drawable-land-hdpi-screen.png (800x480) from cache
V splash android drawable-land-xhdpi-screen.png (1280x720) from cache
V splash android drawable-land-xxhdpi-screen.png (1600x960) from cache
V splash android drawable-land-xxxhdpi-screen.png (1920x1280) from cache
V splash android drawable-port-ldpi-screen.png (200x320) from cache
V splash android drawable-port-mdpi-screen.png (320x480) from cache
V splash android drawable-port-hdpi-screen.png (480x800) from cache
V splash android drawable-port-xhdpi-screen.png (720x1280) from cache
V splash android drawable-port-xxhdpi-screen.png (960x1600) from cache
V splash android drawable-port-xxxhdpi-screen.png (1280x1920) from cache
I added these preferences in the confif.xml at the root of my project :
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashScreenDelay" value="10000"/>
I add the splashscreen project
C:\Users\DEV\splash>cordova plugin add org.apache.cordova.splashscreen
Fetching plugin “org.apache.cordova.splashscreen” via plugin registry
npm http GET http://registry.cordova.io/org.apache.cordova.splashscreen
npm http 304 http://registry.cordova.io/org.apache.cordova.splashscreen
Installing “org.apache.cordova.splashscreen” for android
And on the ionic run android, it’s not working… on the android device. (Nexus 4)
What are the source image’s dimensions, what format is it in, and what are the dimensions of the image that doesn’t maintain the aspect ratio.
Also, because you’re including more images in your build, Android and iOS will “crunch” the PNG files to be smaller. It’s a good thing because it makes your app a smaller download (but it does take longer to build because of it).
Try adding this also:
<preference name="SplashScreen" value="screen"/>
The next CLI release will do this automatically for Android splash screens.
Hello @adam thank you very much, it is working properly now.
So for others to recap, after a proper resource generation, the config.xml look like :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.splah338879" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>splah</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="android">
<icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="10000" />
<icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
</widget>
2 Likes
Oh cool idea! I’ll add that in quick and will probably be in the next CLI release. Thanks!
2 Likes
my ionic version is 1.3.0-beta1 and i create ./resources, but I running “ionic resources”,show:
Ionic icon and splash screen resources generator
✗ icon source file not found in any of these directories: resources, resources/ios
✗ valid icon source files: icon.psd, icon.ai, icon.png
✗ splash source file not found in any of these directories: resources, resources/ios
✗ valid splash source files: splash.psd, splash.ai, splash.png
why?
1 Like
I am using your provided splash.psd template file, the dimensions are unchanged. I just put some graphics on a new layer.
Not sure which dimension is selected when I run the app, the phone has a normal 720x1280 px screen.
The crunch thing is a good thing, but not when it is done each build even if the image has not changed…!
If the result was cached somewhere it would be fine, but the way it is now it slows down development a lot.
Hello,
I’m having some issues with this feature. I created my icon.png and splash.png using the provided PSD template and did create all icons and splash pages using the command line utility.
Then I noticed that there were some light blue lines behind the grid in the templates, so I recreated my PNG files and tried to run the command and here what I get:
$ ionic resources
Ionic icon and splash screen resources generator
uploading icon.png…
uploading splash.png…
✗ Error parsing upload response:
I tried to remove the resource directory, recreate, use PNG files without alpha channel, use the original PSD templates, nothing. I keep getting the same error showed above. Tried to update ionic but I’m already running the latest version:
$ ionic --v
1.3.0-beta1
Any help will be much appreciated
2 Likes
I have exactly the same issue, with PNG ou PSD
ionic resources
Ionic icon and splash screen resources generator
uploading icon.psd…
uploading splash.psd…
✗ Error parsing upload response:
ionic --v
1.3.0-beta1
The command create sub directories resources/android/icon & resources/android/splash but they are both empty.
1 Like
kind of strange because it was working properly before and now I encounter the same error.
When I cut the internet connection i have a : ? Failed to upload source image: requires network connection
@adam I guess it’s something connected which provocate this error no ?
About this error :
✗ Error parsing upload response:
Everything looks fine today. The upload process is working.
Icon is OK on my mobile.
1 Like
Thanks, I love this!
Some minor problems I encountered:
-
I used AI files at first, which came out in a significantly different shade of color.
-
Then I used PNG, but got this error for the iOS icon:
Invalid upload: invalid image id: ‘d1ebd05’
Which is weird, because I’m using a very similar image for Android, generated from the same PSD with the same settings.
This is the image that gives the error:
The “invalid image id” error should be fixed now. Thanks for providing the image to help test with!
1 Like
If anyone using Windows wants to generate iOS resources, create ios (android, winphone, etc.) folder under platforms directory and run the tool. Works with 1.0.0-beta.13.
Yay, thank you! One of the most surprisingly difficult things I found was getting the icons right, especially for IOS. I ended up having to use a combination of two icon generation plugins which isn’t ideal.
This one the other hand is perfik, and splash screens too, something I hadn’t even bothered with 
Thank you ever so much for Ionic Framework
I’ve got a problem with some images not being generated.
If I open the files in a texteditor they say
Unrecoverable error: rangecheck in setscreen
Operand stack:
0.0878851 0 --nostringval--
and If I try to run the operation once again, it only reloads the broken images from the cache, can I some how force the recreation of them?
It seems that it always are the same images that don’t get generated.
android/icon/drawable-ldpi-icon.png
ios/icon/icon-40.png
ios/icon/icon-small.png
Wow! Worked 100% for me. This was one of the biggest struggles when getting my app out. Thank you so much!