Adding an icon to your App Bundle - Product Page Optimization

A short guide on how to add an alternate icon to your app bundle for Product Page Tests

December 14, 2021

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"

Primary icon

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

Alternate icon
We're building a new way to run tests on Custom Product Pages
- Send traffic to Custom Product Pages from Facebook (right now!)
- Run A/B tests on your Custom Product Pages

Interested? Request access to the beta
Request Access

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: 

Example file structure for storing your alternate icons

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

Sign up to receive updates on ASO Giraffe's new features and blog posts
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Further Reading
Introducing... Switcher by ASO Giraffe
Introducing the best Native App Store Country Switcher by ASO Giraffe
January 18, 2022
How to set up a Product Page Test - Product Page Optimization, Apple
A guide on setting up a Product Page Test using Apple's new Product Page Optimization feature
December 14, 2021