cft

How to Programmatically Change your App Icon — iOS Swift Guide

4 steps to customize your App Icon


user

Baptiste Montagliani

3 years ago | 4 min read

Apple introduced in iOS 10.3, a new feature that make possible for developers to offer App Icon customization to their users with predefined additional icons.

Here are the 4 steps to add this cool feature to your App. Let’s get started.

Step 1: Design your App Icons

Design your alternative App Icons and export them in two sizes:

  • 120px (60px @2x)
  • 180px (60px @3x)

Add the icons to your project under a new directory App Icons. Note that the alternate icons files must to be in the Project directory, not in the Assets directory.

App your app icons file in the project directory

Step 2: Register your new Icons in the Info.plist file

First, add a new CFBundleIcons entry (Icon files (iOS 5)), then add another entry CFBundleAlternateIcons.

CFBundleAlternateIcons entry in Info.plist

For each alternate icon, add a new entry in the infos.plist file, under CFBundleAlternateIcons. The name of the entry is the name of the icon which will be used later in your Xcode project, and the string value of the item is the name of the icon file that you added in the project at Step 1.

icons entries in Info.plist

Once you’ve added all your icons in Info.plist, your alternate icons are ready to be used in your App.

Step 3: The App Icon Manager

The Apple API to switch App Icons is quite simple and consists of 3 var/functions:

var supportsAlternateIcons: Bool { get }open func setAlternateIconName(_ alternateIconName: String?, completionHandler: ((Error?) -> Void)? = nil)open var alternateIconName: String? { get }

As per the Apple Documentation, supportsAlternateIcons will be true when the system allows you to change the icon of then App, or false otherwise.

The setAlternateIconName method is used to change the App Icon to its primary icon or to one of its alternate icons. If alternateIconName is nil then the default App Icon will be used.

Finally, alternateIconName returns the name of the alternate icon currently used, or nil if the default icon is used.

To handle icon changes easily, we will create an Icon Manager to interact with Apple APIs. First, create an enum containing each of your alternate App Icons.

enum BMAppIcon: CaseIterable {
case classic,
cookie,
donut,
cake,
iceCream
}

BMAppIconManager.swift — BMAppIcon enum.

Now let’s add the file name of each of our icon in the enum, and a preview icon that will be displayed in our App UI. In our enum, classic is the default app icon. That’s why the file name for it will be nil. For more information on why the file name is nil you can check the alternateIconName description on Apple documentation.

var name: String? {
switch self {
case .classic:
return nil
case .cookie:
return "cookieIcon"
case .donut:
return "donutIcon"
case .cake:
return "cakeIcon"
case .iceCream:
return "iceCreamIcon"
}
}

var preview: UIImage {
switch self {
case .classic:
return #imageLiteral(resourceName: "cake@2x.png")
case .cookie:
return #imageLiteral(resourceName: "cookie@2x.png")
case.donut:
return #imageLiteral(resourceName: "donut@2x.png")
case .cake:
return #imageLiteral(resourceName: "cake@2x.png")
case .iceCream:
return #imageLiteral(resourceName: "iceCream@2x.png")
}
}

BMAppIconManager.swift — BMAppIcon enum.

Now that we have our enum, let’s create an AppIconManger class with two functions: one to retrieve the current App Icon, and one to update it.

var current: BMAppIcon {
return BMAppIcon.allCases.first(where: {
$0.name == UIApplication.shared.alternateIconName
}) ?? .classic
}

func setIcon(_ appIcon: BMAppIcon, completion: ((Bool) -> Void)? = nil) {

guard current != appIcon,
UIApplication.shared.supportsAlternateIcons
else { return }

UIApplication.shared.setAlternateIconName(appIcon.name) { error in
if let error = error {
print("Error setting alternate icon \(appIcon.name ?? ""): \(error.localizedDescription)")
}
completion?(error != nil)
}
}

BMAppIconManager.swift — Update App Icon.

Step 4: Use your App Icon Manager in your App

Final step, to update the current App Icon, just call the setIcon function you previously defined and pass the new icon you want to set as parameter.

With the current variable you can know which one of the alternate -or default- icon is currently used, so you can adapt your interface accordingly if needed.

Build and run your App. And here is the result!

Choose your app icon from the App interface.

As you might have see when you switch the App Icon, iOS displays an AlertView to the user stating the icon has changed.

If the Alternate App Icon is a good feature to add new customization possibilities to your App, it’s currently not flexible enough to make dynamic icons like the default weather or clock App icons.

Beside that limitation, there is a lot of integration possibilities in your apps. You can imagine different ways to offer additional icons to your users, by providing some exclusive icons to your Premium users for example, or by unlocking icons after an objective, for a specific celebration, during a period of the year, etc.

Recap

  1. Create your icon files in the required sizes.
  2. Add them in your project and register them in Info.plist.
  3. Encapsulate Apple APIs with an App Icon Manager.
  4. Use your App Icon Manager to update the App Icon from your App UI.
This article was originally published by Baptiste Montagliani on medium.

Upvote


user
Created by

Baptiste Montagliani


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles