Capacitor is one of the most complicated of all of the build targets as far as icons go, because not only do you need to place the icons in specific folders, you also need to register them in config files for both platforms (Android, iOS).
If you discover one file that is new or missing, please open an issue.
Native projects only. The icons are written inside /src-capacitor/android and /src-capacitor/ios, so a platform gets its assets only after it was added to the Capacitor project (which happens on the first quasar dev/build for that target).
Icon Genie CLI
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 capacitor -i /path/to/source/icon.png [-b /path/to/background.png]What gets generated for Capacitor mode:
- Android adaptive icon: the
ic_launcher_foregroundlayer (your icon, fitted to the safe zone of the 108dp canvas), theic_launcher_backgroundlayer (the--backgroundimage, or a flat--png-colorfill) and theic_launcher_monochromelayer for Android 13+ themed icons (the shape of your icon, or of--icon-monochrome), plus theic_launcherandic_launcher_roundicons that pre Android 8 launchers show. The adaptive icon XML files inmipmap-anydpi-v26are updated to point to the generated layers. - Android splash screens: the portrait and landscape
splash.pngdrawables for every density. - iOS app icon: the single 1024px
AppIcon-512@2x.pngthat Xcode 14+ requires, plus the dark (transparent background) and tinted (grayscale) variants for the iOS 18+ appearances. - iOS splash screens: the three
Splash.imagesetimages (1x, 2x, 3x). TheContents.jsonof each image set is updated to list the generated files.
Add --splashscreen-dark-color <hex> to also generate the dark variants of the splash screens: Android night resources (drawable-night, drawable-port-night-*, drawable-land-night-*) and iOS images registered for the dark appearance. They use the --background-dark image when specified (the --background one otherwise). Without the param, no dark variants are generated and any previously generated ones are removed.
The @capacitor/splash-screen plugin gets installed into /src-capacitor if it is not already, as it is the one displaying the splash screens.
Android splash screen scaling. On Android 12+ the launch splash is the system’s icon-based one and the splash.png drawables are only painted when your app calls the plugin’s show(). The plugin would stretch them (FIT_XY), so defineCapacitorConfig defaults the plugin’s androidScaleType to CENTER_CROP, which the generated images are composed for (icon centered, background covering).
Manual instructions
Unless you are using the Icon Genie app extension, these are the files that you need to replace: