字节笔记本字节笔记本

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

2024-06-07

在 Next.js 中设置应用程序图标的方法包括使用图像文件(如 `.ico`, `.jpg`, `.png`)或通过代码生成图标,支持多种文件类型和自定义元数据配置。

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

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

  1. favicon

    • 只支持 .ico 文件类型。
    • favicon.ico 文件放置在 /app 目录的根级别。
    • Next.js 会自动将适当的 <link> 标签添加到 <head> 元素中。
    <link rel="icon" href="/favicon.ico" sizes="any" />
    
  2. icon

    • 支持 .ico, .jpg, .jpeg, .png, .svg 文件类型。
    • icon 文件放置在 app/**/* 目录下的任意位置。
    <link rel="icon" href="/icon?<generated>" type="image/<generated>" sizes="<generated>" />
    
  3. 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)

你可以通过在 iconapple-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 图标,必须使用 iconfavicon.ico 文件。
  • 默认导出函数可以接收 params 参数,包含从根段到图标段的动态路由参数对象。
  • 函数返回类型可以是 Blob, ArrayBuffer, TypedArray, DataView, ReadableStreamResponse

配置导出

你可以通过导出 sizecontentType 变量来配置图标的元数据:

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 应用程序的图标有所帮助。