如何在Next.js 13的Metadata中使用emoji作为Favicon？

Next.js Metadata的icon属性仅支持文件路径，没法直接用data URI，但可以通过other字段手动添加自定义<link>标签来实现，具体操作如下：

• 如果你用的是App Router，在根布局文件（比如app/layout.tsx）里，通过metadata.other.link数组注入自定义图标链接：

import type { Metadata } from 'next';

export const metadata: Metadata = {
  other: {
    link: [
      {
        rel: 'icon',
        href: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🤑</text></svg>',
      },
    ],
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

Next.js会自动把这个<link>标签插入到页面<head>中，和直接写HTML标签效果一致。

• 如果你用的是Pages Router，直接在_document.tsx的<Head>里添加对应标签即可：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link 
            rel="icon" 
            href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤑</text></svg>" 
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

内容的提问来源于stack exchange，提问作者Zorayr