---
title: "How to use a custom logo and icon"
source: https://dev.pageseeder.com/get_started/tutorials/how_to_use_a_custom_logo_and_icon.html
last_updated: 2026-09-05T16:44:00+10:00
tokens: ~818
---

# How to use a custom logo and icon

| Property | Value |
| --- | --- |
| Skills required | XML |
| Time required (minutes) | 15 |
| Intended audience | Developer |
| Difficulty | Easy |
| Category | Document |

## Objective

In this tutorial, you’ll learn how to configure PageSeeder to display your logo on the sign-in page and in the top-right corner of PageSeeder.

PageSeeder defines two files, the icon file is displayed as a favicon and contexts where the logo does not fit. The logo is shown on the sign-in, sign-out and other public pages and in the top left-corner when not in the group or project.

## Prerequisites

- You are an administrator
- PageSeeder is configured to use a global template – See [How to set up a global template](/get_started/tutorials/how_to_set_up_a_global_template.md)
- You have a PageSeeder developer license or a service provider licence

## Tutorial

In the following steps, we upload our logo and icons files and modify the organization config in the global template to make them available in the user interface.

### Pages in this tutorial

You will need to go to the **Organization settings** page:

1. Go to the tools **Administration dashboard**
2. Select to the cog **System configuration \> ****Organization settings** from the side-menu

You can reach the **Templates file** page from the **Organization settings** page, or by going to

1. Go to the wrench **Project administration**
2. Select the template **Template \> Template files** from the side-menu

### Upload your logo

In this step, we upload the logo and icon to display in the PageSeeder user interface instead.

> **Note:** You can use the following files as examples: ![example-icon.svg](/content/images/tutorials/how_to_use_a_custom_logo_for_pageseeder_files/example-icon.svg) ![example-logo.svg](/content/images/tutorials/how_to_use_a_custom_logo_for_pageseeder_files/example-logo.svg)

From the **Template files** page of the global template.

1. Create an `organization` folder if it does not already exist
2. Create an `style` folder under the organization folder


  - the style folder is using a different colour to indicate that its contents are publicly available
3. Upload your icon file (for example `example-icon.svg`) in the style folder
4. Upload your icon file (for example `example-logo.svg`) in the style folder

### Update organization config

In this step, we ensure that the organization configuration is defined in your global template.

From the **Organization settings** page or the **Template files** page:

1. Open the `organization-config.xml` file in editor panel
2. Update the organization config file, so that it references you images

```diff-xml
     <ui>
+      <images icon-filename="example-icon.svg" 
+              logo-filename="example-logo.svg" />
     </ui>
```

1. **Save** the organization config

### Enable changes

In this step, we reload the organization config changes don't take effect immediately.

1. From the **Organization settings** page
2. Click **Reload** button for the changes to take appear
3. Check that your images appear correctly under the **User interface** section

## Notes

We recommend that you use SVG files using while or bright colours with transparency. The icon file should be square.