Replacing your app icon in Flutter, rather than "removing" it (as every app requires an icon), involves changing the image assets within your native Android and iOS project folders. This process allows you to update your app's visual identity on users' devices.
Understanding App Icons in Flutter
Flutter is a UI toolkit, but app icons are managed natively by the respective operating systems (Android and iOS). This means you won't change the icon directly through Flutter code but by modifying specific files within your Flutter project's native directories.
Manual Method: Replacing Icons Natively
To change the app icon, you need to navigate to the root folder structure of your Flutter project. This is where you will find the necessary files to replace the default app icon. In the root folder structure, locate the android
and ios
directories.
For Android Applications
Android app icons are stored in various mipmap
folders to support different screen densities.
- Navigate to the Icon Directory:
Open your Flutter project and go toandroid/app/src/main/res/
. - Locate Mipmap Folders:
Inside theres
folder, you'll find directories likemipmap-hdpi
,mipmap-mdpi
,mipmap-xhdpi
,mipmap-xxhdpi
, andmipmap-xxxhdpi
. Each of these containsic_launcher.png
andic_launcher_round.png
files, which are your app's standard and round icons, respectively. - Replace Icons:
For eachmipmap
folder, replace the existingic_launcher.png
andic_launcher_round.png
files with your new icon images, ensuring they adhere to the correct dimensions for that density. - Adaptive Icons (Android 8.0+):
If your app targets Android 8.0 (API level 26) or higher, it might also use adaptive icons. These are defined inmipmap-anydpi-v26/ic_launcher.xml
andmipmap-anydpi-v26/ic_launcher_round.xml
. You'll need to update thedrawable
resources referenced in these XML files for your icon's foreground and background layers.
Recommended Android Icon Sizes:
Density | Size (Standard & Round) |
---|---|
mdpi |
48x48 dp (px) |
hdpi |
72x72 dp (px) |
xhdpi |
96x96 dp (px) |
xxhdpi |
144x144 dp (px) |
xxxhdpi |
192x192 dp (px) |
Play Store | 512x512 dp (px) |
For iOS Applications
iOS manages app icons through an Asset Catalog in Xcode.
- Navigate to the Asset Catalog:
Open your Flutter project and go toios/Runner/Assets.xcassets/AppIcon.appiconset/
. - View Icon Assets:
This directory contains aContents.json
file and numerous.png
files representing your app icon at various resolutions and contexts (e.g., iPhone, iPad, Spotlight, Settings). - Replace Icons:
- Option 1 (Manual File Replacement): Replace each
.png
file in this directory with your new icon, ensuring the new images have the exact same file names and dimensions as the originals. - Option 2 (Using Xcode): The more common and recommended method is to open your
Runner.xcworkspace
file in Xcode.- In Xcode, navigate to
Runner
in the Project Navigator. - Select
Assets.xcassets
. - Click on
AppIcon
. - Drag and drop your new icon images into the corresponding slots. Xcode will guide you on the required sizes. If you have a single high-resolution image, you might be able to drag it to the largest slot, and Xcode may scale it, or you'll need to provide all specific sizes.
- In Xcode, navigate to
- Option 1 (Manual File Replacement): Replace each
Recommended iOS Icon Sizes:
Usage | Size (px) @1x | Size (px) @2x | Size (px) @3x |
---|---|---|---|
iPhone Notification | 20 | 40 | 60 |
iPhone Settings | 29 | 58 | 87 |
iPhone Spotlight | 40 | 80 | 120 |
iPhone App | 60 | 120 | 180 |
iPad Settings | 29 | 58 | - |
iPad Spotlight | 40 | 80 | - |
iPad App | 76 | 152 | - |
iPad Pro App | 83.5 | 167 | - |
App Store | 1024 | - | - |
Automated Method: Using flutter_launcher_icons
Package
For a more streamlined approach, especially when dealing with many icon sizes, the flutter_launcher_icons
package is highly recommended. It automates the generation of all necessary icon sizes for both Android and iOS from a single source image.
Steps to Use flutter_launcher_icons
-
Add Dependency:
Open yourpubspec.yaml
file and addflutter_launcher_icons
underdev_dependencies
:dev_dependencies: flutter_test: sdk: flutter flutter_launcher_icons: "^0.13.1" # Use the latest version
-
Configure in
pubspec.yaml
:
Add theflutter_launcher_icons
configuration to yourpubspec.yaml
file, specifying the path to your icon image and which platforms to generate icons for:flutter_launcher_icons: android: "true" ios: "true" image_path: "assets/app_icon.png" # Path to your 1024x1024px icon image min_sdk_android: 21 # Set to your min_sdk_version in build.gradle # If you want to use a specific icon for Android, not the one specified in image_path # android_n_sdk_android: "mipmap-anydpi-v26/ic_launcher_adaptive_foreground.png" # adaptive_icon_background: "#ffffff" # Hex color or path to an image for adaptive icon background # adaptive_icon_foreground: "assets/app_icon_foreground.png" # Path to adaptive icon foreground
-
Run
flutter pub get
:
After modifyingpubspec.yaml
, runflutter pub get
in your terminal to fetch the package. -
Generate Icons:
Execute the following command in your terminal:flutter pub run flutter_launcher_icons:main
This command will generate and place all the necessary icon files in the correct directories for both Android and iOS.
For more details on configuration and advanced options, refer to the official flutter_launcher_icons
package documentation on pub.dev.
Important Considerations
- Clear Cache/Rebuild: After replacing icons, it's often necessary to clear your project's cache and rebuild the app to see the changes reflected. You can do this by running
flutter clean
followed byflutter run
orflutter build
. - Design Best Practices: Ensure your app icon is simple, recognizable, and adheres to the design guidelines for both Android (Material Design) and iOS (Human Interface Guidelines).
- High-Resolution Source Image: Always start with a high-resolution source image (e.g., 1024x1024px) to ensure quality across all generated sizes.