How to change app launch icon in Flutter
The app launch icon is the icon that appears on our device's home screen when we launch our app. It is a great way to brand and makes our app stand out.
Implementation
We can follow the instructions given below to change the application launch icon.
Prepare the custom app icons
To generate different-sized icons for both Android and iOS simultaneously, we can follow these steps.
Visit the website App Icon.
Upload our icon image by clicking the "Upload your app icon" button.
Tick the iPhone and Android options checkboxes to generate icons for both platforms.
Click on the
Generatebutton, and this website will automatically create different-sized icons for Android and iOS.It will generate a zip folder named
AppIconswithandroid,Assets.xcassetsnamed folders, app store, and Play Store icons.
Adding icons in Android
To update the app icon in the Android platform of our Flutter project, we can follow these steps.
We can open our Flutter project in our preferred code editor or IDE.
Locate the
android/app/src/main/resdirectory within our project.Inside the
resdirectory, we will find multiplemipmap-*folders.Replace these
mipmap-*folders with the correspondingmipmap-*folders from the downloaded AppIcons zip file.Once we have replaced the folders, the new app icon resources will be in place for the Android platform.
Adding icons in iOS
To update the app icon in the iOS platform of our Flutter project, follow these steps.
Navigate to the
ios/Runner/directory in our Flutter project.Locate the
Assets.xcassetsfolder within theRunnerdirectory.Delete the existing
Assets.xcassetsfolder.Now, open the folder where we have downloaded the new app icon assets (let's assume it's named
AppIcon).Copy the
Assets.xcassetsfolder from theAppIconfolder.Paste the copied
Assets.xcassetsfolder into theios/Runner/directory of our Flutter project.
Update the configuration files
After replacing the icons, we need to update the configuration files in our Flutter project to reference the new icons.
For Android: Open the
android/app/src/main/AndroidManifest.xmlfile and locate the<application>tag. Add or modify theandroid:iconattribute inside it to specify the path to our custom app icon. For example:
<application
android:label="exampleapp"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
Note: Replace ic_launcher with the name of our custom icon file (without the file extension).
For iOS: Open the
ios/Runner/Info.plistfile and locate the<key>CFBundleIcons</key>section. If not found, create one. Inside it, update theCFBundlePrimaryIconandCFBundleIconFilesentries to reference our custom app icon file names. For example:
<key>CFBundleIcons</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>ic_launcher</string>
</array>
</dict>
</dict>
Test and build
After making the necessary changes, we must test our app to ensure the custom app launch icon is displayed correctly. For that, we can run the following command:
flutter run
Note: It is recommended to perform a clean build (flutter clean) and restart your IDE to ensure that the changes are applied correctly.
Conclusion
We can easily customize the app launch icon in your Flutter application by following the provided steps. This allows us to create a unique and visually appealing brand identity, enhancing the user experience from the moment they install and open your app.
