Change Flutter App Launcher Icon
Every new flutter app comes with a flutter logo as its default app icon and changing this icon is pretty easy for all flutter-supported platforms. All you have to do is to follow a few simple steps.
Android & iOS:
- Head over to appicon.co and upload your app icon as an image.(1024x1024) size is recommended.
- Make sure you select the checkbox as per your requirements: Android, iPhone, and iPad. Keep the rest as it is, and hit generate button.
3. Extract the downloaded .zip file, and it should look something like this after extraction.
4. Open the android folder, and copy all the folders and files from there to your project android resources folder (your project > android > app > src > main > res).
Well, android icons are now changed successfully!
5. Come back to the downloaded files, and copy Assets.xcassets folder to your project iOS resources folder (your project > ios > Runner)
iOS launcher icons are now changed aswell!
What we did here is that we replaced the default flutter app icon set with the newly generated icon and now when you rebuild your application, you should see new icons.
But here’s one problem, if your icon has a square shape then it will look weird on devices with round launcher icons. Like this,
To add round icon support, we need to go back to appicon.co. But this time upload an image with a round shape and only select the Android checkbox and write the file name as “round_launcher” and hit generate.
Once downloaded, copy the android folder again and merge it with your project android resources. (your project > android > app > src > main > res).
Last thing, go to your Android Manifest file (android > app > src > main > AndroidManifest.xml) and add this line:
Hooray, we’re done changing our app icons for Android & iOS.
Web Favicon:
Changing flutter web favicon is really easy, just navigate to your project > web folder and replace favicon.png with your desired image.
From this:
To this:
The favicon should be changed successfully!
Windows:
To change your app launcher icon on windows, you need to have a .ico file. Navigate to your project > windows > Runner > Resources and replace app_icon.ico with your .ico file.
If it doesn’t work, restart your android studio, perform flutter clean and rebuild the app.
MacOS:
Changing the macOS app icon is very similar to what we did in iOS, head over to appicon.co and upload your icon as an image (1024 x 1024 is recommended). Check macOS only and hit generate.
Extract the downloaded file, copy Assets.xcassets folder, and paste it to your project > macOS > Runner directory.
That’s all for this article, thank you for reading, give it a clap if you liked it.
I am open to freelance, full-time, or part-time roles, feel free to reach out at Linkedin, thank you!
