App Icons in Next.js

The favicon, icon, and apple-icon file conventions in Next.js allow you to set icons for your application. These icons appear in places like web browser tabs, phone home screens, and search engine results.

Setting App Icons

There are two ways to set app icons:

Using image files (.ico, .jpg, .png)
Using code to generate an icon (.js, .ts, .tsx)

Using Image Files

Place a favicon, icon, or apple-icon image file within your /app directory. Next.js will automatically add the appropriate tags to your app's <head> element.

File convention	Supported file types	Valid locations
favicon	.ico	app/
icon	.ico, .jpg, .jpeg, .png, .svg	app/*/
apple-icon	.jpg, .jpeg, .png	app/*/

favicon

Add a favicon.ico image file to the root /app route segment.

<link rel="icon" href="/favicon.ico" sizes="any" />

icon

Add an icon.(ico|jpg|jpeg|png|svg) image file.

<link
  rel="icon"
  href="/icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

apple-icon

Add an apple-icon.(jpg|jpeg|png) image file.

<link
  rel="apple-touch-icon"
  href="/apple-icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

Good to know:

You can set multiple icons by adding a number suffix to the file name (e.g., icon1.png, icon2.png).
Favicons can only be set in the root /app segment.
The appropriate <link> tags and attributes are determined by the icon type and metadata of the evaluated file.

Using Code to Generate Icons

You can programmatically generate icons using code by creating an icon or apple-icon route that exports a default function.

Supported file types: .js, .ts, .tsx

Example using the ImageResponse API from next/og:

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    {
      ...size,
    }
  )
}

This will generate the following <head> output:

<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />

Advanced Usage

Using Dynamic Route Parameters

You can use dynamic route parameters when generating icons:

export default function Icon({ params }: { params: { slug: string } }) {
  // Use params.slug to customize the icon
}

Config Exports

You can configure the icon's metadata by exporting size and contentType variables:

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  // Icon generation code
}

Route Segment Config

icon and apple-icon are specialized Route Handlers that can use the same route segment configuration options as Pages and Layouts.

By using these techniques, you can create dynamic and customized icons for your Next.js application, improving its appearance across various platforms and devices.