iOS 10.3 Alternate App Icons

Sameh Mabrouk
Jan 29, 2017 · 3 min read

Apple just introduced one of iOS 10.3 changes, the ability for an application to change its icon. This is a slightly strange feature. You may ask when it would be useful, I thought about some uses cases:

  1. In a game, when you want to show a major achievement, show high score or personalize a team in a sports app.
  2. In a Location sharing apps like Swarm, to show app icon with user sticker.
  3. In a trip planner apps like Google trips to show app icon as the next trip.
  4. Upgrading Lit to Pro version of an app, maybe you want to remove free label from icon.
  5. Change app icons at times of different holidays for promotional purposes.

There are endless possibilities to this depending on the type of app.

Developers Can Now Change Home Screen App Icons Whenever They Want.

The ability to change app icon without an update means that developers can perform the operation whenever they like. While the addition of this feature does not seem important at first, but the move can open endless possibilities to how developers can interact with their apps. Developers can take advantage of the new iOS 10.3 SDK through the new Instance method to specify the primary and alternative app icons.

Also specific app can not change the icon unless its visible on the Home screen. When you change the icon, there is a system alert saying saying You have changed the icon for "Application Name".

This gif shows how this feature works:

The Setup

I made a simple example to show how Alternate Icon works in iOS 10.3. The example is based on trip planner use case. You have to selected where do you want to go and the app icon will be changed accordingly. The sample app available on github.

Info.plist file

developer should declare all alternate icons in info.list. define CFBundleIcons key that contain 2 sub keys CFBundlePrimaryIcon and CFBundleAlternateIcons. In this case the problem is that developer should give up Asset catalog for icons and go back to the old method with .png resources.

<key>CFBundleIcons</key>
 <dict>
  <key>CFBundleAlternateIcons</key>
  <dict>
   <key>barca</key>
   <dict>
    <key>CFBundleIconFiles</key>
    <array>
     <string>ic_barca</string>
    </array>
    <key>UIPrerenderedIcon</key>
    <false/>
   </dict>
   <key>ams</key>
   <dict>
    <key>CFBundleIconFiles</key>
    <array>
     <string>ic_ams</string>
    </array>
    <key>UIPrerenderedIcon</key>
    <false/>
   </dict>
   <key>paris</key>
   <dict>
    <key>CFBundleIconFiles</key>
    <array>
     <string>ic_paris</string>
    </array>
    <key>UIPrerenderedIcon</key>
    <false/>
   </dict>
  </dict>
  <key>CFBundlePrimaryIcon</key>
  <dict>
   <key>CFBundleIconFiles</key>
   <array>
    <string>ic_none</string>
   </array>
   <key>UIPrerenderedIcon</key>
   <false/>
  </dict>
 </dict>

In this case we define 3 alternate icons:

  • barca (icon ic_barca)
  • ams (icon ic_ams)
  • paris (icon ic_paris)

And we have the primary icon (the default one) ic_none.

Call SetAlternateIconName API

Once the icons are declared, we simply have to call setAlternateIconName(_:completionHandler:) on UIApplication shared instance with one of the declared icon names. For instance, if we want amsicon:

UIApplication.shared.setAlternateIconName("it") { (error) in
 if let error = error {
      print("error: \(error)")
    }
}

Get the name of the icon being displayed for the app

If you want to know which icon is being displayed, just read alternateIconName on UIApplication shared instance:

let currentIcon = UIApplication.shared.alternateIconName

Sameh Mabrouk

Written by

Senior iOS Engineer @VanMoof