---
id: logo
title: Logo
sidebar_label: Logo
keywords: [hyperglass, looking glass, web ui, gui, branding, logo]
description: Customize the Logo & Favicon
---

## `logo`

| Parameter |  Type   | Default         | Description                                   |
| :-------- | :-----: | :-------------- | :-------------------------------------------- |
| `light`   | String  | hyperglass logo | Path to logo that will be used in light mode  |
| `dark`    | String  | hyperglass logo | Path to logo that will be used in dark mode   |
| `favicon` | String  | hyperglass icon | Path to logo that will be used as the favicon |
| `width`   | String  | `100%`          | Maximum logo width as a percentage            |
| `height`  | Integer |                 | Maximum logo height as a percentage           |

### Favicon

It's very easy to customize the favicon imaged used by hyperglass. If you're not familiar with the term, the favicon is the icon used by the browser in tabs, windows, or bookmarks:

![](/screenshots/screenshot-favicons.jpg)

During the [UI build process](setup.mdx#ui-build) hyperglass automatically generates favicon files in all of the many formats required for cross-platform, cross-browser support.

#### Supported Formats

- `.jpg`
- `.jpeg`
- `.png`
- `.svg`

:::caution Icon File Size
Generating the favicons is very CPU-intensive, and therefore has the tendency of timing out if the icon file is very large. If you receive a timeout error when starting hyperglass or running the `hyperglass build-ui` command, try reducing the size of the icon file. **File sizes of around 200 KB** have been known to succeed without too much overhead.
:::

The following icons types are generated:

```
android-chrome-36x36.png
android-chrome-48x48.png
android-chrome-72x72.png
android-chrome-96x96.png
android-chrome-144x144.png
android-chrome-192x192.png
android-chrome-256x256.png
android-chrome-384x384.png
android-chrome-512x512.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-167x167.png
apple-touch-icon-180x180.png
apple-touch-icon-1024x1024.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
apple-touch-startup-image-640x1136.png
apple-touch-startup-image-750x1334.png
apple-touch-startup-image-828x1792.png
apple-touch-startup-image-1125x2436.png
apple-touch-startup-image-1136x640.png
apple-touch-startup-image-1242x2208.png
apple-touch-startup-image-1242x2688.png
apple-touch-startup-image-1334x750.png
apple-touch-startup-image-1536x2048.png
apple-touch-startup-image-1620x2160.png
apple-touch-startup-image-1668x2224.png
apple-touch-startup-image-1668x2388.png
apple-touch-startup-image-1792x828.png
apple-touch-startup-image-2048x1536.png
apple-touch-startup-image-2048x2732.png
apple-touch-startup-image-2160x1620.png
apple-touch-startup-image-2208x1242.png
apple-touch-startup-image-2224x1668.png
apple-touch-startup-image-2388x1668.png
apple-touch-startup-image-2436x1125.png
apple-touch-startup-image-2688x1242.png
apple-touch-startup-image-2732x2048.png
coast-228x228.png
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
favicon.ico
firefox_app_60x60.png
firefox_app_128x128.png
firefox_app_512x512.png
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
yandex-browser-50x50.png
```
