Static branding
A fixed brand mark is already available as an image asset.
Next.js 16+ · Directive
icon
Use an icon file in an App Router route segment to provide an application icon. Choose a static supported image or generate the icon with JavaScript, TypeScript, or TSX.
How it works
The App Router recognizes icon as a metadata file convention. Add a supported static image such as icon.png or use icon.js, icon.ts, or icon.tsx to generate one; Next.js then serves it and updates the relevant document metadata automatically.
Syntax
app/icon.(ico|jpg|jpeg|png|svg)
app/icon.(js|ts|tsx)Returns
The icon file is served as an application icon and its corresponding metadata is added automatically.
Key points
- Use the
iconconvention to define an application icon in an App Router route segment. - Choose either a static image file or a code-based generator.
- Static icon assets can use ICO, JPG, JPEG, PNG, or SVG image formats.
- Dynamic icons can be generated with JavaScript, TypeScript, or TSX files.
Example: Generate an application icon
// app/icon.tsx
import { ImageResponse } from 'next/og'
export default function Icon() {
return new ImageResponse(
<div style={{ fontSize: 64, background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
A
</div>,
)
}Place this dynamic icon file in the app directory; Next.js uses its generated image as the application icon.
When to use it
Generated icon
The icon must reflect runtime or computed content.
Route-scoped icons
Different sections of an application need distinct icons.
Interview questions
QHow do you define an App Router application icon?
Add a supported static file such as icon.png to an app route segment, or create icon.js, icon.ts, or icon.tsx to generate the image. The file convention causes Next.js to serve the icon and add the corresponding metadata.
Follow-up: How would you scope an icon to a route? Place the icon file in that route segment; nested segments can define their own icons.
QWhich file types can the icon convention use?
The convention supports .ico, .jpg, .jpeg, .png, and .svg image files. A generated icon can use JavaScript, TypeScript, or TSX, and generated output must be an image response.
Follow-up: When should code generation be preferred? Use it when the icon needs dynamic content or rendering rather than a fixed asset.
QWhat does Next.js do after discovering an icon file?
Next.js automatically serves the file and updates the relevant head metadata, including the asset URL and image information. This avoids manually maintaining icon link tags.
Follow-up: What happens in production? File-based metadata is served with hashes for caching.
Related
apple-iconfaviconImageResponseMetadata Files