CODEWITHSUNDEEP
ionic3splash-screenappicon
AnKr
AnKr

Reputation: 453

Ionic 3 - splash screen size

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

Upvotes: 4

Views: 12462

Answers (4)

AnKr
AnKr

Reputation: 453

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

Upvotes: 5

XenoX
XenoX

Reputation: 409

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.

Upvotes: 3

Rob
Rob

Reputation: 2323

When you add a platform with ionic cordova platform add it generates a folder named resources within the root folder. Inside resources you'll find the generated icon.png and splash.png files with the correct sizes, that would be 1024x1024 and 2732x2732. As fas as I'm concerned, You should use that exact dimensions, not smaller, not bigger.

Upvotes: 1

Mangesh Daundkar
Mangesh Daundkar

Reputation: 1046

The source image for splash screens should ideally be at least 2732×2732px. But use only background white screen of this size with icon position centralized. Don't use icon of this size.

Upvotes: 0

Related Questions