DEV Community

Meng Ly
Meng Ly

Posted on • Edited on

Changing App Icon in Flutter

Introduction:

Here's a quick guide to changing the app icon in a Flutter application. We’ll cover the steps to navigate the project structure, set up correctly sized images, and follow best practices. Plus, we’ll include links to free icon generators for easy customization.

Step 1: Navigate to the Root Folder Structure

To change the app icon, navigate to the root folder of your Flutter project. Here, you'll find the files needed to replace the default icon.

flutter pub add 
Enter fullscreen mode Exit fullscreen mode
flutter pub run flutter_launcher_icons 
Enter fullscreen mode Exit fullscreen mode

Image description

Step 2: Replace the Default App Icon Image

In the root folder structure, locate the android and ios directories. Inside these directories, you will find subdirectories named res and Assets.xcassets, respectively. These directories contain the image files for the app icons. Replace the default app icon image files with your custom app icon images. Make sure to follow the image size specifications for each platform.

Step 3: Image Size Specifications

It’s important to follow the image size specifications for each platform to ensure that the app icon looks good on all devices. Here are the recommended image sizes:

Android:

  • mipmap-mdpi: 48x48 pixels
  • mipmap-hdpi: 72x72 pixels
  • mipmap-xhdpi: 96x96 pixels
  • mipmap-xxhdpi: 144x144 pixels
  • mipmap-xxxhdpi: 192x192 pixels
  • mipmap-xxxxhdpi: 512x512 pixels

IOS:

  • 20x20 pixels
  • 29x29 pixels
  • 40x40 pixels
  • 60x60 pixels
  • 76x76 pixels
  • 83.5x83.5 pixels
  • 1024x1024 pixels And more sizes may be required for specific devices and situations.

Contact Me:

*Telegram: * https://t.me/MenglyUch
*TikTok: * https://www.tiktok.com/@mengly9662

Top comments (0)