How to configure multiple sets of App icons in Xcode --- AppStore icon A/B Test practice

Author: iHTCboy

Recently, Apple has launched a new feature on the App Store product page, in which different icons are used on different versions of the app product page, and the version with the best effect is found through A/B Test. But the Apple document does not give a detailed tutorial, how to integrate multiple sets of icons in Xcode? This is the content of this article, suitable for iOS technology development students to read.

1. Background

On December 08, 2021, Apple launched a new feature of the App Store product page. In the App Store, developers can use different icons, screenshots and app previews for different versions of the app product page, and find out the effect through A/B Test best version. Some readers may know our previous article Interpretation of the new features of the AppStore: custom product pages and A/B Test tools , leaving this question at the time: What is the app review process for testing different app icons and submitting new icons? ?

In the Get ready to optimize your App Store product page - WWDC21 video, there is such a passage:

And remember, to test a variation of your app icon, you'll need to include the icon assets in the binary of your app version that is currently live, so make sure to prepare your app releases accordingly. Remember, to test the
app Icon variant, you will need to include the icon set in the binaries of the app version that is currently live, so make sure to prepare your app version accordingly.

1.1 Xcode integrates multiple sets of test App icons

How to include different icon sets into the app? First of all, I thought of the Xcode 13 beta version, and then found this passage in Apple's documentation Xcode 13 Beta 3 Release Notes | Apple Developer Documentation :

Asset Catalogs

New Features

At runtime, your app can now use iOS app icon assets from its asset catalog as alternate app icons. A new build setting, “Include all app icon assets,” controls whether Xcode includes all app icon sets in the built product. When the setting is disabled, Xcode includes the primary app icon, along with the icons specified in the new setting, “Alternate app icon sets.” The asset catalog compiler inserts the appropriate content into the Info.plist of the built product. (33600923) at
run , your app can now use the iOS app icon asset from its asset catalog as a backup app icon. A new build setting "Include all app icon assets" controls whether Xcode includes all app icon sets in the build product. When this setting is disabled, Xcode includes the main app icon, as well as the icon specified in the new setting "Alternate app icon set". The asset catalog compiler inserts the appropriate content into the build product's Info.plist. (33600923)

Let me talk about the conclusion first: to realize the integration of multiple sets of App icons, it depends on Xcode 13 ! Xcode 13 ! Xcode 13 !

Two, the text

Before Xcode 13, if you want to dynamically switch icons for iOS App, you need to add CFBundleAlternatelconsrelated to declare the corresponding alternate icons. If you want multiple sets of App icons, you need to add a lot of tags, which is not intuitive and efficient enough.

Therefore, starting from Xcode 13, it is possible to create an AppIcon icon template Assets.xcassetsin , which is intuitive and convenient to manage icons.

2.1 How to add multiple sets of App icons

First of all, let's talk about how to do it directly, it is not complicated. In the last article, let's summarize the precautions.

Just like adding App icons, just add all required icon sets Assets.xcassetsto .

Then Include all app icon assetschange to YES. (Note, Xcode 13 or above is required for this field!)

The role of option Include all app icon assetsconfiguration is to decide whether the Asset Catalogs compiler should also compile all the spare icons into the asset set when packaging.

So, to summarize briefly:

Using Xcode 13
Assets.xcassetsCreate multiple sets of test icons and add corresponding icons
Include all app icon assetsset toYSE

2.2 Principle analysis solution

How to verify whether multiple sets of icons are added successfully

To verify success, you need to know what Xcode did. By Include all app icon assetschanging the to YES, Xcode does several things:

Pack the 60x60@2x and 60x60@3x two iOS App icons of each set of icons into Assets.carthe file
Put the 60x60@2x and 60x60@3x two iOS App icons of each set of icons into the package body directory
CFBundleAlternateIconsAdd an alternate icon as the key-value of the name under the field of Info.plist

Therefore, it can be verified from these three aspects.

After packaging, you can check whether there are CFBundleAlternateIconscorresponding :

It can also be verified by checking whether the icon is included in Assets.carthe file , so I won’t repeat it here.

Only use some spare icons

Can be Alternate App Icon Setsset use only the backup icon. For preconditions, Include all app icon assetsset it to NO.

Through the picture above, you can specify only 3 sets of backup icons. Special attention needs to be paid to:

The name of the filled icon set must be consistent with the name Assets.carin
If a wrong or nonexistent name is filled in, Xcode will ignore it and will not report an error

Therefore, you can confirm that the name is correct through the verification method mentioned above.

Note: When Include all app icon assetsto be set to YSE, Xcode will ignore the content Alternate App Icon Setsset .

Do not use transparent icons

As shown in the figure above, using a picture with a transparent area, the final displayed icon will have a black background:

1024 icons do not use JPG format

1024x1024 store image, jpg can be used as the main icon. If the png format is used, there cannot be a transparent area, otherwise an error will be reported when uploading the ipa package body and cannot be reported.

As for the alternate icon, jpg cannot be used! Cannot use jpg! Cannot use jpg!

When reporting, an error will be reported:

Dear Developer,

We identified one or more issues with a recent delivery for your app, "斗罗大陆：魂师对决" 2.3.1 (2.3.1). Please correct the following issues, then upload again.

ITMS-90033: Invalid Image - - Image found at the path 'TestAIcon-1x~marketing-0-7-0-85-220.jpeg' referenced under key 'CFBundleAlternateIcons' is not a valid PNG file

Therefore, the 1024x1024 for the backup icon must be in PNG format!

Code for icon switching

Finally, because the backup image has been configured and verified to be in effect, it can also be called by code to switch the backup icon test:

When setting an alternate icon, just pass in the name of the icon set, one line of code:

UIApplication.shared.setAlternateIconName("Rainbow")

Code to set back to default icon:

UIApplication.shared.setAlternateIconName(nil)

Finally, we uploaded the above configuration example to GitHub and provided versions of ObjC, Swift, and SwiftUI for your reference.

37iOS/Assets-Alternate-App-Icons - GitHub

More flexible configuration

Include all app icon assetsThe name of the corresponding buildSettings in Xcode is ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS, and the Alternate App Icon Setscorresponding field is ASSETCATALOG_COMPILER_ALTERNATE_APPICON_NAMES. There is also a field for setting the main icon of the App Primary App Icon Set Namecorresponding to ASSETCATALOG_COMPILER_APPICON_NAME.

In fact, these fields are mapped to the GUI interface in Xcode 13:

What good is this? After testing the data through multiple sets of icons, it may be necessary to use a spare icon as the main icon. Through Generalthe panel , you can quickly change the spare icon set to the main icon.

Apple background configuration

It should be noted that a package containing multiple sets of icons needs to be reviewed according to the process of submitting the package body for review before you can see multiple sets of icons under the Apple Background 产品页优化tab , App Iconunder the sub-tabs:

Specifically, if you configure a test solution for multiple sets of icons, you can refer to Apple's documentation: Configuration Solution - App Store Connect Help . I won't expand here.

Summarize

Xcode 13 supports Assets.xcassetsthe configuration of multiple sets of alternate icons, which reduces the cumbersome configuration of developers before and improves the development experience. I hope that more developers will try it in the future. Multiple sets of icons can meet the customization needs of users to a certain extent.

Conducting A/B tests on multiple sets of App materials to find out the materials with the best effect is an excellent means of product iterative optimization. Everyone can try it out right away, 找出最具吸引力的版本more attractive and efficient App Store product pages!

Finally, we are now participating in the "2021 Nuggets Popular Team List", I hope everyone can cheer us on! Encourage us to be innovative in 2022~

Entrance to Cheer Up: Voting Link
Entrance to Cheer Up: Voting Link
Entrance to Cheer Up: Voting Link