Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

app-icons: correct valid route segments for icon/favicon/apple-icon #51188

Merged
merged 1 commit into from
Jun 12, 2023
Merged

app-icons: correct valid route segments for icon/favicon/apple-icon #51188

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 10 additions & 9 deletions docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,16 @@ There are two ways to set app icons:

## Image files (.ico, .jpg, .png)

Use an image file to set an app icon by placing a `favicon`, `icon`, or `apple-icon` image file the root `/app` segment.
Use an image file to set an app icon by placing a `favicon`, `icon`, or `apple-icon` image file within your `/app` directory.
The `favicon` image can only be located in the top level of `app/`.

Next.js will evaluate the file and automatically add the appropriate tags to your app's `<head>` element.

| File convention | Supported file types |
| --------------------------- | --------------------------------------- |
| [`favicon`](#favicon) | `.ico` |
| [`icon`](#icon) | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` |
| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png`, |
| File convention | Supported file types | Valid locations
| --------------------------- | --------------------------------------- | ---------------------------
| [`favicon`](#favicon) | `.ico` | `app/`
| [`icon`](#icon) | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` | `app/**/*`
| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png` | `app/**/*`

### `favicon`

Expand All @@ -34,7 +35,7 @@ Add a `favicon.ico` image file to the root `/app` route segment.

### `icon`

Add an `icon.(ico|jpg|jpeg|png|svg)` image file to the root `/app` route segment.
Add an `icon.(ico|jpg|jpeg|png|svg)` image file.

```html filename="<head> output"
<link
Expand All @@ -47,7 +48,7 @@ Add an `icon.(ico|jpg|jpeg|png|svg)` image file to the root `/app` route segment

### `apple-icon`

Add an `apple-icon.(jpg|jpeg|png)` image file to the root `/app` route segment.
Add an `apple-icon.(jpg|jpeg|png)` image file.

```html filename="<head> output"
<link
Expand All @@ -61,7 +62,7 @@ Add an `apple-icon.(jpg|jpeg|png)` image file to the root `/app` route segment.
> **Good to know**
>
> - You can set multiple icons by adding a number suffix to the file name. For example, `icon1.png`, `icon2.png`, etc. Numbered files will sort lexically.
> - App icons can only be set in the root `/app` segment.
> - Favicons can only be set in the root `/app` segment. If you need more granularity, you can use [`icon`](#icon).
> - The appropriate `<link>` tags and attributes such as `rel`, `href`, `type`, and `sizes` are determined by the icon type and metadata of the evaluated file.
> - For example, a 32 by 32px `.png` file will have `type="image/png"` and `sizes="32x32"` attributes.
> - `sizes="any"` is added to `favicon.ico` output to [avoid a browser bug](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) where an `.ico` icon is favored over `.svg`.
Expand Down