在 Next.js 中设置应用程序图标

在 Next.js 中设置应用程序图标（favicon、icon 和 apple-icon）的方法有两种：使用图像文件或使用代码生成图标。下面是详细说明：

使用图像文件 (.ico, .jpg, .png)

favicon
- 只支持 .ico 文件类型。
- 将 favicon.ico 文件放置在 /app 目录的根级别。
- Next.js 会自动将适当的 <link> 标签添加到 <head> 元素中。
```
<link rel="icon" href="/favicon.ico" sizes="any" />
```
icon
- 支持 .ico, .jpg, .jpeg, .png, .svg 文件类型。
- 将 icon 文件放置在 app/**/* 目录下的任意位置。
```
<link rel="icon" href="/icon?<generated>" type="image/<generated>" sizes="<generated>" />
```

apple-icon

支持 .jpg, .jpeg, .png 文件类型。
将 apple-icon 文件放置在 app/**/* 目录下的任意位置。

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

使用代码生成图标 (.js, .ts, .tsx)

你可以通过在 icon 或 apple-icon 路由中默认导出一个函数来生成应用程序图标。以下是使用 next/og 包中的 ImageResponse API 生成图标的示例：

import { ImageResponse } from 'next/og'

// 路由段配置
export const runtime = 'edge'

// 图像元数据
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,
    }
  )
}

生成的 <head> 输出：

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

其他说明

生成的图标默认会在构建时静态优化并缓存，除非使用动态函数或未缓存的数据。
可以在同一文件中生成多个图标，使用 generateImageMetadata 方法。
不能生成 favicon.ico 图标，必须使用 icon 或 favicon.ico 文件。
默认导出函数可以接收 params 参数，包含从根段到图标段的动态路由参数对象。
函数返回类型可以是 Blob, ArrayBuffer, TypedArray, DataView, ReadableStream 或 Response。

配置导出

你可以通过导出 size 和 contentType 变量来配置图标的元数据：

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'
export default function Icon() {}

上述配置会生成以下 <head> 输出：

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

希望这些信息对你设置 Next.js 应用程序的图标有所帮助。