Author: iHTCboy

Apple recently introduced A new feature in the App Store product page, which uses different ICONS on different versions of the App product page and uses A/B Test to find out which version works best. But the Apple documentation doesn’t give a detailed tutorial on how to integrate multiple sets of ICONS in Xcode. This is the content to explain, suitable for iOS technology development students to read.

The background,

On December 08, 2021, Apple launched A new feature for the App Store product page, which allows developers to use different ICONS, screenshots, and App previews for different versions of the App page, using A/B Test to find out which version works best. For those readers who may know our previous article on the AppStore’s new features: custom product pages and A/B Test tools, there was A question left: what is the app approval process for testing different app ICONS and submitting new ICONS?

Get Ready to Optimize Your App Store Product Page – WWDC21

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. Keep in mind that to test variations of app ICONS, you need to include the icon set in the binary of the currently live app version, so make sure you prepare the app version accordingly.

1.1 Xcode integrates multiple sets of test App ICONS

How do I include different sets of ICONS in my app? First of all, think of Xcode 13 beta version, and then in Apple’s Xcode document 13 beta 3 Release Notes | Apple Developer Documentation found in such a words:

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 runtime, your app can now use the iOS App icon asset in its asset catalog as an alternate app icon. The new build setting “Include all App icon assets” controls whether Xcode contains all app icon sets in the build product. When this setting is disabled, Xcode includes the primary App icon, as well as the ICONS specified in the new setting “Alternate App Icon Set”. The asset catalog compiler inserts the appropriate content into the info.plist that builds the product. (33600923).

Conclusion: To achieve multiple sets of App icon integration, is to rely on Xcode 13! Xcode 13! Xcode 13!

Second, the body

Before Xcode 13, if you want to achieve dynamic icon switching in iOS App, you need to add related fields of CFBundleAlternatelcons in info.plist to declare corresponding alternate ICONS. If multiple App ICONS are required, many labels need to be added, which is not intuitive and efficient.

Therefore, starting with Xcode 13, it is possible to create an AppIcon icon template in the Assets. Xcassets of the project for intuitive and easy icon management.

2.1 How can I Add multiple App ICONS

So first of all, let’s go straight to how to do it, which is not complicated. In the last article, to sum up the matters needing attention.

Just like adding App ICONS, add all required icon sets to Assets.xcassets.

Then change Include All App Icon Assets to YES. (Note that you need Xcode 13 or higher to have this field!)

The Include All App Icon Assets configuration determines at package time whether the Asset Catalogs compiler should compile all of the standby ICONS into the Asset set as well.

So, to summarize briefly:

  1. Using the Xcode 13
  2. inAssets.xcassetsCreate multiple sets of test ICONS and add corresponding ICONS
  3. inInclude all app icon assetsSet toYSE

2.2 Solution of principle analysis

How do I verify that multiple sets of ICONS are successfully added

To verify success, you need to know what Xcode does. To change Include All App Icon Assets to YES, Xcode does a few things:

  • Pack 60×60@2x and 60×60@3x iOS App ICONS for each set of iconAssets.carIn the file
  • Place the iOS App ICONS 60×60@2x and 60×60@3x of each icon in the package body directory
  • In the Info. The plistCFBundleAlternateIconsAdd a key-value under the name of the backup icon

Therefore, it can be verified from these three aspects.

After the package is packaged, you can check whether there are multiple Icon names corresponding to CFBundleAlternateIcons under Icon Files (iOS 5) configuration in the info.plist file:

You can also verify that the Assets. Car file contains the icon, so I won’t repeat it here.

Use only some spare ICONS

Alternate App Icon Sets you can set Alternate App Icon Sets to use only backup ICONS. Prerequisites Include All App Icon Assets must be set to NO.

From the above, you can specify that only three sets of alternate ICONS are set. Special attention should be paid to:

  • Fill in the name of the icon set, be sure toAssets.carThe names are the same
  • If you fill in an error or a nonexistent name, Xcode ignores it and does not report an error

Therefore, you can use the verification method mentioned above to ensure that the name is correct.

Note: Xcode ignores Alternate App Icon Sets when Include All app Icon Assets are set to YSE.

Do not use transparent ICONS

As shown in the image above, using an image with a transparent area will eventually display an icon with a black background:

Do not use JPG format for ICONS

1024×1024 store image that can be JPG when used as the main icon. If the IPA package is in PNG format, the transparent area cannot be displayed. Otherwise, an error is reported when the IPA package is uploaded.

For alternate ICONS, JPG cannot be used! JPG cannot be used! JPG cannot be used!

Errors 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 fileCopy the code

Therefore, the alternate icon 1024×1024 must be PNG!

Code for icon switch

Finally, since the alternate image has been illustrated and verified, you can also call the alternate icon test with code:

To set up an alternate icon, pass in the name of the icon set.

UIApplication.shared.setAlternateIconName("Rainbow")
Copy the code

The code for setting the default icon:

UIApplication.shared.setAlternateIconName(nil)
Copy the code

Finally, we uploaded the above configuration examples to GitHub, providing ObjC, Swift, SwiftUI versions for your reference.

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

More flexible configuration

Include all app icon Assets in Xcode the corresponding buildSettings name is ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS, The field corresponding to Alternate App Icon Sets is ASSETCATALOG_COMPILER_ALTERNATE_APPICON_NAMES. Primary App Icon Set Name corresponds to ASSETCATALOG_COMPILER_APPICON_NAME.

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

What good is that? After testing multiple sets of ICONS, you may need to use a standby icon as the primary icon. You can use the General panel to quickly change the standby icon set to the primary icon.

Apple background configuration

It should be noted that packages containing multiple sets of ICONS can be seen under the optimization TAB of Apple background product page and under the sub-tab of App Icon only after they are reviewed according to the package body submission process:

For details about how to configure multiple icon test schemes, see the App Store Connect help in the Apple documentation. I’m not going to expand it here.

conclusion

Xcode 13 supports the configuration of multiple standby ICONS through assets. xcassets, which reduces the complicated configuration of developers and improves the development experience. It is hoped that more developers will try it in the future, and multiple sets of ICONS can meet users’ customization requirements to a certain extent.

It is an excellent means of product iterative optimization to conduct A/B test on multiple sets of App materials and find out the materials with the best effect. Give it a try and find the most attractive version to make the App Store product page more attractive and efficient!

Finally, we are now participating in the “2021 Nuggets Favorite Teams list”, hope you can cheer us up! We are encouraged to make innovations in 2022

  • Cheer up entry: vote link
  • Cheer up entry: vote link
  • Cheer up entry: vote link

reference

  • Read the AppStore’s new features: custom product pages and A/B Test tools
  • New features now available on the App Store Product page – News – Apple Developer
  • Get ready to optimize your App Store product page – WWDC21
  • Xcode 13 Beta 3 Release Notes | Apple Developer Documentation
  • How to change your app icon dynamically with setAlternateIconName()
  • Alternate App Icons using Asset Catalogs in Xcode 13| Medium
  • Simple alternate app icons with Xcode 13 and SwiftUI
  • jknlsn/XCode13-Alternate-App-Icons
  • Configuration Solution – App Store Connect Help
  • Product Page Optimization – App Store – Apple Developer
  • 37iOS/Assets-Alternate-App-Icons – GitHub