app-icons-capacitor.md

title	App Icons for Capacitor
desc	(@quasar/app-vite) How to manage the app icons for a Quasar hybrid mobile app with Capacitor.
scope	tree l c . l c android l c app l c src l c main l c res l c drawable l splash.png l c drawable-land-hdpi l splash.png l c drawable-land-mdpi l splash.png l c drawable-land-xhdpi l splash.png l c drawable-land-xxhdpi l splash.png l c drawable-land-xxxhdpi l splash.png l c drawable-port-hdpi l splash.png l c drawable-port-mdpi l splash.png l c drawable-port-xhdpi l splash.png l c drawable-port-xxhdpi l splash.png l c drawable-port-xxxhdpi l splash.png l c mipmap-hdpi l ic_launcher.png l ic_launcher_foreground.png l ic_launcher_round.png l c mipmap-mdpi l ic_launcher.png l ic_launcher_foreground.png l ic_launcher_round.png l c mipmap-xhdpi l ic_launcher.png l ic_launcher_foreground.png l ic_launcher_round.png l c mipmap-xxxhdpi l ic_launcher.png l ic_launcher_foreground.png l ic_launcher_round.png l c mipmap-xxhdpi l ic_launcher.png l ic_launcher_foreground.png l ic_launcher_round.png l c ios l c App l c App l c Assets.xcassets l c AppIcon.appiconset l AppIcon-20x20@1x.png l AppIcon-20x20@2x-1.png l AppIcon-20x20@2x.png l AppIcon-20x20@3x.png l AppIcon-29x29@1x.png l AppIcon-29x29@2x-1.png l AppIcon-29x29@2x.png l AppIcon-29x29@3x.png l AppIcon-40x40@1x.png l AppIcon-40x40@2x-1.png l AppIcon-40x40@2x.png l AppIcon-40x40@3x.png l AppIcon-512@2x.png l AppIcon-60x60@2x.png l AppIcon-60x60@3x.png l AppIcon-76x76@1x.png l AppIcon-76x76@2x.png l AppIcon-83.5x83.5@2x.png l c Splash.imageset l splash-2732x2732-1.png l splash-2732x2732-2.png l splash-2732x2732.png

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.

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 capacitor -i /path/to/source/icon.png [-b /path/to/background.png]

Manual instructions

Unless you are using the Icon Genie app extension, these are the files that you need to replace: