> ## Documentation Index
> Fetch the complete documentation index at: https://help.indolat.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customise the Website Appearance

> How to set your CBT system's primary colour, logo, favicon and login banner on the Branding Customisation tab.

As well as [setting how participants log in](https://help.indolat.com/en/lainnya/login-peserta.md), you can customise the look of the system so participants recognise it more easily.

You can set the website colour, the website logo and the front page of the CBT exam website you run.

**1. Open Application Settings, then select Branding Customisation**

![Branding Customisation tab in the Application Settings menu](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_03-55.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=bc7b19f4c49214971029a007128b3d0c)

> [!NOTE]
>
> **Branding Customisation** is an add-on. While the add-on is inactive, the **Branding Customisation** tab shows an **Add-on** badge, its fields can't be changed, and the **Save** button is replaced by **Enable the Branding Customisation Add-on**.

**2. Match the CBT system to your company or institution branding**

![Primary Colour, CBT System Logo, Favicon Logo and Login Banner fields](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_03-57.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=4c7786a19ed9e292096f755d62ff593f)

1. **Primary Colour**\
   Choose the colour used as the main colour of the CBT system interface.

   > 💡 For example, if your institution uses teal, choose teal so that buttons and other parts of the interface match your institution's identity.

   ![Teal selected in the Primary Colour field](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_03-57_1.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=f72bc49e24de3a3ac4ec364bc72f491a)

   Here is how it looks to participants:

   ![Participant page with a teal primary colour](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_03-58_1.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=bcd4a974f33adcf5311d35f52cd2f816)

   > [!TIP]
   >
   > You can enter your own colour code or pick one of the quick colours provided.
2. **CBT System Logo**\
   Upload your institution's main logo by clicking **Browse**.

   ![Browse link in the CBT System Logo field](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-02.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=171f49cdb5a1a7ea6ef6f41e3330ac37)

   💡 Example logo:

   ![Example logo uploaded to the CBT System Logo field](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-02_1.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=6ccb439586a759d352dd4aaa3891cbe8)

   This logo appears on the system pages and helps participants confirm that they have opened the right CBT system.

   ![Institution logo on the participant login page](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-04.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=82419a4e769bb6bf63d7acfa84488473)

   > [!NOTE]
   >
   > Use a **PNG** image of up to **300 KB**.
3. **Favicon Logo**\
   A favicon is the small image shown at the top of the browser, right next to the page name.

   💡 Example: the favicon is the same as the logo.

   ![Example favicon matching the logo in the Favicon Logo field](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-07-1.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=e44904743ee510798aaf1255d16a8576)

   Here is how it looks to participants – *look at the top-left corner*.

   ![Favicon shown in the participant's browser tab](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-05.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=829779d64795dc51316c1d93a7f8c003)

   > [!NOTE]
   >
   > Use a **PNG** image with a **1:1** ratio (32 × 32 pixels) of up to **50 KB**. If you leave this field empty, the system uses the **CBT System Logo** automatically.
4. **Login Banner (Featured Image)**\
   Upload an image (optional) to show next to the participant login form.

   You can use this space to show:

   * tryout (practice exam) information
   * institution promotions
   * exam schedules
   * or an image of your institution's identity

   ![Banner image uploaded to the Login Banner field](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-08.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=6f807ba64aca1312cfac9bd078bfe6ae)

   Use a simple, easy-to-read image so participants aren't confused when they log in. Here is how it looks to participants:

   ![Participant login page with the banner next to the login form](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_05-22.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=63e17a2c861a70bb8f251f91f0bc49b9)

   > [!NOTE]
   >
   > Use a **JPG**, **PNG** or **WEBP** image of up to **2 MB**. A portrait ratio is recommended.

> [!NOTE]
>
> Branding Customisation only changes how the system looks. The login link still follows the **General Information** tab, and how participants log in follows the **Other Settings** tab.

**3. Click Save**

Once everything is set as you want, click **Save**.

![Save button on the Branding Customisation tab](https://mintcdn.com/indolat/w32v_kPLyQnzLAH7/images/2026-07-25_04-09.png?fit=max\&auto=format\&n=w32v_kPLyQnzLAH7\&q=85\&s=d94d3c82e41c2074a28bbacec8bfe06c)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.