How to Change App Icon in Flutter: A Complete Guide
Customizing your Flutter application's icon is one of the most impactful first steps in branding and user experience. Think about it: in this guide, you'll walk through the entire process of changing an app icon in Flutter, covering asset preparation, platform-specific configurations, and verification steps for both Android and iOS. Whether you're launching a startup MVP or redesigning an existing product, replacing the default placeholder with a unique visual identity helps your app stand out on home screens and app stores. By the end, you'll have a professionally branded icon ready for distribution.
Understanding Flutter App Icons and Platform Requirements
Before diving into code, it's essential to understand how Flutter handles icons differently across platforms. Flutter uses the flutter_launcher_icons package to automate icon replacement, but manual configuration is still required for deep customization or when working with specific build flavors. In practice, the icon must be provided in multiple resolutions to satisfy Android's mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi buckets, as well as iOS's @1x, @2x, and @3x scales. Still, additionally, both platforms require the icon to be placed in designated configuration files: AndroidManifest. xml for Android and Info.That's why plist for iOS. Understanding these requirements upfront prevents common build errors and ensures your icon appears crisp on all devices.
Preparing Your Custom Icon Assets
The first practical step in changing your app icon is designing and exporting the icon in the correct formats. But naming the file consistently, such as icon. For Android, you'll need icons ranging from 48x48 dp (mdpi) to 192x192 dp (xxxhdpi), while iOS requires 20x20 px @1x, 40x40 px @2x, and 60x60 px @3x for the launch icon, plus additional sizes for settings and notifications. Worth adding: it's also wise to keep a vector source (SVG or AI) for future resizing without quality loss. This master file will be downscaled into the various resolutions required by each operating system. A typical Flutter workflow starts with a square PNG or JPEG image with transparent background, ideally 512x512 pixels at 72 DPI. png, and placing it in the assets folder of your Flutter project simplifies the configuration steps that follow.
Updating the pubspec.yaml Configuration
Once your icon assets are ready, the next step is to inform Flutter about their existence and location. That said, open your project's pubspec. yaml file and add an assets section under flutter, if one doesn't already exist Not complicated — just consistent. Simple as that..
flutter:
assets:
- assets/icon.png
If you're using the flutter_launcher_icons package—a popular community tool that automates much of the process—you'll also add the package configuration below the assets. yamlfor the build system to recognize it. This package reads your master icon, generates the necessary platform-specific sizes, and updates the required configuration files automatically. Still, even when using automation, the base asset must be listed inpubspec.Remember to run flutter pub get after modifying the YAML file to ensure Dart recognizes the new asset.
Modifying AndroidManifest.xml for Android
After the asset is declared, Android-specific configuration is needed to actually replace the icon that appears on the device's home screen and in the app drawer. xml. The primary file to modify is android/app/src/main/AndroidManifest.Within the <application> tag, you'll add or update the android:icon attribute to point to your drawable resource Turns out it matters..
android:icon="@mipmap/ic_launcher"
If you're using flutter_launcher_icons, this file is often generated automatically, and the package handles the creation of mipmap directories with the correct resolutions. If you're doing it manually, you'll need to copy your generated icon files into android/app/src/main/res/mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, and mipmap-xxxhdpi, ensuring each folder contains the appropriately sized PNG. The android:roundIcon attribute can also be set if you want a circular icon variant for devices with rounded display corners.
Modifying Info.plist for iOS
On iOS, the app icon is primarily managed through the Info.plist file located in the iOS directory of your Flutter project. Similar to Android, you'll set the CFBundleIconName key to match the name of your icon asset without the file extension Less friction, more output..
```xml
CFBundleIconName
AppIcon
On the flip side, modern iOS development (Xcode 11+) relies on Asset Catalogs (Assets.xcassets) rather than referencing loose files directly in Info.Think about it: plist. Now, the CFBundleIconName value (e. g., AppIcon) must match the name of the App Icon Set inside Runner/Assets.xcassets Simple as that..
To configure this manually, open ios/Runner.Here's the thing — xcworkspace in Xcode. In the Project Navigator, select Assets.xcassets and click the AppIcon set. You will see a grid of placeholder slots for every required device and context (iPhone, iPad, App Store, Settings, Spotlight, etc.Because of that, ). Drag your appropriately sized PNGs into the corresponding wells. But xcode enforces strict naming and sizing conventions here; missing or incorrectly sized images will cause build errors or App Store rejection. Practically speaking, if you use flutter_launcher_icons, the package generates this entire AppIcon. appiconset structure—including the Contents.json manifest—automatically, saving you from the tedious manual drag-and-drop process.
Automating Generation with flutter_launcher_icons
While manual configuration offers granular control, the flutter_launcher_icons package is the industry standard for eliminating human error and maintaining consistency across platforms. After adding the dependency to your dev_dependencies in pubspec.yaml and configuring the flutter_icons block (specifying the image_path, android, ios, and optional adaptive_icon_background/foreground for Android), run the following commands:
flutter pub get
dart run flutter_launcher_icons:main
This command reads your master icon (recommended 1024x1024px), generates every required resolution for both Android (mipmap-* folders) and iOS (AppIcon.appiconset), updates AndroidManifest.xml, and configures the iOS Asset Catalog. It also handles Android Adaptive Icons—separating the foreground layer (your logo) from the background layer (color or shape)—ensuring your icon animates correctly with system theming and launcher masks.
Verification and Clean Builds
After configuration—whether manual or automated—always perform a clean build to purge cached resources that might display the old Flutter default icon:
flutter clean
flutter pub get
# For iOS, ensure CocoaPods are synced if you modified the Runner project structure manually
cd ios && pod install && cd ..
flutter run --release
Test on physical devices or emulators/simulators representing different pixel densities (e.Now, g. , a low-end Android for mdpi, a modern flagship for xxxhdpi, an iPad for iOS spotlights). Even so, verify the icon appears correctly in the launcher, app switcher, settings menu, and notification shade. On Android, specifically check that the adaptive icon masks (circle, squircle, rounded square, teardrop) crop your foreground asset gracefully without clipping important visual elements Practical, not theoretical..
You'll probably want to bookmark this section.
Conclusion
A polished app icon is a user's first handshake with your brand; it signals professionalism and attention to detail before a single line of code is executed. While manual configuration is educational, adopting flutter_launcher_icons transforms a fragile, multi-step chore into a single, repeatable command—ensuring your visual identity remains consistent across every screen density and OS update. By preparing a high-resolution vector source, leveraging the pubspec.Plus, yaml asset pipeline, and understanding the platform-specific requirements of Android's mipmap system and iOS's Asset Catalogs, you establish a strong foundation. With the icon finalized and verified, your Flutter application is no longer just functional; it is distinctly, unmistakably yours.
The journey from a simple graphic file to a universally recognized app symbol is a testament to the blend of art and engineering that defines modern software development. Practically speaking, it’s easy to view icon configuration as a mere technical checklist, but its impact is fundamentally perceptual. In a crowded app marketplace, that single, static image must instantly communicate the app's purpose, evoke the correct emotion, and establish a memorable brand anchor. The meticulous process of generating assets for every conceivable screen size and density is not an exercise in tedium, but a necessary ritual to check that your carefully crafted visual identity is presented with pixel-perfect fidelity, whether on a tiny smartwatch screen or a large tablet display The details matter here..
This technical rigor ensures that the artistic vision is never compromised by platform inconsistencies. The separation of concerns—using a master asset to generate platform-specific resources, managing adaptive icon layers for Android, and respecting the iOS Human Interface Guidelines—creates a resilient system. Also, it means your icon remains intact through OS updates that may change default icon shapes or rendering techniques. On top of that, by automating this with tools like flutter_launcher_icons, you free your cognitive load to focus on the creative core: what your app truly represents. The result is an icon that is not just correctly placed, but correctly expressed, functioning as a silent yet powerful ambassador for your application across the entire digital ecosystem Still holds up..
Which means, the final step in this process is not the last command run, but the ongoing commitment to treat your app's visual identity with the same respect as its functionality. A well-executed icon strategy is a cornerstone of a professional and trustworthy application. It demonstrates a dedication to the user experience that begins long with the first tap and continues with every subsequent interaction. By mastering this foundational element, you confirm that your Flutter application makes a strong, consistent, and confident first impression, every single time.
