Next.jsのfavicon設定: SVGからfavicon.icoを生成する実践手順

最小構成なら favicon.ico 1つでも公開できます。ただし、ブラウザタブ、iOSホーム画面、PWAインストール、Google検索結果まで安定して表示したいなら、アイコン一式を用意するのが安全です。

この記事では「必要なファイルを定義する -> SVGから生成する -> Next.jsへ統合する」という実務向けフローを紹介します。

まず必要なアイコンファイル

最低限、次の構成を推奨します。

favicon.ico（互換性用フォールバック）
icon.svg または icon.png（モダンブラウザ向け）
apple-icon.png（iOSホーム画面）
manifest（PWAメタデータ）
icon-192.png（manifest用）
icon-512.png（manifest用）

実践フロー: SVGからfaviconセットを作る

1. 小サイズで読めるSVGを用意する

ファビコンは 16x16 や 32x32 で表示されるため、元SVGは次を意識します。

主形状を残し、細かすぎる装飾を減らす
コントラストを高く保つ
極端に細い線を避ける

まずは SVG Viewer で確認します。

2. `favicon.ico` を生成する

SVG to ICO を使用します。

SVGをアップロード
16 / 32 / 48 / 64 などのサイズを選択
1つの .ico ファイルとして出力

SVGツールの価値は、ここを短時間で安定実行できる点です。

3. `icon-192.png` と `icon-512.png` を生成する

SVG to PNG で次を出力します。

icon-192.png
icon-512.png

必要であれば apple-icon.png（一般的に 180x180）も別途生成します。

4. 必要に応じて最適化する

配布前に SVG Optimizer や SVG Minify を通して、ファイルを軽く整えます。

Next.js App Routerへの統合

推奨ディレクトリ構成:

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

app/manifest.ts の例:

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

公開前に行うGoogle favicon確認

これは実装検証です。コピー調整ではありません。

https://your-domain.com/favicon.ico が 200 を返す
アイコンURLが robots.txt でブロックされていない
アイコンが正方形で、少なくとも 8x8
可能なら 48 の倍数サイズを優先
ホームページHTMLに rel="icon" を含める

上記を満たせば、Google検索のfavicon更新は再クロール後に反映されます。

このプロジェクトのようにTanStack Startの場合

同じアセットを使い、ルート <head> でリンクを宣言します。

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

FAQ

`favicon.ico` だけで十分ですか？

最小公開は可能ですが、すべてのプラットフォームを安定カバーするには不足しがちです。

Googleに古いfaviconが出続けます

多くはクロール・キャッシュ遅延です。まずURLの到達性を確認し、再クロールを待ちます。

`icon.svg` と `favicon.ico` のどちらを使うべき？

通常は両方保持します。.ico は互換性、svg/png はモダン環境向けです。

Next.jsのfavicon設定: SVGからfavicon.icoを生成する実践手順