4

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

AnKr
  • 433
  • 1
  • 6
  • 20
  • Splash image size is 2732 * 2732. Ionic generated automatically other splash based on device size . But splash is not fit to screen then make custome image based on given size in config.xml – keval nayak Jul 17 '18 at 04:01

4 Answers4

5

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

AnKr
  • 433
  • 1
  • 6
  • 20
  • You are correct! The source image’s minimum dimensions should be 2732×2732 pixels. The Ionic team says: The splash screen’s artwork should roughly fit within a center square (1200×1200 pixels). This template provides the recommended size and guidelines about the artwork’s safe zone. https://ionicframework.com/blog/automating-icons-and-splash-screens/ – Guilherme Sampaio Aug 21 '19 at 11:58
3

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/icon@2x.png" width="114" />
    <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
    <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
    <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
    <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
    <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
    <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
    <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
    <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
    <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
    <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
    <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
    <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
    <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
    <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
    <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
    <icon height="87" src="resources/ios/icon/icon-small@3x.png" 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.

XenoX
  • 409
  • 6
  • 14
1

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.

Rob
  • 2,243
  • 4
  • 29
  • 40
0

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.

Mangesh Daundkar
  • 1,026
  • 1
  • 15
  • 20