# Setting the Primary Color, Name and Logo in Kiosk/App Portal (15.3+)

## What

This article provides step-by-step instructions for configuring the new Kiosk2 and App Portal introduced in FileWave 15.3.0, including how to set a primary color, name, and logo for the App Portal / Kiosk on FileWave v15.3.0+.

## When/Why

For brand consistency, options exist (depending on device type) for configuring:

- Colour
- Name
- Logo that appears in macOS/Windows menu bar/system tray
- Logo that appears in macOS/Windows Kiosk application

<p class="callout info">When referring to a custom logo, the expected image should be: 112 x 96, 8-bit/color RGBA, non-interlaced  
Some changes are server side. If hosted, please contact Technical Support for assistance.  
</p>

## How

<details id="bkmrk-ios-%26-ipados-devices"><summary>iOS &amp; iPadOS</summary>

Devices of this nature use the App Portal. As of FileWave 15.3, the App Portal IPA is automatically delivered to devices and will automatically update.

### Customisation Options:

- Logo (Default to FileWave Logo if no custom logo set)
- Colour

### Logo Customisation

<p class="callout info">If you are a [Hosted Customer](https://kb.filewave.com/books/community-engagement/page/cloud-hosting-product-information "Cloud Hosting Product Information") then you will need [Technical Support](https://kb.filewave.com/books/community-engagement/page/customer-technical-support "Customer Technical Support") to assist with these changes for now.</p>

Direct editing of the IPA is not feasible. As such, the logo needs to be hosted from the FileWave Server. The chosen image needs to be placed in the following location:

`/usr/local/filewave/django/static/kiosk2/images/`

For the IPA to utilise this image, edit the the following file:

`/usr/local/filewave/django/filewave/settings_custom.py`

The line may be added to the bottom of the custom settings file and needs to include the FQDN of the FileWave Server, along with the named image in the format:

*KIOSK\_LOGO\_URL = 'https://\[fully\_qualified\_domain\_name\]/filewave/static/kiosk2/images/\[file name\]'*

For example, imagine those details are:

- image.svg
- demo.filewave.ch

The line added will then appear as:

`KIOSK_LOGO_URL = 'https://demo.filewave.ch/filewave/static/kiosk2/images/image.svg'`

Supported file formats are:

```
- SVG
- JPEG
- PNG
- GIF
- Animated GIF
- WebP
- Animated WebP
- BMP
- WBMP
```

### Customise Colour

Colour may be customised by editing the same custom settings file. The colour should be presented in hex of either 6 or 8 characters. The line to add (again this may be added to the bottom of the custom settings file), should be of the format:

*KIOSK\_PRIMARY\_COLOR = '\[hex colour\]'*

 For example:

```
KIOSK_PRIMARY_COLOR = '#e580ff'
```

or

```
KIOSK_PRIMARY_COLOR = '#FF0000CC'
```

<p class="callout info">The FileWave Server Service should be restarted after modification of the custom settings python file.</p>

</details><details id="bkmrk-macos-%26-windows-maco"><summary>macOS</summary>

macOS access the Kiosk by way of the Menu Bar

### macOS Kiosk App Logo

### Customisation Options:

- Logo (Default to FileWave Logo if no custom logo set) - Note that this logo is the one seen in the app. To customize the one in the menu bar you must look at [Local macOS Logo](#bkmrk-local-logo) below.
- Colour
- Kiosk App Name

All 3 items can be specified through a single file:

macOS:

`/usr/local/sbin/FileWave.app/Contents/MacOS/FileWave\ Kiosk.app/Contents/custom/settings.json`

The contents should appear similar to:

```
{
   "logo_url": "https://my.company/logo.svg",
   "primary_color": "#0465DA",
   "kiosk_app_name": "My Kiosk"
}
```

Defined as:

<table border="1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 33.333333%;"></col><col style="width: 33.333333%;"></col><col style="width: 33.333333%;"></col></colgroup><tbody><tr><td>**Key Name**</td><td>**Key Value**</td><td>**Default**</td></tr><tr><td>logo\_url</td><td>URL path to hosted custom image</td><td>FileWave Logo</td></tr><tr><td>primary\_color</td><td>Colour in hex format, e.g. #RRGGBB</td><td>\#0465DA</td></tr><tr><td>kiosk\_app\_name</td><td>Text Name of opened Kiosk Window</td><td>FileWave Kiosk</td></tr></tbody></table>

<p class="callout info"> It may be necessary to reboot the computer before changes take effect; particularly if customisation of the older Kiosk was removed at the same time that the new Kiosk and customisation is added.</p>

<p class="callout success">If the custom icon is added as per the instructions for i(Pad)OS devices, the same URL may be used in the above settings.</p>

### macOS Menu Bar Logo

The above method requires a logo to be hosted. However, it may be desirable to provide a local logo instead. The following methods provide a pre-configured Fileset to achieve this. The logo in this case is the icon in the menu bar only.

[FileWave Kiosk2 Menu Bar Icon.fileset.zip](https://kb.filewave.com/attachments/352)

The Fileset needs to be edited prior to deployment. Out of the two files shown, the chosen custom image should be named to match the first png: 'tray-icon-macos.png'. Leave the other file in place.

[![image.png](https://kb.filewave.com/uploads/images/gallery/2024-05/scaled-1680-/9RnVuVUgfWt1JLlN-image.png)](https://kb.filewave.com/uploads/images/gallery/2024-05/9RnVuVUgfWt1JLlN-image.png)

 Dragging the custom icon over the shown file should prompt a message as below. Select Replace.

[![image.png](https://kb.filewave.com/uploads/images/gallery/2024-05/scaled-1680-/amQ1bWqAPhoSNJH6-image.png)](https://kb.filewave.com/uploads/images/gallery/2024-05/amQ1bWqAPhoSNJH6-image.png)

Associate with a test device, and once happy with the look, you can broaden the association.

The Fileset is designed to:

- Restart the Kiosk after activation, automatically ensuring the user is immediately presented with the new logo
- On de-activation, the '`tray-icon-macos.png.fw`' file will be copied to replace the custom logo (resetting the default) and again restarting the Kiosk for immediate change.

<p class="callout info">The new image will not show unit the FileWave Client is restarted.</p>

</details><details id="bkmrk-windows-macos-and-wi"><summary>Windows</summary>

Windows access the Kiosk by way of a System Tray item

### Windows Kiosk App Logo

### Customisation Options:

- Logo (Default to FileWave Logo if no custom logo set)
- Colour
- Kiosk App Name

All 3 items can be specified through a single file:

Windows:

`C:\Program Files (x86)\FileWave\kiosk\custom\settings.json`

The contents should appear similar to:

```
{
   "logo_url": "https://my.company/logo.svg",
   "primary_color": "#0465DA",
   "kiosk_app_name": "My Kiosk"
}
```

Defined as:

<table border="1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 33.333333%;"></col><col style="width: 33.333333%;"></col><col style="width: 33.333333%;"></col></colgroup><tbody><tr><td>**Key Name**</td><td>**Key Value**</td><td>**Default**</td></tr><tr><td>logo\_url</td><td>URL path to hosted custom image</td><td>FileWave Logo</td></tr><tr><td>primary\_color</td><td>Colour in hex format, e.g. #RRGGBB</td><td>\#0465DA</td></tr><tr><td>kiosk\_app\_name</td><td>Text Name of opened Kiosk Window</td><td>FileWave Kiosk</td></tr></tbody></table>

<p class="callout info"> It may be necessary to reboot the computer before changes take effect; particularly if customisation of the older Kiosk was removed at the same time that the new Kiosk and customisation is added.</p>

<p class="callout success">If the custom icon is added as per the instructions for i(Pad)OS devices, the same URL may be used in the above settings.</p>

### Windows System Tray Logo

The above method requires a logo to be hosted. However, it may be desirable to provide a local logo instead. The following methods provide a pre-configured Fileset to achieve this. The logo in this case is the icon in the System Tray only.

[FileWave Kiosk2 Sytem Tray Icon.fileset.zip](https://kb.filewave.com/attachments/353)

The Fileset needs to be edited prior to deployment. Out of the four files shown, the chosen custom icon should be named to match the two icon files: 'tray-icon-dark.ico' and 'tray-icon-light.ico'. Leave the other two files in place.

<p class="callout info">Unlike the other images, the Windows System Tray is using '.ico' files. These need to be of equal size, e.g. 256x256, 128x128, etc.</p>

<p class="callout success">Consider exporting the current 'ico' files, editing them with the chosen logo and then upload, if unsure how to create '.ico' files.</p>

[![image.png](https://kb.filewave.com/uploads/images/gallery/2024-05/scaled-1680-/ahgzf5S9iQbRM8kM-image.png)](https://kb.filewave.com/uploads/images/gallery/2024-05/ahgzf5S9iQbRM8kM-image.png)

Dragging the custom icon over the shown files should prompt a message as below. Select Replace.

[![image.png](https://kb.filewave.com/uploads/images/gallery/2024-05/scaled-1680-/5YtOwr6I4T9tOVZa-image.png)](https://kb.filewave.com/uploads/images/gallery/2024-05/5YtOwr6I4T9tOVZa-image.png)

Associate with a test device and once happy broaden the association.

<p class="callout info">The new image will not show unit the FileWave Client is restarted.</p>

</details>## Related Links

- [FileWave Kiosk for macOS and Windows overview (15.3+)](https://kb.filewave.com/books/kiosk/page/filewave-kiosk-for-macos-and-windows-overview-153 "FileWave Kiosk for macOS and Windows overview (15.3+)")
- [Removing pre-15.3 Kiosk Customizations (macOS/Windows](https://kb.filewave.com/books/kiosk/page/removing-pre-153-kiosk-customizations-macoswindows "Removing pre-15.3 Kiosk Customizations (macOS/Windows)")