Skip to main content

网站图标、图标和苹果图标

favicon、icon 或 apple-icon 文件约定允许你为应用设置图标。

¥The favicon, icon, or apple-icon file conventions allow you to set icons for your application.

它们对于添加出现在网络浏览器选项卡、手机主屏幕和搜索引擎结果等位置的应用图标非常有用。

¥They are useful for adding app icons that appear in places like web browser tabs, phone home screens, and search engine results.

设置应用图标有两种方法：

¥There are two ways to set app icons:

图片文件（.ico、.jpg、.png）​

¥Image files (.ico, .jpg, .png)

通过将 favicon、icon 或 apple-icon 图片文件放入 /app 目录中，可以使用图片文件设置应用图标。favicon 映像只能位于 app/ 的顶层。

¥Use an image file to set an app icon by placing a favicon, icon, or apple-icon image file within your /app directory. The favicon image can only be located in the top level of app/.

Next.js 将评估该文件并自动将适当的标签添加到应用的 <head> 元素中。

¥Next.js will evaluate the file and automatically add the appropriate tags to your app's <head> element.

文件约定支持的文件类型有效地点
favicon.icoapp/
icon.ico、.jpg、.jpeg、.png、.svgapp/**/*
apple-icon.jpg、.jpeg、.pngapp/**/*

favicon​

将 favicon.ico 映像文件添加到根 /app 航路段。

¥Add a favicon.ico image file to the root /app route segment.

<link rel="icon" href="/favicon.ico" sizes="any" />

icon​

添加 icon.(ico|jpg|jpeg|png|svg) 图片文件。

¥Add an icon.(ico|jpg|jpeg|png|svg) image file.

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

apple-icon​

添加 apple-icon.(jpg|jpeg|png) 图片文件。

¥Add an apple-icon.(jpg|jpeg|png) image file.

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

很高兴知道

¥Good to know

  • 你可以通过在文件名中添加数字后缀来设置多个图标。例如，icon1.png、icon2.png 等。编号文件将按词法排序。

    ¥You can set multiple icons by adding a number suffix to the file name. For example, icon1.png, icon2.png, etc. Numbered files will sort lexically.

  • 网站图标只能设置在根 /app 段中。如果需要更细粒度，可以使用 icon。

    ¥Favicons can only be set in the root /app segment. If you need more granularity, you can use icon.

  • 适当的 <link> 标签和属性（例如 rel、href、type 和 sizes）由评估文件的图标类型和元数据确定。

    ¥The appropriate <link> tags and attributes such as rel, href, type, and sizes are determined by the icon type and metadata of the evaluated file.

    • 例如，32 x 32px .png 文件将具有 type="image/png" 和 sizes="32x32" 属性。

      ¥For example, a 32 by 32px .png file will have type="image/png" and sizes="32x32" attributes.

  • sizes="any" 添加到 favicon.ico 输出到 避免浏览器错误，其中 .ico 图标比 .svg 更受青睐。

    ¥sizes="any" is added to favicon.ico output to avoid a browser bug where an .ico icon is favored over .svg.

使用代码（.js、.ts、.tsx）生成图标​

¥Generate icons using code (.js, .ts, .tsx)

除了使用 字面量图片文件 之外，你还可以使用代码以编程方式生成图标。

¥In addition to using literal image files, you can programmatically generate icons using code.

通过创建默认导出函数的 icon 或 apple-icon 路由来生成应用图标。

¥Generate an app icon by creating an icon or apple-icon route that default exports a function.

文件约定支持的文件类型
icon.js、.ts、.tsx
apple-icon.js、.ts、.tsx

生成图标的最简单方法是使用 next/og 中的 ImageResponse API。

¥The easiest way to generate an icon is to use the ImageResponse API from next/og.

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() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </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,
    }
  )
}
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() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </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" />

很高兴知道

¥Good to know

属性​

¥Props

默认导出函数接收以下属性：

¥The default export function receives the following props:

params（可选）​

¥params (optional)

包含从根段到段 icon 或 apple-icon 的 动态路由参数 对象的对象位于同一位置。

¥An object containing the dynamic route parameters object from the root segment down to the segment icon or apple-icon is colocated in.

export default function Icon({ params }: { params: { slug: string } }) {
  // ...
}
export default function Icon({ params }) {
  // ...
}
路由URLparams
app/shop/icon.js/shopundefined
app/shop/[slug]/icon.js/shop/1{ slug: '1' }
app/shop/[tag]/[item]/icon.js/shop/1/2{ tag: '1', item: '2' }

返回​

¥Returns

默认导出函数应返回 Blob | ArrayBuffer | TypedArray | DataView | ReadableStream | Response。

¥The default export function should return a Blob | ArrayBuffer | TypedArray | DataView | ReadableStream | Response.

很高兴知道：ImageResponse 满足此返回类型。

¥Good to know: ImageResponse satisfies this return type.

配置导出​

¥Config exports

你可以选择通过从 icon 或 apple-icon 路由导出 size 和 contentType 变量来配置图标的元数据。

¥You can optionally configure the icon's metadata by exporting size and contentType variables from the icon or apple-icon route.

选项类型
size{ width: number; height: number }
contentTypestring - 图片 MIME 类型

size​

export const size = { width: 32, height: 32 }

export default function Icon() {}
export const size = { width: 32, height: 32 }

export default function Icon() {}
<link rel="icon" sizes="32x32" />

contentType​

export const contentType = 'image/png'

export default function Icon() {}
export const contentType = 'image/png'

export default function Icon() {}
<link rel="icon" type="image/png" />

路由片段配置​

¥Route Segment Config

icon 和 apple-icon 是专门的 路由处理程序，可以使用与页面和布局相同的 路由段配置 选项。

¥icon and apple-icon are specialized Route Handlers that can use the same route segment configuration options as Pages and Layouts.

版本历史​

¥Version History

版本变化
v13.3.0favicon icon 和 apple-icon 推出