@dnb/eufemia/docs/uilib/usage/customisation.md

DNB Eufemia Design System UI Library

---
title: 'Customization'
description: 'Customization and tools is a section dedicated to how to use and customize Eufemia in various situations.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.811Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Customization

For details, have a look at the submenu for all the customizations topics:

- [Component Properties](/uilib/usage/customisation/component-properties)
- [CSS Styles](/uilib/usage/customisation/styling)
  - [Importing the CSS](/uilib/usage/customisation/styling/consume-styles)
  - [Polyfill](/uilib/usage/customisation/styling/polyfill)
- [Colors](/uilib/usage/customisation/colors)
- [Theming](/uilib/usage/customisation/theming)
- [Locale / Translation](/uilib/usage/customisation/localization)
- [Provider / Context](/uilib/usage/customisation/provider)

## Favicon and manifest

To make a good-looking browser icon, you need more than just one `favicon.ico` file. To get the default DNB brand look, you can use the following setup.

You can find the [optimized files on <Icon icon={GithubLogo} size="default" /> GitHub](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/assets/browser/dnb).

The `favicon.ico` file you do not need to specify, as long as it is placed in the server root.
The other tags you place inside the head tag. Make sure to customize it depending on your setup.

### Good to have

```html
<!-- e.g. Firefox needs this -->
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/favicon-16x16.png"
/>

<!-- Optional, browsers do load ico file as long as the name is like "favicon.ico" -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

<!-- More often used Safari feature -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon.png"
/>

<!-- How to define the manifest, depends on your setup -->
<link rel="manifest" href="/site.webmanifest" />
```

### Nice to have

```html
<!-- Safari feature -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#007272" />

<!-- Microsoft feature -->
<meta name="msapplication-TileColor" content="#007272" />

<!-- Chrome feature -->
<meta name="theme-color" content="#007272" />
```