---
title: icon/
sidebar_position: 2
---

# icon/

## Favicon

When there is a `favicon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) configuration option for generating the favicon icon on the page:

```
./config
└── favicon.ico
```

After the build is completed, you can see the following tags automatically generated in HTML:

```html
<link rel="icon" href="/favicon.ico" />
```

### Order

When setting up the favicon, Modern.js looks for files in the following order:

- `favicon.png`
- `favicon.jpg`
- `favicon.jpeg`
- `favicon.svg`
- `favicon.ico`

## Apple Touch Icon

When there is an `icon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) configuration option for generating the Apple Touch Icon icon under the iOS system.

```
./config
└── icon.png
```

After the build is completed, you can see the following tags automatically generated in HTML:

```html
<link rel="apple-touch-icon" sizes="180x180" href="/static/image/icon.png" />
```

### Order

When setting up the app icon, Modern.js looks for files in the following order:

- `icon.png`
- `icon.jpg`
- `icon.jpeg`
- `icon.svg`
- `icon.ico`
