# Branding tools

{% embed url="<https://www.youtube.com/watch?index=1&list=PLMmBhuOTME3Vc4C2DhumOi01z5DW6hk6O&v=mXJ8cHAgNIQ>" %}

## Overview

As part of building a unique Breakroom World, [World Owners](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) and [World Administrators](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) can upload custom graphics to create a cohesive brand experience for end users. This includes the splash screen users see when they log in, the [favicon ](https://en.wikipedia.org/wiki/Favicon)that appears when users access [World Stream](https://docs.breakroom.tech/opening-the-doors/world-stream), and the application icon and installer image for the Breakroom [desktop viewers](https://docs.breakroom.tech/opening-the-doors/desktop-viewers).

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FkVr5TsGwhNvqmYdkFqMC%2FBranding_001.png?alt=media&#x26;token=8e64099f-fe05-4b5a-8499-5fa753500814" alt=""><figcaption><p>Pictured: A custom login screen for an event in Breakroom.</p></figcaption></figure></div>

## Uploading a custom login screen

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FAYm5j5YGLVQwxEtsWTsf%2FBranding_002.png?alt=media&#x26;token=58db2cac-d8d6-4dff-914d-b9cd8b95d8ad" alt=""><figcaption><p>Pictured: The Dashboard > World Customization > Basic Information tab, "Branding" panel.</p></figcaption></figure></div>

To upload a custom login screen image, follow these steps.

1. Navigate to your [Dashboard](https://docs.breakroom.tech/building-new-worlds/breakroom-dashboard-tour).
2. Click on the **World Customization > Basic Information tab**. Scroll down to the "Branding" panel.&#x20;
3. Click the **Browse link** located underneath the **Branding > World Background image panel.** This will launch a standard file import window on your computer.
4. Locate the image file you want to use as your login screen and click on it. Then click the **Open button**.
5. Once your image is uploaded, you will see it appear as a thumbnail.
6. Click the **Save Changes button**.

{% hint style="info" %}
Breakroom supports JPG, JPEG, and PNG images. The recommended dimensions for a login splash screen are 1920x1080, or a 16:9 ratio, with a maximum file size of 5MB.
{% endhint %}

## Branding the application logo or favicon

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2Fy4RZxp65TRkA0enxQFBc%2FBranding_006.png?alt=media&#x26;token=91dd9557-85f8-4aa0-bf87-c173a996ec17" alt=""><figcaption><p>Pictured: Several application icons in the Windows taskbar.</p></figcaption></figure></div>

Your custom application logo will replace the default application icon when users install your Breakroom desktop app. It will also replace the default favicon in the [World Stream](https://docs.breakroom.tech/opening-the-doors/world-stream) browser tab.

To upload a custom app logo or favicon, follow these steps.

1. Navigate to your [Dashboard](https://docs.breakroom.tech/building-new-worlds/breakroom-dashboard-tour).
2. Click on the **World Customization > Basic Information tab**. Scroll down to the "Branding" panel.&#x20;
3. Click the **Browse link** located underneath the **Branding > Application logo panel.** This will launch a standard file import window on your computer.
4. Locate the image file you want to use as your login screen and click on it. Then click the **Open button**.
5. Once your image is uploaded, you will see it appear as a thumbnail.
6. Click the **Save Changes button**.

{% hint style="info" %}
Breakroom supports JPG, JPEG and PNG images. The recommended dimensions for an application logo are 256x256, or a 1:1 ratio, with a maximum file size of 5MB.
{% endhint %}

### Application logo best practices

Application logos are very small images—only 256x256 pixels. Depending on the device, your logo may not even be displayed at full size. For these reasons, it's important to follow some best practice tips when creating your application logo.

1. *Go text-free if you can*. Small letters and dense text will not be visible to most users.
2. *Pick something bold and attention-grabbing*. Your company logo or your company's first initial is a great place to start.
3. *Pick contrasting colors*. A hot pink logo on a tropical orange background may be difficult for users to see.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2Fv2BtUEbJ6lncVuxYT6pB%2FBranding_003.png?alt=media&#x26;token=d19e2893-1dcc-4209-ba55-263e2afb9ccb" alt="" width="188"><figcaption></figcaption></figure>

Let's compare these example logos from two fictional companies—Best World and Happy Water. Here we can see that the logo for Best World (left) features small text and an even smaller image. There's also a lot of empty space, and the pink text almost disappears into the red background. Meanwhile, the Happy Water logo (right) is bold and welcoming, with colors that stand out from one another.

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2F6lAj93jeMNphMwhXQDdF%2FBranding_004.png?alt=media&#x26;token=42102a75-bcc2-4114-9dee-5db30c7e3b5c" alt="" width="66"><figcaption></figcaption></figure>

Here are the same logos reduced to 32x32 pixels, mimicking what users may see when running your Breakroom app in their system tray. You can see how the Best World logo is unreadable, while the Happy Water logo is still recognizable.

## Branding the installer image

<div data-with-frame="true"><figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FdCB7sjF7jbCpwAItZtwp%2FBranding_005.png?alt=media&#x26;token=8a5063e5-467b-4ee9-beb3-ab6c3197c4b2" alt="" width="383"><figcaption><p>Pictured: The desktop app installation dialog box.</p></figcaption></figure></div>

Users will see your custom installer image when they download your desktop app and install it on their computers.

To upload a custom installer image, follow these steps.

1. Navigate to your [Dashboard](https://docs.breakroom.tech/building-new-worlds/breakroom-dashboard-tour).
2. Click on the **World Customization > Basic Information tab**. Scroll down to the "Branding" panel.&#x20;
3. Click the **Browse link** located underneath the **Branding > Installer image panel.** This will launch a standard file import window on your computer.
4. Locate the image file you want to use as your login screen and click on it. Then click the **Open button**.
5. Once your image is uploaded, you will see it appear as a thumbnail.
6. Click the **Save Changes button**.

{% hint style="info" %}
Install images must be in PNG format. The recommended dimensions for an install image are 163x314, with a maximum file size of 5MB.
{% endhint %}