Xamarin.iOS – Create App Icon with MakeAppIcon

In this lesson

  • Use image assets with info.plist to set application icon
  • Use MakeAppIcon to generate icon files

Transcript

Tap on time to skip ahead

00:00

One of the things I want to do is set up some app icons. Nothing drives me nuts more than this blank, white app icon here. If we go into Resources, we’ll see what’s known as an image asset. If we double click on the contents.json, you will see that it has specified to us what size icons we need for our application.

00:32

Something I’ve done is before we got online, I created this little icon for our application. I spent a lot of time on that. Then I used a web service called Make App Icon, where I can upload the .png of my icon and it will create all of the variants for me. You can also just use Photoshop if you want to and just export these all out as you want.

01:11

I’m going to double click on our icon zip here to decompress it. If I open it up, we not only have icons for iOS but also Android and WatchKit. One of the nice things that this service has also done for us is gone ahead and created the app icon set for us here. I’m going to attempt to do this, I’ve never done this before. I’m going to just remove the existing one, say delete, then I’m going to say add existing folder, and then I’m going to go to my documents, icon, iOS, app icon set, select Open. It will ask me what files I want to include in my project, so I’m going to select them all. It’s going to ask me a question here, do I want to copy the files here to this directory, do I want to move the file to the directory or do I just want to add a link to the file? Add the link just references it, it doesn’t move it or copy it. I’m going to copy the files to the directory.

02:27

So now, if we look in here, we should have our app icon set. Then if we double click on our icons here, we’ll see that they been filled out. Now, if I go back to my info.plist, select app icon. Then I do command S, when I run our app, we have our nice fancy little icon.