Making Environment Specific App Icons for your Xamarin Apps

When building mobile apps the environment matters - is this instance of your app pointing to Dev, Test, Staging, Production or your local environment?

What I have found that works best for me is to visually know which environment I will be going into by simply viewing the app icon - like below

Once I have a high-res version of the icon I typically just place a black rectangle at the bottom of the app icon and put white text on it. Save the app icon and create all the app icon variation images.

I typically create images to represent the following environments:

  • Local - This is the default app icon used on local machines and in source control for all debug builds
  • Mock - points to no environment - using in memory data for prototyping or testing
  • Dev - points to your dev backend
  • Test - points to your test backend
  • Prod - points to your prod environment - used to smoke test app before placing in the store
  • Store - This is the original app icon from your designer

Now in order to create app icons you might need the help of your designer; or you can try out this handy tool - MakeAppIcon.