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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay