Adding an icon to your App Bundle - Product Page Optimization

Although Apple's Product Page Optimization has been a little bit disappointing so far, there's still a lot of excitement about testing alternate app icons.  

Actually, Apple has had the ability to add alternate icons since iOS 10.3, and Instagram famously made use of the feature to enable you to change to historical icons, but with Product Page Optimization, you can now test these icons in A/B tests natively on the App Store.

But... (there's always a but!) these alternate app icons need to be included into the app bundle, and the trouble is, it's not so clear how that should happen.

‍

In this article we'll share some information on how to add icons to your bundle for Product Page Tests.

‍

To kick things off, these changes take place inside your iOS app's info.plist (you may want to get a developer to help here)

‍

Defining alternate icons for your app is achieved with a couple of elements:

1. CFBundleIcons: A dictionary that defines what your primary and alternate icons are
2. CFBundlePrimaryIcon: Your primary icon (that displays by default)
3. CFBundleAlternateIcons: One or a number of alternate icons included in your bundle

CFBundlePrimaryIcon is a dictionary that lists the icon files, CFBundleIconFiles, another array containing filenames for your primary icon.

Setting up your alternate icons

Imagine I'm setting up a new app icon test between the following two variants:

Variant 1 (Primary Icon) - let's call this one "MechaIcon"

Variant 2 (Alternate icon) - let's call this one "WarriorIcon"

I'll want to set up my info.plist, adding the following right before the closing two tags </dict></plist> like so:

So what have I done here?

I defined:

1. My primary icon as 'Mecha'  (bound to the file 'MechaIcon")
2. My alternate icon as 'Warrior'(bound to the file 'WarriorIcon")

The actual icon resources should be defined in a folder within the same folder as the info.plist (or alongside your existing , with the same naming convention as Apple's usual icons, so your folder structure should look like this, but you can also put it next to where your current App Store icon is: 

‍

And there you go, pretty simple in the end, how did you get on with addiing alternate icons, let us know!