Changing App Icon in Flutter

meng_ly_5f07a38c932b97230

Meng Ly

Posted on November 14, 2024

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.

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

💖 💪 🙅 🚩
meng_ly_5f07a38c932b97230
Meng Ly

Posted on November 14, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related