favicon.ico, apple-icon.jpg, and icon.jpg

Add an icon file to the root segment of the app directory to set an icon for your application.

Add a favicon.ico, icon.(ico|jpg|jpeg|png|svg), or apple-icon.(jpg|jpeg|png|svg) file to the root segment.

Output:

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

Add an icon.(js|ts|tsx) or apple-icon.(js|ts|tsx) file that default exports a function that returns Blob | ArrayBuffer | TypedArray | DataView | ReadableStream | Response.

The easiest way to generate an image is to use the ImageReponse API from next/server.

You can optionally configure the icon’s image metadata by exporting sizes and contentType variables from the file.

import
 { ImageResponse } 
from
 
'next/server'
;
 
export
 
const
 
size
 
=
 {
  width
:
 
32
,
  height
:
 
32
,
};
export
 
const
 
contentType
 
=
 
'image/png'
;
export
 
const
 
runtime
 
=
 
'edge'
;
 
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
,
  );
}

Output:

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

Good to know

• You can set multiple icons for your application by adding a number suffix to the file name. For example, icon1.(jpg|tsx), icon2.(jpg|tsx), etc. Numbered files will sort lexically.
• sizes="any" is added to favicon.ico output to avoid a browser bug

  where an .ico icon is favored over .svg.

• You cannot dynamically generate a favicon file.