Change the App Icon in Xamarin.Forms

Customizing your App

If I start a new App one of the first changes I made, is to set my own icon for both platforms to check how it’s gonna look like. Having setup a proper, and especially your own, icon feels so much better than using the default one 😃

Set the Icon

There are quite some differences in how to set the app icon for iOS and Android. Before heading to the next step be sure you have the icon ready and resized for the different platforms.
To do so I absolutely love and recommend App Icon Maker and Android Assets Studio. These sites converts your icon into any size needed for iOS, Android or even your Apple Watch.

Setting the Icon for the iOS Project

To change the icon in the iOS Project is very easy.
All you have to do is:

  • open your iOS project
  • open the Assets.xcassets folder
The folder structure in the iOS code

Once you’ve opened the folder you will see, on the left side of Visual Studio, an assets “file” called AppIcon. All you need to do is to open this file and replace the icons in that with your own (pre-resized) ones.
Thats all you need to do for iOS! 💪🏻

The iOS AppIcon asset

The Android Project

To change the App icon under Android things gonna be a bit different than under iOS. To set the Android icon I would highly recommend Android Assets Studio. This site resizes your icon perfectly.

Since Android API version 23 it’s best practice to store the app icons in the mipmap folders. Just like in iOS you have to provide different sizes of icons, therefore there are the following folders:

  • mipmap-hdpi
  • mipmap-mdpi
  • mipmap-xhdpi
  • mipmap-xxhdpi
  • mipmap-xxxhdpi

If you have a default Xamarin.Forms project there are two files in each of these folders, a icon.png and a launcher_foreground.png. The simplest way to change these icons is to resize your icon with the Android Assets Studio (right with the correct name like icon and a second time with launcher_foreground) and simply replace the default one. If you do so you don’t have to take care of declaring your files as resources and so on.

Name your icon in the Android Assets Studio

You can change the icon (if you have multiple files) by editing the Android Manifest. To do so just right click on the Android project and select
Options -> Android Application. Under the option Application icon, you can change the icon.
Or you can open the MainActivity.cs File and change the Activity Attribute.

Important

I recently figured out that my Visual Studio does not update the icon when I replace it and simple do a rebuild.

To trigger the change just do these things (in the following order):

  • Replace icons
  • Clean the Android project
  • Rebuild the Android project
  • Restart Visual Studio

And voila you have set your own app icon! 🎉

Leave a Reply

Your email address will not be published. Required fields are marked *