Ionic 3 - splash screen size

Question

I need to generate splash screen for my ionic 3 application. Some of the sites mentioned that the correct size of splash screen image should be 2732*2732 and some other site mentioned that splash screen size should be 2208 * 2208. Which one is correct? However we tried with 2732*2732, but after generating splash screen, the image is not fit for the devices and splash screen is too big while display in devices. Any body have any idea about this?

App icon size should be 1024*1024 and it is working fine.

We execute the following command to generate the icons and splash screen for different size of devices for android and iOS devices.

ionic cordova resources

Thanks

Answer 1

We changed the splash image and now the new image (2732*2732) the icon has been centered. So while cropping the image the center icon won't cut and in all the devices it is working fine now.

In some sites they mentioned the size as 2208*2208. That's what confused.

So the problem with splash image now fixed.

The only problem for splash screen is that the icon of the splash screen should be centered. Otherwise image will get cropped while generating splash screen.

Thanks

Answer 2

I think the best way is to use the splash screen and icon generator for Ionic 3.

This works fine for me :

ICON

1. Create your icon icon.png or icon.psd or icon.ai. For me, I created my icon 1024x1024 with png extension
2. Save your icon into resources directory (example : your-project/resources/icon.png)
3. And just use ionic cordova resources --icon

SPLASH

1. Create your splash splash.png or splash.psd or splash.ai. For me, I created my splash 4816x4816 with png extension
2. Save your splash into resources directory (example : your-project/resources/splash.png)
3. And just use ionic cordova resources --splash

In your config.xml file, you will see code generated like this :

<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
    <icon height="57" src="resources/ios/icon/icon.png" width="57" />
    <icon height="114" src="resources/ios/icon/[email protected]" width="114" />
    <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
    <icon height="80" src="resources/ios/icon/[email protected]" width="80" />
    <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
    <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
    <icon height="100" src="resources/ios/icon/[email protected]" width="100" />
    <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
    <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
    <icon height="180" src="resources/ios/icon/[email protected]" width="180" />
    <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
    <icon height="144" src="resources/ios/icon/[email protected]" width="144" />
    <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
    <icon height="152" src="resources/ios/icon/[email protected]" width="152" />
    <icon height="167" src="resources/ios/icon/[email protected]" width="167" />
    <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
    <icon height="58" src="resources/ios/icon/[email protected]" width="58" />
    <icon height="87" src="resources/ios/icon/[email protected]" width="87" />
    <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
    <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
    <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
    <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
    <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
    <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
    <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
    <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
    <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
    <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
    <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
    <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
</platform>

If this doesn't work, you probably need to generate the platforms before.