How to change the Flutter app icon on iOS and Android
Short answer: a Flutter app has two sets of icons, one per platform. iOS reads ios/Runner/Assets.xcassets/AppIcon.appiconset/ (PNG files plus a Contents.json that lists them), and Android reads ic_launcher.png in five mipmap-* folders under android/app/src/main/res/. Replace those files, then uninstall the app and run it again. Either use the flutter_launcher_icons package, or make the files in the browser with our free app icon generator. Whichever you use, make sure the iOS icons have no alpha channel, or App Store Connect refuses the build.
Swapping the icon looks like a five-minute job, and the swap itself is. The time goes into three things that only show up later: an upload error about transparency, an Android 8+ phone that still shows the old icon, and a home screen that never seems to refresh. This guide covers the files first, then those three.
Where the icons live
| Platform | Folder | Files |
|---|---|---|
| iOS | ios/Runner/Assets.xcassets/AppIcon.appiconset/ | 21 PNG files and Contents.json |
| Android | android/app/src/main/res/mipmap-mdpi … mipmap-xxxhdpi | ic_launcher.png in each |
| Android 8+ | android/app/src/main/res/mipmap-anydpi-v26/ | ic_launcher.xml (adaptive icon), if present |
Nothing in Dart code points at the icon. On Android, AndroidManifest.xml says android:icon="@mipmap/ic_launcher", and Android picks the folder that matches the screen density. On iOS, Xcode compiles the asset catalog and reads Contents.json to know which file is which.
The sizes
Android wants one square icon per density:
| Folder | Pixels |
|---|---|
mipmap-mdpi | 48 |
mipmap-hdpi | 72 |
mipmap-xhdpi | 96 |
mipmap-xxhdpi | 144 |
mipmap-xxxhdpi | 192 |
The Play Store listing takes one more: 512 × 512 px, a PNG of at most 1 MB, uploaded in Play Console rather than shipped in the app. Google Play rounds the corners itself, so keep the background solid all the way to the edges.
iOS wants more files. The set that Flutter projects usually carry, and the one flutter_launcher_icons writes, has 21 PNG files from 20 px to 1024 px:
| Points | Scales | Pixels | Used for |
|---|---|---|---|
| 20 | 1x, 2x, 3x | 20, 40, 60 | Notifications |
| 29 | 1x, 2x, 3x | 29, 58, 87 | Settings |
| 40 | 1x, 2x, 3x | 40, 80, 120 | Spotlight |
| 60 | 2x, 3x | 120, 180 | iPhone home screen |
| 76 | 1x, 2x | 76, 152 | iPad home screen |
| 83.5 | 2x | 167 | iPad Pro home screen |
| 1024 | 1x | 1024 | App Store |
The set also includes 50, 57 and 72 pt files for iOS versions before 7. Xcode prints a notice for them and otherwise ignores them, so they are harmless. Recent versions of Xcode can also build every size from one 1024 px image (the "Single Size" option in the asset catalog), but most Flutter projects still have the full set, and replacing it file for file is the safest change.
Start from one square image of at least 1024 × 1024 px. Smaller images have to be enlarged for the App Store icon and come out blurry.
Option 1: flutter_launcher_icons
Put your 1024 px image in the project, for example at assets/icon/app_icon.png, and add this to pubspec.yaml:
dev_dependencies:
flutter_launcher_icons: ^0.14.3
flutter_launcher_icons:
android: true
ios: true
image_path: "assets/icon/app_icon.png"
remove_alpha_ios: true
background_color_ios: "#FFFFFF"
adaptive_icon_background: "#FFFFFF"
adaptive_icon_foreground: "assets/icon/app_icon.png"
Then run:
dart run flutter_launcher_icons
It overwrites the iOS set and the Android mipmap-* files, and with the last two lines it also writes an adaptive icon. remove_alpha_ios: true is the line most people leave out, and the next section is why it matters.
Option 2: make the files in the browser
If you would rather not add a dev dependency for a one-off job, our app icon generator makes the same files from one image. It runs in the browser tab, so the image is not uploaded, and it hands you a zip whose folders match a Flutter project. From the folder the zip is in:
unzip -o app-icons.zip -d path/to/your_app
Do not drag the folders into the project in the Finder. When a folder of the same name exists, the Finder replaces it instead of merging, and dragging android in that way removes the rest of your android/ folder. unzip -o only overwrites the files in the zip.
Pitfall 1: the App Store icon has an alpha channel
You upload the build and App Store Connect answers with:
ITMS-90717: Invalid App Store Icon. The App Store Icon in the asset catalog in 'Runner.app' can't be transparent nor contain an alpha channel.
The wording matters: nor contain an alpha channel. An icon where every pixel is opaque still fails if the PNG is saved as RGBA. Many tools save RGBA by default. A browser canvas, for example, always exports RGBA, even after you paint a solid background over the whole image. This caught us while building the generator above: the icons looked perfect and would still have been refused.
Check the file on a Mac:
sips -g hasAlpha ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png
hasAlpha: no is what you want. To fix it, flatten the image onto a background color and save it as RGB: remove_alpha_ios: true does that in flutter_launcher_icons, and the generator does it for every iOS file. The Android launcher icons are fine with transparency, so leave those as they are.
Pitfall 2: Android 8+ still shows the old icon
You replaced every ic_launcher.png, and an Android 8 phone still shows the old icon. Look for android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml. If it exists, the project has an adaptive icon, and on Android 8 and later the system uses it instead of the PNG files.
An adaptive icon has two layers: a background (often just a color) and a foreground image of 108 × 108 dp. The launcher cuts it to its own shape, circle, squircle or rounded square, and only the center is always visible: keep your artwork inside the middle 66 dp. flutter_launcher_icons writes the foreground with a 16% inset for exactly that reason:
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground>
<inset
android:drawable="@drawable/ic_launcher_foreground"
android:inset="16%" />
</foreground>
</adaptive-icon>
You have two fixes. Replace the adaptive icon too: the foreground PNG in each drawable-* folder (108, 162, 216, 324 and 432 px) plus the background color in values/colors.xml. Or delete mipmap-anydpi-v26/ic_launcher.xml, and Android falls back to the PNG files. If values/colors.xml already holds other colors, add the ic_launcher_background line to it rather than replacing the file.
Pitfall 3: the home screen keeps the old icon
The files are right and the home screen still shows the old icon. Both platforms cache icons per installed app, and flutter run updates the code of an installed app without always refreshing its icon. Uninstall the app from the phone or simulator first, then:
flutter clean
flutter run
On the iOS Simulator, deleting the app is usually enough. On Android, some launchers keep a cache even across reinstalls; restarting the launcher, or the phone, clears it. A release build installed fresh from TestFlight or an internal testing track never has this problem, so do not chase it further than that.
Checklist before you ship
- Source image is square and at least 1024 × 1024 px
- All 21 iOS files replaced,
Contents.jsonlists them sips -g hasAlphasaysnofor the 1024 px iOS icon- Five
mipmap-*/ic_launcher.pngfiles replaced - Adaptive icon replaced, or
mipmap-anydpi-v26/ic_launcher.xmlremoved - App uninstalled and installed again on a real device of each platform
- 512 px Play Store icon uploaded in Play Console
FAQ
Where is the app icon in a Flutter project? iOS: ios/Runner/Assets.xcassets/AppIcon.appiconset/. Android: android/app/src/main/res/mipmap-*/ic_launcher.png, plus mipmap-anydpi-v26/ic_launcher.xml if the project uses an adaptive icon.
What size should the Flutter app icon be? Start from 1024 × 1024 px. iOS needs 21 files from 20 to 1024 px, Android needs 48, 72, 96, 144 and 192 px, and the Play Store listing needs 512 px.
Why does App Store Connect say my icon has an alpha channel when it is not transparent? The PNG is saved as RGBA. Apple refuses the channel itself, not only transparent pixels. Save the iOS icons as RGB, for example with remove_alpha_ios: true.
Why did my Flutter app icon not change on Android? Either an adaptive icon in mipmap-anydpi-v26 is overriding the PNG files on Android 8 and later, or the launcher cached the old icon. Replace or delete the adaptive icon, then uninstall and reinstall the app.
Do I need flutter_launcher_icons to change the icon? No. It only writes files into the folders above. You can make them with any tool, as long as the sizes, names and the iOS alpha channel are right.
Can I use an SVG for the Flutter app icon? Not directly. Both platforms need PNG files for the launcher icon. Export the SVG at 1024 × 1024 px and make the sizes from that.
The app icon generator is free and runs in your browser. Every app in our Flutter app templates ships with this icon set in place, ready for yours.