How to Configure App Icon in Flutter: Step-by-Step Guide

To configure your app icon in Flutter, use the flutter_launcher_icons package which automates icon generation for Android and iOS. Add the package to dev_dependencies in pubspec.yaml, specify your icon image path and run flutter pub run flutter_launcher_icons:main to generate all required icon files.

Syntax

Use the flutter_launcher_icons package by adding a configuration section in your pubspec.yaml file. Specify the image_path for your icon and platforms to generate icons for.

• flutter_icons: main config block
• image_path: path to your icon image (usually 512x512 PNG)
• android: boolean to generate Android icons
• ios: boolean to generate iOS icons

yaml

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

Example

This example shows how to configure flutter_launcher_icons in pubspec.yaml and run the command to generate app icons for both Android and iOS.

yaml

name: example_app

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

Output

After running flutter pub run flutter_launcher_icons:main, your app icons are generated in the Android and iOS folders.

Common Pitfalls

Common mistakes when configuring app icons in Flutter include:

• Not placing the icon image in the correct path or missing the image file.
• Using an icon image with wrong dimensions or format (use a square PNG, ideally 512x512 pixels).
• Forgetting to add flutter_launcher_icons under dev_dependencies.
• Not running the command flutter pub run flutter_launcher_icons:main after configuration.
• Not rebuilding the app after icon generation to see changes.

yaml

Wrong:
flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/missing_icon.png"

Right:
flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

Quick Reference

Summary tips for configuring Flutter app icons:

• Use flutter_launcher_icons package for easy icon setup.
• Place a high-resolution square PNG icon in your project.
• Configure pubspec.yaml correctly with flutter_icons section.
• Run flutter pub run flutter_launcher_icons:main to generate icons.
• Rebuild your app to see the new icons on devices or emulators.

Key Takeaways

Use the flutter_launcher_icons package to automate app icon generation.

Specify the icon image path and platforms in pubspec.yaml under flutter_icons.

Run flutter pub run flutter_launcher_icons:main after configuration.

Use a square PNG icon with recommended size 512x512 pixels.

Rebuild the app to apply the new icons on Android and iOS.