Quasar CLI with Vite - @quasar/app-vite v3

App Icons for Cordova

Cordova icons and splash screens are native resources declared in /src-cordova/config.xml. The set below targets cordova-android 11+ (adaptive icons and the Android 12 splash screen API) and cordova-ios 8+ (a single 1024px icon with dark and tinted variants).

If you discover one file that is new or missing, please open an issue.

Icon Genie CLI

TIP

We highly recommend using the Icon Genie CLI, because it consumes a source icon and automatically clones, scales, minifies and places the icons in the appropriate directories for you. When needed, it also tells you what tags you’ll need to add to your /index.html file.

Quickly bootstrap the necessary images with Icon Genie CLI. For a complete list of options, please visit the Icon Genie CLI command list page.

icongenie generate -m cordova -i /path/to/source/icon.png [-b /path/to/background.png]

Manual instructions

Unless you are using Icon Genie CLI, replace the generated resources and keep their config.xml declarations aligned with the requirements of each installed Cordova platform.

What gets generated for Cordova mode:

Android adaptive icon per density: the foreground, background and monochrome layers (108dp canvas) plus the legacy src icon (48dp) for pre Android 8 launchers.
Android splash screen: a single 960px splashscreen.png (the adaptive icon at 240dp) declared through the AndroidWindowSplashScreenAnimatedIcon preference, with AndroidWindowSplashScreenBackground set to the splash screen color. The platform masks and animates it itself; the legacy <splash> images and cordova-plugin-splashscreen are no longer used, and Icon Genie removes them.
iOS app icon: one 1024px icon.png, plus icon-dark.png (transparent background) and icon-tinted.png (grayscale) for the iOS 18+ dark and tinted appearances.
iOS launch storyboard images: the six ~universal images, plus their ~dark variants when --splashscreen-dark-color is specified.

src-cordova/

res/

android/

ldpi.png

ldpi-foreground.png

ldpi-background.png

ldpi-monochrome.png

mdpi.png

mdpi-foreground.png

mdpi-background.png

mdpi-monochrome.png

hdpi.png

hdpi-foreground.png

hdpi-background.png

hdpi-monochrome.png

xhdpi.png

xhdpi-foreground.png

xhdpi-background.png

xhdpi-monochrome.png

xxhdpi.png

xxhdpi-foreground.png

xxhdpi-background.png

xxhdpi-monochrome.png

xxxhdpi.png

xxxhdpi-foreground.png

xxxhdpi-background.png

xxxhdpi-monochrome.png

screen/

android/

splashscreen.png

# Android 12+ splash screen icon

ios/

Default@2x~universal~anyany.png

Default@2x~universal~comany.png

Default@2x~universal~comcom.png

Default@3x~universal~anyany.png

Default@3x~universal~anycom.png

Default@3x~universal~comany.png

Default@2x~universal~anyany~dark.png

# with --splashscreen-dark-color

Default@2x~universal~comany~dark.png

# with --splashscreen-dark-color

Default@2x~universal~comcom~dark.png

# with --splashscreen-dark-color

Default@3x~universal~anyany~dark.png

# with --splashscreen-dark-color

Default@3x~universal~anycom~dark.png

# with --splashscreen-dark-color

Default@3x~universal~comany~dark.png

# with --splashscreen-dark-color

ios/

icon.png

icon-dark.png

# dark appearance

icon-tinted.png

# tinted appearance

And here is part of what your config.xml should look like:

<platform name="android">
    <icon density="ldpi" src="res/android/ldpi.png"
          foreground="res/android/ldpi-foreground.png"
          background="res/android/ldpi-background.png"
          monochrome="res/android/ldpi-monochrome.png" />
    <icon density="mdpi" src="res/android/mdpi.png"
          foreground="res/android/mdpi-foreground.png"
          background="res/android/mdpi-background.png"
          monochrome="res/android/mdpi-monochrome.png" />
    <icon density="hdpi" src="res/android/hdpi.png"
          foreground="res/android/hdpi-foreground.png"
          background="res/android/hdpi-background.png"
          monochrome="res/android/hdpi-monochrome.png" />
    <icon density="xhdpi" src="res/android/xhdpi.png"
          foreground="res/android/xhdpi-foreground.png"
          background="res/android/xhdpi-background.png"
          monochrome="res/android/xhdpi-monochrome.png" />
    <icon density="xxhdpi" src="res/android/xxhdpi.png"
          foreground="res/android/xxhdpi-foreground.png"
          background="res/android/xxhdpi-background.png"
          monochrome="res/android/xxhdpi-monochrome.png" />
    <icon density="xxxhdpi" src="res/android/xxxhdpi.png"
          foreground="res/android/xxxhdpi-foreground.png"
          background="res/android/xxxhdpi-background.png"
          monochrome="res/android/xxxhdpi-monochrome.png" />
    <preference name="AndroidWindowSplashScreenAnimatedIcon" value="res/screen/android/splashscreen.png" />
    <preference name="AndroidWindowSplashScreenBackground" value="#ffffff" />
</platform>
<platform name="ios">
    <icon src="res/ios/icon.png" />
    <icon src="res/ios/icon-dark.png" foreground="true" />
    <icon src="res/ios/icon-tinted.png" monochrome="true" />
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~anyany~dark.png" /> <!-- with --splashscreen-dark-color -->
    <splash src="res/screen/ios/Default@2x~universal~comany~dark.png" /> <!-- with --splashscreen-dark-color -->
    <splash src="res/screen/ios/Default@2x~universal~comcom~dark.png" /> <!-- with --splashscreen-dark-color -->
    <splash src="res/screen/ios/Default@3x~universal~anyany~dark.png" /> <!-- with --splashscreen-dark-color -->
    <splash src="res/screen/ios/Default@3x~universal~anycom~dark.png" /> <!-- with --splashscreen-dark-color -->
    <splash src="res/screen/ios/Default@3x~universal~comany~dark.png" /> <!-- with --splashscreen-dark-color -->
</platform>