favicon, icon, and apple-icon in Next.js — Setting App Icons with Files or Code

1. Types of App Icons in Next.js

Next.js supports three types of icons:

favicon: for browser tabs
icon: for general app branding
apple-icon: for iOS home screen shortcuts

2. Ways to Define Icons

You can define icons in two ways:

Using image files (.ico, .jpg, .png)
Generating icons with code (.js, .ts, .tsx)

3. Using Image Files

Type	Supported Formats	Valid Location
favicon	.ico	Only in app/
icon	.ico, .jpg, .png, .svg	Anywhere in app/**
apple-icon	.jpg, .png	Anywhere in app/**

Example <head> Output:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon?...generated" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-icon?...generated" type="image/png" sizes="180x180" />

4. Generating Icons with Code

Use the ImageResponse API from next/og to generate icons programmatically:

// 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 }
  )
}

Good to Know:

Generated icons are statically optimized at build time unless they use dynamic APIs
You cannot generate a favicon — use a .ico file instead
You can define multiple icons using numbered filenames like icon1.png, icon2.png

5. Input and Output Parameters

The default export function can receive dynamic route parameters:

export default async function Icon({ params }) {
  const { slug } = await params
}

Valid return types include:

Blob
ArrayBuffer
TypedArray
ReadableStream
Response

6. Metadata Configuration

You can export metadata for the icon:

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

Conclusion

Next.js offers flexible ways to define app icons using either static image files or dynamic code. With proper conventions and metadata, your icons will be automatically injected into the HTML head, ensuring a polished and recognizable experience across platforms.