How to Set a Flutter App Icon for Android and iOS Using flutter_launcher_icons4 min read

A polished app icon is essential for creating a memorable first impression. In the competitive world of mobile apps, a visually appealing icon can Set a Flutter App Icon application apart on both Android and iOS devices. Fortunately, Flutter simplifies this process with the flutter_launcher_icons package. This tutorial, using version ^0.14.3, provides a step-by-step guide to configure and generate app icons for both platforms efficiently.

Prerequisites to Set a Flutter App Icon

• Before you begin, ensure you have the following:
• The Flutter SDK installed on your system.
• A Flutter project initialized and ready.
• An app icon image, preferably a 1024×1024 PNG file with a transparent background for versatility.
• Choosing the right icon is crucial. It should reflect your app’s brand, be simple yet recognizable, and work well at various sizes. Tools like Adobe Photoshop, GIMP, or online icon generators can help create a high-quality image.

Step 1: Add the Dependency to Set a Flutter App Icon

Add flutter_launcher_icons as a dev dependency in your pubspec.yaml file:

dev_dependencies: 
flutter_launcher_icons: ^0.14.3

After adding the dependency, run flutter pub get in your terminal to download and install the package. This command updates your project with the latest version of flutter_launcher_icons, ensuring compatibility with your Flutter setup to Set a Flutter App Icon.

Step 2: Prepare Your Icon

Create an icon image, such as app_icon.png, with a resolution of 1024×1024 pixels. This size ensures high-quality scaling across different device screens. Save it in a dedicated folder, like assets/icons/, within your project directory. Organizing assets in a specific folder keeps your project tidy and makes future updates easier.

For best results to Set a Flutter App Icon, use a transparent background if your design allows, and avoid overly complex details that might blur at smaller sizes. Test your icon at 48×48 or 96×96 pixels to ensure clarity.

Step 3: Configure flutter_launcher_icons

In your pubspec.yaml, add the flutter_launcher_icons configuration below the dependencies:

flutter_launcher_icons:
  android: "launcher_icon"  # Name for Android icon
  ios: true               # Enable iOS icon generation
  image_path: "assets/icons/app_icon.png"  # Path to your icon
  min_sdk_android: 21     # Optional: Minimum Android SDK

• android: Specifies the Android icon name or true to use the default.
• ios: Set to true to generate iOS icons.
• image_path: Path to your icon file.

Step 4: Generate the Icons

Run the following command in your terminal:

flutter pub run flutter_launcher_icons

This generates the appropriate icon sizes for Android (mipmap folders) and iOS (Assets.xcassets/AppIcon.appiconset).

Step 5: Verify the Icons

• Android: Navigate to the android/app/src/main/res/ folder. You’ll see mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, and other directories containing your icon in various resolutions. These cater to different screen densities.
• iOS: Open ios/Runner/Assets.xcassets/AppIcon.appiconset/ in Xcode. Confirm that the folder contains the generated icon files and that Contents.json is updated with the correct references.
• Rebuild your app with flutter run to see the new icon on your emulator or physical device.

Rebuild your app to see the new icon:

flutter run

Troubleshooting to Set a Flutter App Icon

• Icon not updating? Clear the app cache or uninstall/reinstall the app.
• Error running the command? Double-check the image_path in pubspec.yaml and ensure the file is a valid PNG with no corruption.
• iOS icons missing? Verify ios: true in the configuration and check ios/Runner/Info.plist for any manual icon entries that might conflict.

Optional: Adaptive Icons for Android

For Android adaptive icons (rounded or custom shapes), add foreground and background images:

flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icons/app_icon.png"
  adaptive_icon_foreground: "assets/icons/foreground.png"
  adaptive_icon_background: "#FFFFFF"  # Or path to background image

Run the command again to generate adaptive icons.

Conclusion

Using flutter_launcher_icons: ^0.14.3, you can effortlessly set app icons for both Android and iOS, saving time and ensuring consistency. Experiment with adaptive icons for Android to enhance the user experience. Now, go make your app stand out with a stunning icon!