Configuring Splash Screen and App Icon

1. Creating Splash Screen Image

Step	Description	Recommendations
1. Design	Design a splash screen image that matches your app's branding and theme.	Use a high-resolution image (1024x1024px or higher) to ensure crisp display on all devices.
2. Format	Save the image in PNG format for best quality and transparency support.	Ensure the image has no transparent areas if the background color is not intended to be transparent.
3. Size	Prepare multiple sizes for different device resolutions.	Common sizes: 2048x2048px (for iOS), 1024x1024px (for Android), and 512x512px (for web).
4. Placement	Place the image in the correct directory within your Ionic project.	Typically, it should be placed under `src/assets/img/splash.png`.

Example: Splash Screen Configuration in Ionic

// config.xml or capacitor.config.json
{
  "splash": {
    "src": "assets/img/splash.png",
    "androidOrientation": "portrait",
    "iosOrientation": "portrait"
  }
}

Note: The splash screen will be displayed while the app is loading. Ensure the image loads quickly to avoid a poor user experience.

2. Creating App Icon Image

Step	Description	Details
1	Design or select icon image	Use a high-resolution PNG or SVG file (1024x1024 pixels minimum). Ensure the image has a transparent background or appropriate padding.
2	Prepare icon for different platforms	Generate platform-specific icons (iOS, Android) using tools like `ionic generate` or manual creation.
3	Place icon in project directory	Place the icon file in `src/assets/icon.png` or similar location for easy access during build.

Example: Icon Configuration in Ionic

{
  "name": "MyApp",
  "icon": "src/assets/icon.png"
}

Note: For iOS, ensure the icon includes a transparent background to support different app themes.

Warning: Avoid using low-resolution images as they may appear pixelated on high-DPI screens.

3. Generating Platform Resources

Use the Ionic CLI to generate platform-specific resources like splash screens and app icons.

Resource	Command	Description
Splash Screen	`ionic generate splash`	Generates splash screen assets for iOS, Android, and web platforms.
App Icon	`ionic generate icon`	Generates app icon assets for various platforms.

Example: Generating Splash Screen

ionic generate splash --src=src/assets/splash.png

Example: Generating App Icon

ionic generate icon --src=src/assets/icon.png

Note: Ensure source images are high-resolution (e.g., 2048x2048 for splash screens) to avoid pixelation.

4. Configuring Splash Screen Duration

Property	Values	Description
splashScreenDuration	`3000`	Duration in milliseconds the splash screen is displayed
splashScreenShowDuration	`1000`	Minimum time the splash screen is shown before hiding

Example: Configuring Splash Screen Duration in Ionic Config

{
  "splashScreenDuration": 3000,
  "splashScreenShowDuration": 1000
}

Note: The splash screen will be displayed for the duration specified in splashScreenDuration, but will not hide until splashScreenShowDuration has elapsed.

5. Setting Splash Screen Background

Property	Values	Description
background	`color`, `image`	Defines the background type for the splash screen

Example: Configuring Background Color

{
  "splash": {
    "background": "color",
    "backgroundColor": "#ffffff"
  }
}

Example: Configuring Background Image

{
  "splash": {
    "background": "image",
    "image": "res/screen/splash.png"
  }
}

6. Using Fade Splash Out

Property	Values	Description
fadeSplash	`true` \| `false`	Controls whether the splash screen fades out after the app loads.
fadeSplashDuration	`number`	Duration in milliseconds for the fade-out animation (default: 300).

Example: Configure fade splash out

{
  "splash": {
    "fadeSplash": true,
    "fadeSplashDuration": 500
  }
}

Note: The fade effect is only visible if fadeSplash is set to true.

7. Handling Splash Screen Events

Event	Description	Usage
splashscreen:show	Fired when the splash screen is shown.	`document.addEventListener('splashscreen:show', () => { console.log('Splash screen shown'); });`
splashscreen:hide	Fired when the splash screen is hidden.	`document.addEventListener('splashscreen:hide', () => { console.log('Splash screen hidden'); });`

Example: Listening to Splash Screen Events

document.addEventListener('splashscreen:show', () => {
  console.log('Splash screen is now visible');
});

document.addEventListener('splashscreen:hide', () => {
  console.log('Splash screen is now hidden');
});

8. Configuring iOS LaunchScreen

Property	Description	Values
launchScreen	Configures the launch screen for iOS	`resources/launch-screen.png`
backgroundColor	Background color of the launch screen	`#ffffff`
image	Image to display on the launch screen	`resources/launch-screen.png`

Example: Configuring Launch Screen in config.xml

<platform name="ios">
  <launchScreen>
    <backgroundColor>#ffffff</backgroundColor>
    <image>resources/launch-screen.png</image>
  </launchScreen>
</platform>

Note: The launch screen image must be in PNG format and should be at least 2048x2048 pixels for optimal display on high-resolution devices.

9. Configuring Android Splash

Property	Values	Description
splashScreen	`true` or `false`	Enables or disables the splash screen
splashScreenDelay	`3000`	Duration in milliseconds to show the splash screen
splashScreenBg	`#ffffff`	Background color of the splash screen
splashScreenShowDuration	`500`	Duration in milliseconds to show the splash screen before hiding

Example: Android Splash Configuration

{
  "splashScreen": true,
  "splashScreenDelay": 3000,
  "splashScreenBg": "#ffffff",
  "splashScreenShowDuration": 500
}

Note: The splash screen is shown during app startup and can be customized in config.xml or ionic.config.json.

10. Using Animated Splash Screen

Animated splash screens in Ionic can be implemented using CSS animations or third-party libraries like Lottie. These provide a more engaging user experience during app startup.

Property	Description	Values	Notes
splashScreen.animation	Defines the animation type for splash screen	`fade`, `slide`, `none`	Default is `fade`
splashScreen.duration	Duration of the splash screen animation in milliseconds	`1000`, `2000`	Typically 1000-3000ms

Example: Configuring Animated Splash Screen

{
  "splashScreen": {
    "animation": "slide",
    "duration": 2000
  }
}

Note: The splash screen animation is only visible on native platforms (iOS, Android). Web apps will show a static splash screen.

Comparison: Animated vs Static Splash Screen

Animated: Provides better user engagement and visual feedback
Static: Faster load time, simpler to implement