# App Icon & Splash Screen

{% hint style="info" %}
For a published app, in order to update the app icon or Splash screen it's required to get a new build (AAB for Android and IPA for iOS) and send an update to the stores.
{% endhint %}

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

These tags allow to create a custom app icon and splash screen, replacing the default Bravo ones.

**📍 Where to add the tag:** A top-level app page.

{% tabs %}
{% tab title="App Icon" %}

```
[asset:icon]
```

The thumbnail image for your Bravo project and the home screen icon for your final app.

{% hint style="warning" %}
Should be added in a **1024x1024px** app screen.
{% endhint %}
{% endtab %}

{% tab title="Splash Screen" %}

```
[asset:splash]
```

The launch screen that displays while your app loads at first open. This will replace the default Bravo splash screen in your app bundles.&#x20;

{% hint style="warning" %}
This screen does not show in Bravo Vision.
{% endhint %}
{% endtab %}
{% endtabs %}

## 🏷️ **How to add the tag: App Icon** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

&#x20;   1\. In the same design file of your app design, create a **1024x1024px app page** with your app icon design.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhxhDezDowBG9pYN1TH%2F-Mhxj2g6bzW_bY8z3oPt%2Fsplash1.webp?alt=media\&token=104b0e7e-9908-4629-8365-d4d6ccd607e2)

&#x20;   2\. **Paste** the tag into the layer name of the top-level app page.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhxhDezDowBG9pYN1TH%2F-Mhxj76edzelW7fYNnPv%2Fsplash2.gif?alt=media\&token=3ae36a37-2ca1-409a-aef4-34915c7d15f8)

&#x20;   3\. When you import this file into Bravo (or update your app project), you will see the app icon as the thumbnail of your app project in Bravo Studio and Bravo Vision.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhxhDezDowBG9pYN1TH%2F-MhxjBGMq-TMw5zWZS8k%2Fsplash3.webp?alt=media\&token=d01d55b2-8f34-46f4-8e2f-e89c4d9c3be9)

&#x20;   4\. The app icon will be included in your app packages that you install or publish.

{% hint style="warning" %}
Make sure you only create **one** app icon in your design file.
{% endhint %}

## 🏷️ **How to add the tag: Splash Screen** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

&#x20;   1\. In the same design file of your app design, create an app page with your splash screen design. You do not need a container.

{% hint style="warning" %}
The screen size for your splash screen should be the "default" screen size (i.e one full screen).
{% endhint %}

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhxhDezDowBG9pYN1TH%2F-Mhxjb79HZ6rjF283HIH%2Fsplash11.webp?alt=media\&token=509b80cd-d0b2-482b-bc15-129780e03486)

&#x20;   2\. **Paste** the tag into the layer name of the top-level app page.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-MhxhDezDowBG9pYN1TH%2F-MhxjhrcY8_2Gf8Lr0ZA%2Fsplash22.gif?alt=media\&token=132ebd9c-c706-41b8-b3d1-52db31932eaa)

&#x20;   3\. The splash screen will be included in your published app. In Bravo Vision, you'll always see the default Bravo splash screen.

{% hint style="warning" %}
Make sure you only create **one** splash screen in your design file.
{% endhint %}

## 💾 Example files <a href="#example-files" id="example-files"></a>

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/832996906819389496>" %}