How to have different icons for your app

When building an app, we often have the App Store version installed on our devices, but we also need to install the beta version, and if we want to have them both on the same device, we need to differentiate them. The best solution for that is to have different icons.

The first step is to create a configuration for each icon you want. For instance:

  • a Debug configuration for the dev environment,
  • a Beta configuration for the beta environment,
  • a Release configuration for the prod environment.

By default, the Debug and Release configurations are created, we can add a Beta configuration by duplicating an existing configuration.

Next, we have to create several App Icons in the Assets.xcassets file. You can name them as you want, ideally, you want to create one App Icon per configuration.

In the Build Settings of your target, you need to specify the App Icon and the Bundle Identifier for each configuration.

Asset Catalog App Icon Set Name

By doing so, the App Icon will automatically be selected according to the current configuration.

Because an app is identified by its Bundle Identifier, we need to specify a different Bundle Identifier for each configuration. A different app will then be created for each Bundle Identifier.

Sometimes you also want to detect the configuration in code, it’s especially useful for constants, like the domain of your API for instance. There are several ways to do this, the easiest one is to add some flags in the Build Settings.

<pre class="wp-block-code">```
struct Constants {
    #if DEBUG
    static let domain = ""
    #elseif BETA
    static let domain = ""
    static let domain = ""

Of course, the goal is to avoid to use them in too many different files, that’s why I usually put all my constants inside this conditional statement.

### Scheme

You can finally change the **Build Configuration** for your scheme if you want to compile the app on your device for a specific configuration.

<div class="wp-block-image wp-caption"><figure class="aligncenter">![](<figcaption>Edit Scheme’s Build Configuration</figcaption></figure></div>Another solution would be to create a **scheme for each configuration**.

### Fastlane

This is the icing on the cake, thanks to [fastlane you can specify a configuration]( when building your app and the correct icon will automatically be selected.