How to change app icon and name in flutter(Android & ios)

KODE MAKERS
4 min readMar 17, 2021

--

Nowadays there is very much hype of flutter in the IT department, especially in the mobile application development sector. Lots of IT companies are shifting from native to flutter, because of flutter’s best performance in both android and ios.

There are so many doubts about “Which one is the proper way to change app name and icon for android and ios”. Today we will discuss, the best and easy way to do that.

Clarification:

For the logo, as the title suggests, we will only discuss how to update the default one(app icon) for android and ios rather than creating a new logo.

Step 1: Change the app name

When you initially install the app, the default name would be set as your project name. The project name will only take a combination of small letters and underscore except for space in between.

To change the app name you need to update AndroidManifest.xml and Info.plist accordingly. Because we need to change for both android and ios.

(1)For Android:

(AndroidManifest.xml)

You can find AndroidManifest.xml in android/app/src/main/ AndroidManifest. xml. As we can see, you need to update the app name in android: label properties.

(2)For ios:

(Info.plist)

You can find the info.plist in ios/Runner/Info.plist.

That’s it. Congratulations you have just change the app name for both operating systems.

Step 2: Change the app logo

For changing the app logo first, we need to understand that the logo will have different sizes for different devices. For Android, as we know the res folder contains mipmap folders which will contain the different sizes of the logo.

Now we need to create a logo that should have different sizes for both android and ios. Also, some of them would be round icons!!

Don’t worry!! We will show you the easiest way to do so.

You will need to have a high-resolution logo that should have 1024x1024 or at least 512x512 dimension sizes. Once you have the logo, generate the app’s launcher icon from below.

(1)For Android: https://romannurik.github.io/AndroidAssetStudio/

Now here is the thing. Some android devices also support round icons as the app logo. So here we use the above link for generating ic_launcher_round as well as ic_launcher_square individually.

After downloading both the zip and extracting it I found the logos which are displayed above. Now we need to paste the res folder’s file in our project’s res folder. Then as a result we will have two logos in each mipmap folder.

(AndroidMainfest.xml)

As per the image, the only remaining thing as of now is to tell AndroidManifest, that we have added round and square icons in the res folder. To do so we simply add properties in AndroidManifest.xml.

(2)For ios: https://makeappicon.com/

From the above link, you will get logos for both ios and android but ignore the android logo. Just focus on the ios\Appicon.appiconset folder.

For updating the ios logo in your project you need to go to ios/Runner/Assets.xcassets/AppIcon.appiconset. Then, you just need to update the existing icon to your newly created icons. For a more detailed understanding of ios icons please visit Apple’s Guidelines.

That's it.

Summary:

So in both steps, we have covered changing the app’s name and app launcher icon for both the operating system. It was the easiest way to do it. If you find our blog helpful give us 10 claps before leaving.

Happy Coding…

--

--

No responses yet