Home
Flutter
Tutorial

How to Change Flutter App Icon - Complete Tutorial (2025 Update)

Wriink

How to Change Flutter App Icon: A Complete Guide

Do you know how to make your Flutter app look professional by giving its own customized icon? Let's see the whole process together step by step. This makes it twice as easy to do with the package flutter_launcher_icons

Pre-Requirements

  • Configure a working development environment for Flutter
  • Understand the basic structure of your Flutter project
  • An image file that is going to be your desired app icon (1024 by 1024 pixels is recommended)

Step 1: Prepare Your Icon

Get your icon in PNG format before we get started, that way you will have the best results while proceeding:

  • Use a square image (1024x1024 pixels recommended)
  • Save it in PNG format with transparency if needed
  • Place it in your project's assets folder (create one if it doesn't exist)

Step 2: Add the Package

  1. First, add the flutter_launcher_icons package to your pubspec.yaml file under dev_dependencies:

    dev_dependencies:
  flutter_launcher_icons: ^0.13.1
  2. Press CTRL+S inside pubspec.yaml to get the package

Alternative Way to Add the Package

If you're using the Visual Studio (VS) Code editor, you can quickly add the package without manually editing your pubspec.yaml file. Simply follow these steps:

  1. Press CTRL + SHIFT + P to open the command palette.
  2. Type or Select Add Dependencies from the list of options.
  3. Enter the package name flutter_launcher_icons and press ENTER to add it to your project.

This method ensures that the package is correctly added to your project with minimal effort.

Step 3: Configure the Icon

In your pubspec.yaml file, add the following configuration after dev_dependencies line (make sure to maintain proper YAML indentation):

flutter_launcher_icons:
  android: "launcher_icon"
  ios: false #Set true if you need to generate icon for both IOS and Android device
  remove_alpha_ios: true
  image_path: "assets/icon/icon.png"
  min_sdk_android: 21 # android min sdk min:16, default 21
  adaptive_icon_background: "#ffffff" #default #ffffff
  adaptive_icon_foreground: "assets/icon/icon.png"
  web:
    generate: true
    image_path: "assets/icon/icon.png"
    background_color: "#hexcode"
    theme_color: "#hexcode"
  windows:
    generate: true
    image_path: "assets/icon/icon.png"
    icon_size: 48 # min:48, max:256, default: 48
  macos:
    generate: true
    image_path: "assets/icon/icon.png"

Pro Tip:
Make sure your icon path matches exactly where you placed your icon file in the project structure.

Step 4: Generate the Icons

Run the following command in your terminal:

flutter clean && flutter pub get && dart run flutter_launcher_icons

This will generate icons for all platforms you've configured in the previous step.

Platform-Specific Notes

Android

The icons will be generated in the following locations:

  • android/app/src/main/res/mipmap-hdpi
  • android/app/src/main/res/mipmap-mdpi
  • android/app/src/main/res/mipmap-xhdpi
  • android/app/src/main/res/mipmap-xxhdpi
  • android/app/src/main/res/mipmap-xxxhdpi

iOS

The icons will be added to:

  • ios/Runner/Assets.xcassets/AppIcon.appiconset/

Troubleshooting Common Issues

Issue 1: Icons not updating after generation

Solution: Try cleaning your project:

flutter clean
flutter pub get
dart run flutter_launcher_icons
Issue 2: YAML syntax errors

Solution: Double-check your indentation in pubspec.yaml. YAML is sensitive to proper spacing.

Best Practices

  1. Use high-resolution images for your icon every time
  2. Test it out on light and dark backgrounds
  3. Keep an original icon file as backup
  4. Version control your icon assets

Conclusion

When it comes to branding your app, changing the icon is like taking a huge step or even one of the most important ones. There is the flutter_launcher_icons package, which makes this step easy and manageable. It sits in your memory in a way to handle icon conversion following all platform-specific rules. That is, test the icon on various devices before releasing your app.

Happy coding! 🚀

Post a Comment