Netlify にコードをプッシュして、ビルドが通り、ライブ URL を開いたとします。サイトは完璧に見えるのに、ブラウザのタブには白いアイコンが表示されている。これはコードのバグではなく、public フォルダにファイルがないからです。もし、デスクトップではプロフェッショナルに見えるサイトが、Netlify デプロイ後に Safari のタブバーで空白の白い四角を表示してしまう理由に悩んだことがあるなら、favicon の設定が不完全である可能性が高いです。

Netlify は静的ホスティングの巨人です。データベースやサーバーサイドスクリプトでアイコンを自動生成してくれるわけではありません。あなたが public または static ディレクトリに置いたものをそのまま提供します。ファイルが存在しないか、パスが間違っていると、ブラウザはコンソールに 404 を表示し、何も表示しません。サイトの他の部分が完璧に読み込まれているのに、壊れたアイコンを見つめて頭を抱えた経験は誰にでもあるでしょう。

根本原因：ファイルの配置が重要

多くの開発者は、HTML に <link> タグを追加すれば十分だと思い込んでいます。しかし、実際はそうではありません。ブラウザは実際の画像ファイルを見つける必要があります。2026 年の現在、標準的なアプローチは、プライマリ favicon を静的アセットディレクトリのルートに配置することです。Netlify の場合、これは通常 public フォルダです。

例えば Stripe は、アイコンに複雑なルーティングを使用していません。ルートから直接、鮮明な SVG とフォールバック用の PNG を提供しています。これにより、JavaScript の読み込みに失敗しても、ブラウザはアイコンを取得できます。あなたの favicon.ico または favicon.svg は、ビルド出力の最上位レベルに配置する必要があります。

ステップ 1：アイコンのスタックを準備する

Netlify ダッシュボードを触る前に、適切なファイルを用意する必要があります。32x32 の PNG を 1 つアップロードするだけでは不十分です。スタックが必要です。まだお持ちでない場合は、Mzu favicondl を使用してマルチフォーマットセットを生成してください。少なくとも、モダンブラウザ用の SVG と、レガシーサポート用のフォールバック PNG が必要です。

これらのファイルは、public フォルダ内に直接配置してください。HTML でそのパスを明示的にリンクしない限り、public/images/icons のようなサブフォルダにネストしないでください。ビルド中にエラーが発生しやすくなります。

ステップ 2：HTML の head を設定する

次に、index.html またはフレームワークの head コンポーネントを更新します。これらのファイルの場所を宣言する必要があります。静的サイトジェネレーターを使用している場合は、パスがルートからの相対パスであることを確認してください。以下が、<head> セクションに貼り付けるべき正確なコードスニペットです：

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

href 属性の先頭のスラッシュに注目してください。これにより、ブラウザはドメインのルートを参照するようになります。Netlify はこれを public フォルダに直接マッピングします。このスラッシュがないと、Netlify はサブディレクトリ内でファイルを探そうとし、あなたが苦戦してきた 404 エラーを引き起こします。

Web App Manifest：見落とされがちなリンク

多くの開発者は HTML タグだけで止めてしまいます。これは間違いです。特にモバイルのモダンブラウザは、ユーザーがサイトをホーム画面に追加したときにアイコンを決定するために、site.webmanifest ファイルに大きく依存しています。このファイルがないか、設定が間違っていると、Netlify サイトは iPhone や Android デバイスで一般的な Web ページのように見えてしまいます。

ステップ 3：マニフェストファイルを作成する

public フォルダに site.webmanifest という名前のファイルを作成します。この JSON ファイルは、アプリランチャーで使用するアイコンをブラウザに指示します。また、ブラウザバーをブランドに合わせて変更するテーマカラーも定義します。

{
  "name": "My Awesome Site",
  "short_name": "Awesome",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

このファイルは正しい MIME タイプで提供される必要があります。Netlify は .webmanifest ファイルに対してこれを自動的に処理しますが、カスタムサーバー設定を使用している場合は、application/manifest+json が設定されていることを確認してください。

よくある落とし穴と修正方法

適切なファイルがあっても、問題が発生することがあります。最も一般的な問題はキャッシュです。ブラウザは favicon のキャッシュに積極的です。新しいアイコンをデプロイしても、ユーザーには古いアイコンや空白のページが表示されることがあります。これは、ブラウザがファイルが変更されていないと判断するためです。

アイコンのキャッシュバスティング

更新を強制するには、ファイル名を変更するか、クエリ文字列を追加する必要があります。Vite や Webpack などのビルドツールを使用している場合、通常はファイル名にハッシュを追加することで処理されます。手動で行う場合は、HTML リンクにバージョンパラメータを追加します：

<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2026" />

クエリ文字列を変更すると、ブラウザはファイルを再度要求するようになります。これはデバッグの時間を大幅に節約できる簡単なテクニックです。

ビルド出力を確認する

Netlify を責める前に、実際にデプロイされたものを確認してください。Netlify ダッシュボードに移動し、最新のデプロイをクリックして、ファイルを検査します。public フォルダの構造が最終ビルドで保持されていない場合、リンクは壊れます。ビルドコマンドが予期せずファイルを移動していないことを確認してください。

それでも問題が解決しない場合は、ブラウザのコンソールを確認してください。/favicon.ico に対する 404 Not Found は、SVG のみを提供している場合は正常ですが、定義した href に対する 404 は、ファイルがルートにないことを意味します。詳細なトラブルシューティングについては、Favicon が表示されない？7 つの一般的な原因と修正方法 のガイドを参照してください。

デプロイに関する最終的な考え

Netlify デプロイの favicon を正しく設定することは、精度の問題です。きれいな画像を持つことだけではなく、ファイルパス、マニフェスト設定、静的ホストがアセットを提供する方法を理解することです。アイコンがないことでブランドの第一印象を台無しにしないでください。

SVG、PNG、マニフェストが適切に配置されれば、サイトはすべてのデバイスでプロフェッショナルに見えます。これらのファイルをすばやく生成する必要がある場合は、Mzu favicondl が面倒な作業を代行してくれるので、コードに集中できます。自信を持ってデプロイし、空白のタブに悩まされるのをやめましょう。