新しいプロジェクトを立ち上げた際、ブラウザのタブにあの紫色の Gatsby ロゴが残っていることに気づいたことはありませんか？それは「チュートリアルを終えたばかりです」と宣伝しているようなものです。Gatsby は非常に優れたパフォーマンスを誇りますが、そのファイル構造ゆえに、favicon for gatsby site の設定という単純な作業が意外と面倒に感じることがあります。
誰もが経験することですが、favicon.ico をルートに置いてリロードを繰り返しても、何も変わらないことがあります。これは Gatsby のビルドプロセスが、標準的な HTML サイトとは異なる方法でアセットを処理するためです。Stripe や GitHub のようなプロフェッショナルな外観を実現するには、マルチ解像度や PWA の要件を自動で処理する戦略が必要です。
推奨：gatsby-plugin-manifest を使う方法
2026 年現在でも、ベストプラクティスは gatsby-plugin-manifest を使用することです。なぜなら、単にアイコンを追加するだけでなく、Android、iOS、デスクトップ向けに最適なサイズを自動生成してくれるからです。また、PWA に不可欠な manifest.webmanifest も作成されます。詳細は manifest 設定ガイド をご覧ください。
ステップ 1: プラグインのインストール
まず、プロジェクトにプラグインがインストールされているか確認しましょう。多くのスターターには標準装備されています。
npm install gatsby-plugin-manifestステップ 2: gatsby-config.js の設定
ここで、高解像度のソース画像（512x512 ピクセル以上）を指定します。ビルド時にプラグインが適切なサイズにリサイズしてくれます。
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-manifest',
options: {
name: 'マイサイト',
short_name: 'サイト',
start_url: '/',
background_color: '#ffffff',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/icon.png', // ソース画像のパス
},
},
],
}ステップ 3: 出力の確認
gatsby build を実行すると、public フォルダ内に多数の PNG ファイルが生成されます。これにより、どのデバイスでもアイコンが鮮明に表示されます。（ヒント：歪みを防ぐため、必ず正方形の PNG を使用してください）。
手動設定：static フォルダを使う方法
プラグインに画像を処理させたくない場合（例：最適化済みの .ico や SVG をそのまま使いたい場合）は、static フォルダを利用します。
static フォルダのメリット
/static 内のファイルは Webpack を通さず、そのまま /public にコピーされます。シンプルですが、特定のファイルをそのまま配信したい場合には確実な方法です。
Link タグの追加
Gatsby の Head API を使って、HTML の head に link タグを挿入します。
export const Head = () => (
<>
<link rel="icon" href="/favicon.ico">
)よくある落とし穴
- キャッシュの問題： ブラウザはファビコンを強力にキャッシュします。更新されない場合は キャッシュクリア を試してください。
- パスの指定ミス： 設定ファイル内の
iconパスはプロジェクトルートからの相対パスです。 - ダークモード対応： 背景が透明でないアイコンは、ダークモードで見えなくなることがあります。
ファビコンはサイトの「顔」です。Mzu favicondl のようなツールで高品質なソース画像を用意し、正しく設定することで、ブランドの信頼性を高めましょう。