How to change app launch icon in Flutter

Key takeaways:

• Generate platform-specific app icons using tools like App Icon, ensuring proper size variations for Android and iOS. Organize assets into mipmap-* folders for Android and Assets.xcassets for iOS.

• For Android, replace mipmap-* directories and update AndroidManifest.xml to reference custom icons. For iOS, replace Assets.xcassets and configure Info.plist to define icon mappings.

• Ensure compatibility with Retina displays and dark mode by providing high-resolution icons (@2x, @3x) and testing icons across various devices, including 1024x1024 App Store icons.

• Implement adaptive icons by creating separate background and foreground layers, placing them in mipmap-anydpi-v26, and configuring an XML file to ensure consistent icon appearance across Android versions.

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 make 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 icons of different sizes for both Android and iOS simultaneously, we can follow these steps.

1. Visit the website App Icon.

2. Upload our icon image by clicking the "Upload your app icon" button.

3. Tick the iPhone and Android options checkboxes to generate icons for both platforms.

4. Click the "Generate" button, and this website will automatically create different-sized icons for Android and iOS.

5. It will generate a zip folder named AppIcons with android, Assets.xcassets named folders, and 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.

1. We can open our Flutter project in our preferred code editor or IDE.

2. Locate the android/app/src/main/res directory within our project.

3. Inside the res directory, we will find multiple mipmap-* folders.

4. Replace these mipmap-* folders with the corresponding mipmap-* folders from the downloaded AppIcons zip file.

5. 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.

1. Navigate to the ios/Runner/ directory in our Flutter project.

2. Locate the Assets.xcassets folder within the Runner directory.

3. Delete the existing Assets.xcassets folder.

4. Now, open the folder where we have downloaded the new app icon assets (let's assume it's named AppIcon).

5. Copy the Assets.xcassets folder from the AppIcon folder.

6. Paste the copied Assets.xcassets folder into the ios/Runner/ directory of our Flutter project.

Optimizing iOS app icons

To ensure your app icon looks sharp and professional across all iOS devices (including iPhones, iPads, and macOS), it's important to follow these additional steps:

1. Include all required icon sizes: iOS uses app icons of different sizes depending on the device and context (such as app icons for iPhone, iPad, the App Store, and notifications). When generating icons, make sure you're including all the necessary sizes. The Assets.xcassets folder should contain icons ranging from 20x20 pixels to 1024x1024 pixels, depending on where they’ll be used.

2. Consider dark mode: Since many iOS users have dark mode enabled, it's essential to make sure the app icon is visible and appealing on both light and dark backgrounds. Test how your icon looks in dark mode to ensure it stands out appropriately.

3. Support retina displays: Apple devices often come with Retina displays, which require high-resolution icons. Be sure to provide @2x and @3x versions of your icons so they appear crisp on Retina screens.

4. Include a 1024x1024 app store icon: In addition to the icons used in the app itself, you'll need a high-resolution 1024x1024 icon for the App Store listing. This ensures your app is represented well in the store.

5. Test across devices: After updating the icons, take time to test them on multiple devices and screen sizes. Xcode’s simulators and real iOS devices can help you verify how the icon looks on various models.

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.xml file and locate the <application> tag. Add or modify the android:icon attribute inside it to specify the path to our custom app icon. For example:

• For iOS: Open the ios/Runner/Info.plist file and locate the <key>CFBundleIcons</key> section. If not found, create one. Inside it, update the CFBundlePrimaryIcon and CFBundleIconFiles entries to reference our custom app icon file names. For example:

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:

Handling adaptive icons (Android)

To ensure the app icon is displayed consistently across all devices and versions of Android, especially for newer Android versions that support adaptive icons, we can follow these steps to create and implement adaptive icons:

1. Prepare adaptive icons: An adaptive icon requires two layers: a background layer and a foreground layer. These images should be designed to fit within the mask imposed by the Android system.

2. Add adaptive icon resources: After generating the adaptive icons, locate the mipmap-anydpi-v26 folder within the android/app/src/main/res directory. If this folder does not exist, create it.

3. Place foreground and background layers: Copy the adaptive icon files (e.g., ic_launcher_foreground.png and ic_launcher_background.png) into the mipmap-anydpi-v26 folder. These files represent the icon's background and foreground layers, respectively.

4. Modify the AndroidManifest.xml file: In the android/app/src/main/AndroidManifest.xml file, modify the android:icon attribute within the <application> tag to reference the adaptive icon for newer Android versions:

5. Create an XML File for the adaptive icon: In the mipmap-anydpi-v26 directory, create an XML file named ic_launcher.xml to define the adaptive icon layers. The file should look like this:

6. Test adaptive icons: To verify that adaptive icons are working as expected on supported Android devices, run your Flutter app again and check that the icon displays correctly across various Android versions and devices.

Conclusion

In conclusion, implementing custom app launch icons is crucial for branding and enhancing the visual appeal of your mobile app. For Android, replace the mipmap folders with new icons, and for iOS, update the Assets.xcassets folder. Optimizing for iOS ensures support for Retina displays, dark mode, and proper icon sizes for all devices, including the App Store.

For Android, handling adaptive icons by preparing background and foreground layers ensures consistency across devices. After updating the configuration files, thorough testing and clean builds are necessary to confirm the icons display correctly, giving your app a polished, professional look.

What can you learn further?

• Dive deeper into customizing UI elements in Flutter beyond icons, such as splash screens and navigation bars.

• To learn how to optimize app icons and listings to improve visibility and ranking in app stores, check out this course on Flutter.

• To study additional platform-specific icon requirements for iOS and Android, including notification icons and adaptive icons for different API levels, check out this resource.