---
title: 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](https://github.com/quasarframework/quasar/issues).

## Icon Genie CLI

> [!TIP]
> We highly recommend using the [Icon Genie CLI](../../icongenie/introduction.md), 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](../../icongenie/command-list.md) command list page.

```bash
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:

```xml
<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>
```