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 Xamarin Forms iOS application 🙂 so I thought why not document this in a single place for all 3 platforms (iOS, Android & UWP). This post will mainly cover how to do it in Visual Studio, however similar steps can be followed in Xamarin Studio also.
The only place to configure the app icons and splash screens (for iOS & UWP not Android) is platform specific project as the implementation for each platforms differs.
iOS Project:
The Project created by Xamarin Forms projects template in Visual Studio automatically adds icon and splash-screen images, which look like following when we execute the application without any change:
1462016iPhoneDefault
The file which contains all the information about iOS application configuration is Info.plist and the section Universal Icons contains all the information about icons and splash screen.
There are two ways to change the icons and splash screen of iOS application:
First way:

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

Launch Storyboard

Second way:

    1. Create a new Asset Catalog by right clicking on Asset Catalogs and selecting option Add Asset Catalog from the popup menu.

Add Asset CatalogAdd Media

    1. Add the Icons images as per the sizes mentioned in the AppIcons section.

Add Images 2 Media

  1. Copy the splash screen images of 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 LaunchImages section of Asset Catalog 🙁 ) .
  2. Repeat step 2 & 3 from above mentioned steps.

This is how the icon and splash screen of my application looked after I updated them:
iPhone Updated
Android Project:
Similar to iOS project,The Project created by Xamarin Forms template in Visual Studio automatically adds icon images, which look like following when we execute the application without any change:
Android Default
Follow these steps in order to change the default icon image to you application icon:

    • Copy the icon images of 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 comes in Application Icon dropdown
    • Open project properties by right clicking on project file and selecting properties option from the popup menu and select the icon in Application Icon dropdown of Android Manifest section.

Android Manifest

    • Change the Icon attribute of MainActivity class in MainActivity.cs

MainActivity

This is how the icon of my application looked after I updated it:
Android Updated
UWP Project:
Here also the project template adds the default icon and splash screen but they are cross (UWP Crossed) images not Xamarin logo icons. Another thing to notice 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 and change.
UWP Default
It’s easiest to change icon and splash screen images in UWP project than Android or iOS project, you just have to add the images as per 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 Package.appxmanifest file.
This is how the icon and splash screen of my application looked after I updated them:
UWP Updated

There are many online tools to create iOS & 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 has to make the images myself, if anyone know any tool, please suggest via comment.

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

🙂 🙂 Happy Coding 🙂 🙂

2 Comments

    • Hi Jose, I assume you are talking about Android, that is automatically changed to the icon you have updated as per above mention steps.

1 Trackback / Pingback

  1. My New tool for creating Xamarin App Icons – Error To Solutions

Leave a Reply

Your email address will not be published.


*