HoloLens and Unity tip #002 – Set your application icon and splash screen to beautify your app

By default a HoloLens application build with Unity has a default icon (a square and cross) when it appears in the application menu of the HoloLens. It looks horrible. Secondly when you start your HoloLens application, it shows a default splash screen telling your users that it is build with Unity. Not that nice too. To beautify your app you will need to add an application icon and a nice splash screen. There seems to be some lack of documentation around how to do this. Setting the application icon can be done under Edit – Project Settings – Player under the tab Icon. There is a dazzling amount of icon formats and types possible.

Application icon

So which icons are at lease minimal necessary to get an icon after installation of your app?

You will need to add the 200% icons under “Universal 10 Tiles and Logos”. By adding them  for all the squares your user will experience the best icon in any situation.

Square 44×44 Logo – Scale 200% (88×88 pixels)
Square 71×71 Logo – Scale 200% (142×142 pixels)
Square 150×150 Logo – Scale 200% (300×300 pixels)
Square 310×310 Logo – Scale 200% (620×620 pixels)

Generate 4 icons with for example Photoshop or another tool. There are also tools online which creates different sizes based on a original icon. In my case i used png files. You will need to add them to Unity. In this example i have created a Resources\Logo folder structure under Assets. Then drag the icons into that folder and you will get the result below.

Go to Edit – Project Settings – Player. Open the tab icon and click on the arrow before the Square 44×44 Logo. You will see a number of different formats. Drag the correct image into the one which mentions scale 200% or click on the “select” button inside the empty place and select the correct image from an asset list. If you select an incorrect format, the icon is not  set. An error (in red) is displayed in the status bar of Unity. When doing correct will result  in the following.

Do this for all the earlier mentioned formats and you are finished! Be careful.. you will need to add more icons when you want your app in the Windows Store. I will discuss that one later in a next tip.

Splash Screen

The splash screen is much easier. I mostly use an image of size 1024×512. But it really depends on the logo which you are going to use and if you want to add additional lines of text or other media parts. Adding the image for the splash screen is done in the same way of adding the icons to Unity. Because the splash screen is shown within 3D space when your HoloLens application starts, you need to understand that black is shown transparent and will not show up in the end result.

Go to Edit – Project Settings – Player and this time the tab “Splash Image”. Add the added splash image by dragging it into the Virtual Reality Splash Image area or click on the “select” button to select the image from an asset list.

The result will be as shown above. Don’t worry about the not well formed image. It will appear correctly when you start up your app. Now redeploy your app and run it on HoloLens. You will have a nice icon in the application menu of the HoloLens and cool splash screen when your app starts up.  You just beautified your app!