Next.jsで複数サイズのPNGファビコンを指定する方法【layout.tsx対応】

Next.js 13以降のApp Router構成では、従来の<link rel="icon">タグを直接書く代わりに、layout.tsx内のexport const metadataでファビコンを指定できます。

2025/11/11

🔹 基本構文：複数のPNGファビコンを指定

以下のように、icons.iconに配列で複数のPNGファイルを登録できます。


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

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  icons: {
    icon: [
      { url: "/icons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
      { url: "/icons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/icons/favicon-192.png",   sizes: "192x192", type: "image/png" },
    ],
    apple: [
      { url: "/icons/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
    ],
    shortcut: ["/icons/favicon.ico"],
    other: [
      { rel: "mask-icon", url: "/icons/safari-pinned-tab.svg", color: "#5bbad5" },
    ],
  },
  manifest: "/site.webmanifest",
  themeColor: "#ffffff",
};

この書き方なら、public/icons/以下にファイルを整理してもOKです。実際の公開URLは /icons/ファイル名 になります。

📁 ファイル配置例（publicディレクトリ）


public/
├── icons/
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon-192.png
│   ├── apple-touch-icon.png
│   ├── safari-pinned-tab.svg
│   └── favicon.ico
└── site.webmanifest

📱 site.webmanifest のサンプル


{
  "name": "My Next App",
  "short_name": "NextApp",
  "icons": [
    { "src": "/icons/favicon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/favicon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable any" }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff"
}

💡 ルート直下じゃなくてもOKな理由

Next.jsではpublicフォルダ配下のファイルはすべて自動的に静的配信されます。つまりpublic/icons/xxx.pngを置けば、ブラウザからは/icons/xxx.pngとしてアクセス可能。ルート直下に置かなくても、metadata.iconsでパスを明示すれば問題ありません。

🧭 SEO・SNS向けOGP設定も一緒に

ファビコン設定と同時に、OGP（Open Graph Protocol）やcanonicalリンクもmetadataで指定できます。これにより、検索エンジンやSNSシェア時の見栄えを最適化できます。


export const metadata: Metadata = {
  title: "Next.jsで複数PNGファビコンを指定する方法",
  description: "layout.tsxのmetadataを使って複数のPNGファビコンを登録する方法を解説。",
  alternates: { canonical: "https://example.com/blog/nextjs-favicon-metadata" },
  openGraph: {
    title: "Next.jsで複数PNGファビコンを指定する方法",
    description: "App Router対応のNext.jsファビコン設定方法を紹介。",
    url: "https://example.com/blog/nextjs-favicon-metadata",
    images: [{ url: "https://example.com/ogp/nextjs-favicon.png" }],
  },
};