MENU


Icon

Favicon, icon, and apple-icon files are used to set application icons that appear in browser tabs, phone home screens, and search engine results.

With the exception of favicon.ico (only to be placed in /app/), these special files, which can be image files (.ico, .jpg, .jpeg, .png, .svg) or programmatically generated files (.js, ,.ts, .tsx), can be placed directly in the folders corresponding to their route segments.

<link> tags with attributes like rel, href, type, and sizes will automatically be generated based on the icon's file type and metadata. For example, a 32x32px .png file gets type="image/png" and sizes="32x32". Icons with .svg or unknown dimensions are assigned sizes="any".

By default, generated icons are static Route Handlers optimized at build time and cached, unless they rely on dynamic APIs or uncached data.
icon.tsx:
import { ImageResponse } from 'next/og'
 
// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'
 
// Image generation
export default function Icon({ params }: { params: { slug: string } }) {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        WCC
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported icons size metadata
      // config to also set the ImageResponse's width and height.
      ...size,
    }
  )
}

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