框架指南

Next.js Favicon 指南

学习如何使用最新最佳实践在 Next.js 应用中正确实现 favicon。

三种添加 Favicon 的方法

App Router 设置

使用 metadata API 和 app/icon 文件

方法 1

Pages Router 设置

传统的 _document.js 方法

方法 2

静态文件

从 public 目录提供服务

方法 3

1. App Router (Next.js 13+)

选项 A：使用 icon.tsx（推荐）

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div style={{ background: '#000', width: '100%', height: '100%' }}>
        {/* Your icon content */}
      </div>
    ),
    { ...size }
  )
}

选项 B：使用 Metadata API

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
}

2. Pages Router (Next.js 12 及以下版本)

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

3. Public 目录中的静态文件

文件结构：
public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png  
├── apple-touch-icon.png
└── android-chrome-192x192.png
将这些文件放在 public/ 目录中，Next.js 会自动提供服务

Next.js Favicon 最佳实践

📱 尽可能使用 App Router

App Router 通过 Metadata API 和自动优化提供更好的 favicon 处理。

⚡ 优化文件大小

保持 favicon.ico 在 1KB 以下，对 PNG 文件使用适当的压缩。

🔄 在不同设备上测试

验证您的 favicon 在移动设备、平板电脑和桌面浏览器上正确显示。