Zenn
🐦

[Next.js]faviconを設定する手順

2024/08/13に公開
Next.js
cs
tech

Next.jsのappルーターを使ってFaviconを設定する方法について解説します。
設定方法の手順と、発生したトラブルとその解決方法についてまとめました。

目次

  1. Faviconの作成
  2. Faviconファイルの配置
  3. browserconfig.xml の編集
  4. site.webmanifest の編集
  5. app/layout.tsx にHTMLコードを追加
  6. 最終確認とステータスコードの確認

1. Faviconの作成

まず、Faviconを作成するために使用したサイトは以下のリンクです。

Favicon作成サイト - RealFaviconGenerator


サイトでFaviconを生成する際、編集が完了したら「Generate your Favicons and HTML code」ボタンを押して、Faviconパッケージをダウンロードします。この時、表示されるHTMLタグは後ほど使用するので、必ずコピーしておいてください。

2. Faviconファイルの配置

ダウンロードしたFaviconパッケージを解凍し、publicディレクトリ内にフォルダごと配置します。配置したフォルダの名前は favicons にリネームしておきましょう。

3. browserconfig.xml の編集

browserconfig.xml ファイルの内容を以下のように編集します。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/favicons/mstile-150x150.png"/> <!-- ここを編集 -->
            <TileColor>#2b5797</TileColor>
        </tile>
    </msapplication>
</browserconfig>

4. site.webmanifest の編集

次に、site.webmanifest ファイルを以下のように編集します。

{
    "name": "サイト名",  // ここもユニコードから日本語名にしてOK
    "short_name": "サイト名",  // ここもユニコードから日本語名にしてOK
    "icons": [
        {
            "src": "/favicons/android-chrome-192x192.png",  // ここを編集
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/favicons/android-chrome-512x512.png",  // ここを編集
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

5. app/layout.tsx にHTMLコードを追加

次に、app/layout.tsx ファイルに先ほど生成したFaviconのHTMLコードを貼り付けます。この際、パスが正しいか確認しましょう。私の場合、すべてのパスに /favicons を入れています。

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "サイトのタイトル",
  description: "サイトの詳細",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="jp">
      <head>
        <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
        <link rel="manifest" href="/favicons/site.webmanifest" />
        <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
        <meta name="msapplication-TileColor" content="#2b5797" />
        <meta name="theme-color" content="#ffffff" />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

6. 最終確認とステータスコードの確認

設定が完了したら、自分のサイトでFaviconが正しく表示されているか確認します。この際、ブラウザのデベロッパーツールを使用して、ステータスコードが正しいかを確認することが重要です。

ステータスコードとは？

ステータスコードは、サーバーがクライアント（通常はWebブラウザ）に対して、リクエストの結果を知らせるために返す数値コードです。各ステータスコードには特定の意味があります。

  • 200 OK: リクエストが成功し、サーバーが正常にリソースを返したことを示します。
  • 304 Not Modified: クライアントがキャッシュしているリソースがサーバー上のリソースと変わっていない場合に返されます。このステータスコードが返された場合、ブラウザはキャッシュに保存されているリソースを使用します。
  • 404 Not Found: リクエストされたリソースがサーバー上に見つからない場合に返されます。

ステータスコードの確認方法

設定後にサイトを確認する際、以下の手順でステータスコードを確認します。

1. デベロッパーツールの起動

  • ブラウザ（例：Chrome）でサイトを開き、F12キーを押してデベロッパーツールを開きます。

2. Networkタブの確認

  • Networkタブをクリックし、ページがロードされる際のリクエストとレスポンスの状況を確認します。

3. ステータスコードの確認

  • site.webmanifest や favicon に関連するリクエストが 200 または 304 ステータスコードで返されているか確認します。

トラブルシューティング

最初に確認した際、304 Not Modified というステータスコードが表示されることがあります。これは、サーバーがリソースに変更がないことを示しており、ブラウザはキャッシュからリソースを読み込みます。この場合、リソース自体は正しく提供されていますが、何らかの理由で変更が反映されていないと感じることがあります。

解決方法

  • キャッシュをクリア: ブラウザのキャッシュをクリアし、再度ページをリロードします。これにより、ブラウザが最新のリソースをサーバーから再度取得します。
  • 再確認: キャッシュをクリアした後、再度デベロッパーツールの Network タブでステータスコードを確認し、すべてのリクエストが 200 OK で返されているか確認します。

    すべてのリクエストが 200 OK で返されている場合、リソースが正しくサーバーから取得されていることを意味します。304 Not Modified が表示されてもリソースは正常に動作しているため、最終的にFaviconやその他の関連ファイルが期待通りに表示されていれば問題ありません。

これで、サイトのFavicon設定は完了です！

Discussion