Configure App Icons In Xamarin Forms App

Sometimes, things seem more confusing than we think, like setting up the app icons and splash screen in the Xamarin Forms iOS application. So I thought, why not document this in a single place for all three platforms (iOS, Android & UWP)? This post will mainly cover how to do it in Visual Studio, similar steps can be followed in Xamarin Studio also.

The only place to configure the app icons and splash screens (for iOS, UWP and not Android) is a platform-specific project, as the implementation for each platforms differs.

iOS Project

The project created by the Xamarin Forms projects template in Visual Studio automatically adds the icon and splash-screen images, which look like the following, when we execute the application without any changes.

The file which contains all the information about iOS Application configuration is Info.plist and the section universal icons contain all the information about the icons and the splash screen.

There are two ways to change the icons and the splash screen of iOS applications.

First way:

Copy the icons and splash screen images of same size and resolution, as per the default icons and splash screen images provided by the project template, present in Resources folder.
Delete the default icons and splash screen. Rename your icons and splash screen images the same as the default ones.
Remove LaunchScreen written inthe Launch Storyboard option of universal icons section in Info.plist.

Second way:

Create a new asset catalog by right clicking on the asset catalogs and selecting the option Add Asset Catalog from the popup menu.
Add the icon images as per the sizes mentioned in the AppIcons section.
Copy the splash screen images of the same size and resolution as per the Xamarin splash screen images present in Resources folder (I am unable to figure out yet why it doesn’t take the splash screen images from the LaunchImages section of Asset Catalog).
Repeat steps 2 and 3 from the above mentioned steps.

This is how the icon and the splash screen of my application looked, after I updated them.

screen
Android Project

Similar to iOS project, the project created by Xamarin Forms template in Visual Studio automatically adds icon images, which look like the following, when we execute the application without any changes.

Follow these steps in order to change the default icon image to your application icon:

Copy the icon images of the same size of icon.png in all the drawable folders (namely drawable,drawable-hdpi, drawable-xhdpi).
Include the images in your project and make sure that the Build Action Property of the image is set to AndroidResource.
Build the Application so that the newly added icon image come in Application Icon dropdown.
Open project properties by right clicking on the project file and selecting properties option from the popup menu. Select the icon in Application icon dropdown of Android Manifest section.
Change the icon attribute of MainActivity class in MainActivity.cs.

This is how the icon of my Application looked, after I updated it:

UWP Project
Here, the project template adds the default icon and the splash screen but they are cross ( cross ) images not Xamarin logo icons. Another thing to note here, is that the default name of all the UWP Applications given by Visual Studio is FPCL.WIndows, that’s why the Application icon will look like following when you execute it without any changes.

It’s easier to change the icon and the splash screen images in UWP project than in Android or iOS projects. You just have to add the images , as per the given sizes in Visual Assets tab of Package.appxmanifest file. Also, you can change the name of the Application by changing the Display Name property in Application Tab of the Package.appxmanifest file.

This is how the icon and the splash screen of my Application looked. after I updated them:

There are many online tools to create iOS and Android icons from a single image. The one I used for this post example is MakeAppIcon. Unfortunately, there is no such tool for UWP project, so I have to make the images myself. If anyone knows any tool, please suggest via comments.

The example code of this article can be found at GitHub. Let me know if I have missed anything or if you have any suggestions.

8 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy10y ago
Nice share
Asfend Yar10y ago
it's good stuff ..
Thiruppathi R10y ago
Good..
Bhavik Patel10y ago
nice
Vignesh Mani10y ago
Good one
Gowtham K10y ago
Good One ,Thanks for sharing:)
Debasis Saha10y ago
Good share..
Raja10y ago
Good One...