> For the complete documentation index, see [llms.txt](https://guides.noloco.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.noloco.io/settings/general-settings/custom-logos.md).

# Custom Logos

To further customize your app's design you can personalize and customize the logos used in the app's navigation sidebar, the logo used on the login, and invitation pages, the logo used in your app's automated emails, and finally the logo used in your app's browser tab.

Each logo can be different and has different size requirements to make the most of your app.

To get started, go to the `App Settings` section of your app's settings which you can quickly navigate to by clicking on this link: <https://portals.noloco.io/~/_/settings/project>

### Updating the navigation sidebar logo

The navigation sidebar logo is the logo you see when you and your team browse your app, in the navigation sidebar. The same logo is used when the navbar is open and collapsed.

For best results use a logo that contrasts well with a dark background, such as a white logo.

We recommend using a logo that is 128px tall and less than 192px wide. This aspect and size allows it to grow and shrink according to the sidebar size.

![](/files/O3f1mfjNeytLllvrL8oY) ![](/files/vrsFWjkBq0cbDuJZUkxa)

To update this logo drag and drop, or choose an image here

{% @arcade/embed url="<https://app.arcade.software/share/k9dHXOhlstT5YV6CJ0ev?embed=true>" flowId="k9dHXOhlstT5YV6CJ0ev" %}

### Updating the login & email Logo

The login & email logo is used when you're on the Login page, the Registration page, the accept invitation page and the forgotten password flow.

These pages have a light background so you should use a logo which is darker. In the example below the logo used is darker than the one above.

It is also the logo used when sending emails from Workflows, account invitations, or for comment notifications.

We recommend using a logo that is 128px tall and less than 192px wide.

<figure><img src="/files/6BFNDcO7G38X8SE9arH0" alt=""><figcaption></figcaption></figure>

### Update the app's favicon

A favicon also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is the icon your users will see in their browser tab.

Because the browser theme can be both dark and bright depending on the users browser and their theme it's often best to go with a bright coloured icon, or an icon that provides it's own background, like a dark circle enclosing your logo.

We recommend using a square logo that is 64 x 64px for web apps and if you plan on distributing your app as a [PWA](/settings/progressive-web-apps.md) you must use an icon that is 192 x 192px.

![](/files/CEXEg4rMf5F39GSxvoYG)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://guides.noloco.io/settings/general-settings/custom-logos.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
