如何删除或替换Ionic浏览器应用启动时加载的默认图片？

Hey there, I get it—having that random default splash pop up when you refresh your Ionic browser app is super annoying. Let’s walk through two solid ways to fix this: either replacing it with your custom splash.png (the one that works great on Android) or removing it entirely.

Option 1: Replace the Default Splash with Your Custom Image #

This keeps your app’s branding consistent across platforms. Here’s how to make it stick:

1. Locate the browser splash resources: When you build the browser platform, Cordova drops default splash images in myApp/platforms/browser/www/img/splash/ (swap slashes for \ if you’re on Windows). These come in multiple resolutions to support different devices.
2. Update your config.xml:
   Open your project’s root config.xml, find the <platform name="browser"> section, and rewrite all <splash> tags to point to your resources/splash.png. Keep the existing target attributes—they’re optimized for browser environments. Example:

   <platform name="browser">
     <splash src="resources/splash.png" target="android-chrome-192x192"/>
     <splash src="resources/splash.png" target="android-chrome-512x512"/>
     <splash src="resources/splash.png" target="apple-touch-startup-image-1536x2048"/>
     <!-- Repeat this for all existing splash targets in the section -->
   </platform>
   

3. Rebuild the browser platform:
   Run these commands to ensure your custom splash replaces the default one:

   ionic cordova platform rm browser
   ionic cordova platform add browser
   ionic cordova build browser
   

   This forces Cordova to regenerate the platform resources using your image.

Option 2: Remove the Splash Screen Entirely #

If you don’t want any splash to appear on refresh, follow these steps:

1. Clean up config.xml:
   Delete all <splash> tags inside the <platform name="browser"> section. If the platform section is empty after this, you can remove it entirely.
2. Delete existing splash files:
   Navigate to myApp/platforms/browser/www/img/splash/ and delete every image file in that folder.
3. Strip leftover references from index.html:
   Open platforms/browser/www/index.html and look for lines like <link rel="apple-touch-startup-image" href="img/splash/...">—delete all of these.
4. Rebuild the app:
   Run the same rebuild commands as above to apply the changes.

Quick Tips to Avoid Repeat Issues #

• Every time you re-add the browser platform, Cordova might re-generate default splash resources—so you’ll need to repeat these steps if that happens.
• For the custom splash option, make sure your splash.png is high-resolution (at least 2048x2048) so it scales cleanly across all device sizes without looking blurry.

内容的提问来源于stack exchange，提问作者Jeremy Deschamps