App Icons
By following the convention for your logos, you can automatically generate
This is based on Next.js Metadata File with an almost identical API, however runtime images are not supported.
You can optionally place logos in the root of your
Naming Convention
favicon
- Name:
favicon.ico
Using an
The
By default, it won't output any HTML as browsers know where to look for it. If you're using a
<link rel="icon" href="/base/favicon.ico" sizes="any" />
icon
- Name:
*icon.{ico,jpg,jpeg,png,svg} ,*icon-*.{ico,jpg,jpeg,png,svg}
Icons give you greater control over the displayed icon. You can provide multiple icons and the browser will automatically select the best icon based on the device's pixel density and uses it to display the app icon.
If you have multiple icons and need to sort them, it's recommended you prefix them with their order. For example:
<link rel="icon" href="/1.icon.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/2.icon.png" sizes="192x192" type="image/png" />
<link rel="icon" href="/3.icon.png" sizes="360x360" type="image/png" />
Dark / Light Mode
You can also provide dark and light mode icons by appending
<link rel="icon" href="/icon-dark.png" type="image/png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/icon-light.png" type="image/png" media="(prefers-color-scheme: light)" />
apple-touch-icon
- Name:
*apple-icon.{png,jpg,jpeg} ,*apple-touch-icon.{png,jpg,jpeg}
Apple touch icons are used by iOS devices to display a website's icon on the home screen and in the browser tab. You can again provide multiple icons.
<link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
Pages Directory
You can also place logos in your
The naming convention is the same as the
pages/
├── index.vue
├── admin/
│ ├── index.vue
│ └── icon.png
This will overwrite any logos in the
You can optionally also place your files within the
pages/
├── index.vue
├── admin/
│ ├── _dir/
│ │ └── icon.png # Does the same thing!
│ └── index.vue