How to Change OutSystems App Icons Per Environment: A Step-by-Step Guide

OutSystems developers often juggle multiple environments – development, testing, and production. Accidentally deploying or testing in the wrong environment can lead to confusion or even costly mistakes. One simple but effective solution is to set different app icons for each environment, giving you a clear visual cue every time you open your app.

In this guide, OutSystems Developer Kenneth Alberto walks you through the process of changing your OutSystems app icon per environment, so you always know exactly where you are working.

Why Change App Icons Per Environment?

Visual Confirmation: Instantly recognize if you’re in Dev, Test, or Prod.
Avoid Costly Mistakes: Prevent deploying or testing in the wrong environment.
Professional Workflow: Makes your app management cleaner and more organized.

Step 1: Prepare Your Icons

Start by creating distinct icons for each environment. For example, use your standard icon for Production and add a “DEV” label for Development.

Organize your icons in a resource folder with subfolders for each environment (e.g., prod, dev).
Inside each environment folder, create subfolders for iOS and Android.
Each platform folder should contain all required icon sizes. OutSystems provides a list of required icon sizes and a JSON template to help you prepare.

Step 2: Compress and Import Icons

Zip your resource folder (containing all icons and subfolders).
Open your application module in Service Studio.
Go to the Data tab, right-click Resources, and select Import Resource. Choose your zipped icon file.

Step 3: Configure Icons in Extensibility Settings

Click the module name and open Properties.
Under Extensibility Configuration, use the JSON template provided by OutSystems.
Specify the resource file you imported and define the location and density for Android icons. For iOS, specify the width and height for each icon.
For this example, the default (Production) icon is set to the prod folder.

Step 4: Publish and Generate a Build

Publish your changes.
Generate a new build to apply the updated icons.
Deploy the build to your Production environment. Both Dev and Prod may still show the same icon at this point.

Step 5: Change the Icon for the Development Environment

Go to OutSystems Lifetime and search for your application.
Click Settings for the application.
Select the Development environment.
Scroll down to Extensibility Configuration and select Custom.
Click Copy from Default to duplicate your JSON config.
Change the target directory from prod to dev in the JSON so it points to your Dev icon folder.
Save your changes.

Step 6: Generate a New Build for Dev

Return to Service Studio and generate a new build for the Development environment.
After installing, you’ll see two apps-one for Dev, one for Prod-each with its own distinct icon.

Final Result

You now have unique icons for each environment, making it easy to see at a glance where you’re working. This small change can have a big impact on your workflow and peace of mind.