コードを Vercel にプッシュし、ビルドが成功してサイトが公開されました。しかし、タブを開くと、鮮明なブランドマークの代わりに、一般的な灰色の地球儀や空白の白い四角が表示されていませんか？これは、長年コードをリリースしてきたベテラン開発者でも遭遇する問題です。問題の根源はデザインではなく、Vercel が静的アセットを配信する方法と、ブラウザのキャッシュ動作の間に生じるギャップにあります。
Vercel 環境でのファビコン（favicon）の表示問題を解決するには、単にルートディレクトリにファイルを置くだけでは不十分です。Vercel のエッジネットワークは非常に積極的なキャッシュ戦略を採用しており、ファイルパスやマニフェストの扱いを適切に行わない限り、アイコンは永遠に表示されない可能性があります。キャッシュクリアに無駄な時間を費やすことなく、この問題を解決しましょう。
Vercel でファビコンが消える理由
Vercel は、従来のサーバーとは異なる方法で静的ファイルを扱います。デプロイ時にプラットフォームは速度最適化のためにアセットを処理します。HTML 内の参照パスが厳密に存在しない場合、またはブラウザに古いキャッシュエントリが残っている場合、アイコンは表示されません。Next.js を使用しているチームでも、単純な静的 HTML を使っているチームでも、この現象は頻繁に発生しています。
GitHub の事例を考えてみましょう。彼らのアイコンはシンプルな「オクトキャット」ですが、あらゆるデバイスで即座に読み込まれるように設計されています。彼らは暗黙的なパスに依存していません。バージョン管理や厳密なパス指定を用いて、アセットを明示的にリンクしています。単に favicon.ico をルートに置くだけで、マニフェストや HTML リンクを省略すると、Vercel はファイルを配信できても、ブラウザが正しくリクエストしない可能性があります。
静的フォルダの罠
多くの開発者は、Next.js や Vite などのフレームワークにおける public フォルダが、そのままルートのルートディレクトリにマッピングされると考えがちです。確かにその通りですが、命名規則が重要になります。Vercel はデフォルトで /favicon.ico を探します。もしファイル名が icon.png や favicon.svg であり、かつ HTML からの参照がない場合、ブラウザはそれを見つけることができません。
ブラウザにどこを見るべきかを明示的に指示する必要があります。暗黙的な /favicon.ico リクエストに頼るのはギャンブルです。ロゴを変更しても、URL が変わらない限りブラウザは古いアイコンを保持し続けます。そのため、常に特定のパスを含む <link> タグを使用することを推奨しています。
manifest.json の競合
Progressive Web App (PWA) を構築している場合、manifest.json ファイルが犯人であることが多いです。このファイルは、ユーザーがサイトをホーム画面に追加した際に、モバイルデバイスがどのアイコンを使用するかを指示します。manifest.json 内のパスが相対パスであったり、誤っていたりすると、Vercel は Android や iOS でアイコンを配信できません。
manifest.json ファイルを確認してください。icons ア配列が、スラッシュ（/）から始まる絶対パスを指していることを確認します。ここでのスラッシュの欠如は、デスクトップのタブでは問題なくても、モバイルデバイスでのリンクを破綻させます。ローカル開発から本番環境への移行時に、よく見落とされるポイントです。
完璧なアイコンをデプロイするステップバイステップ
推測は止めてください。すべてのブラウザとデバイスで正しく機能するよう、以下の正確なワークフローに従ってください。ファイル構造、HTML コード、マニフェストの設定について解説します。
- アセットの準備: 複数のサイズのセットを生成します。少なくとも 16x16、32x32、512x512 の PNG が必要です。SVG をお持ちであれば、それも含めてください。ロゴを必要な形式に変換するには、Mzu favicondl を使用すると瞬時に行えます。
- ディレクトリの整理: ファイルを
publicフォルダ（フレームワークによってはstatic）に配置します。整理のためにiconsサブフォルダを作成しましょう。構造はpublic/icons/icon-192.pngのようになります。 - manifest.json の更新:
manifest.jsonファイルを開きます。アイコンパスを絶対参照で追加してください。./iconsのような相対パスは使用せず、/icons/icon-192.pngのように記述します。 - HTML リンクの注入:
<link>タグをindex.htmlまたはルートレイアウトコンポーネントに追加します。これにより、ブラウザが即座にファイルをリクエストします。 - デプロイと検証: Vercel にプッシュします。ローカルキャッシュをバイパスするために、シークレットウィンドウでサイトを開き、ブラウザコンソールで 404 エラーがないか確認してください。
必要なコード
メインレイアウトの <head> に配置すべき、正確な HTML スニペットを以下に示します。これにより SVG、PNG、そして Apple Touch Icon の要件に対応できます。絶対パスに注目してください。
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">type と sizes を指定している点に注目してください。これにより、ブラウザは推測せずに正しいファイルを選択できます。type を省略すると、一部のブラウザが誤った形式をデフォルトとして扱い、アイコンが破損する可能性があります。
ダークモードへの対応
2026 年現在、ダークモードを無視するのは間違いです。ブラウザはファビコンに対してメディアクエリをサポートしています。ロゴが白の場合、ダークモードの白いタブでは消えてしまいます。prefers-color-scheme メディアクエリを使用した別の SVG が必要です。
以下のコードをヘッダーセクションに追加することで、ライトテーマとダークテーマを自動的に処理できます。この小さな追加により、ブランドは Stripe や Apple のように洗練されたプロフェッショナルな印象を与えます。
<link rel="icon" media="(prefers-color-scheme: light)" href="/icons/light.svg">
<link rel="icon" media="(prefers-color-scheme: dark)" href="/icons/dark.svg">一般的な落とし穴と解決策
正しいコードがあっても、問題が発生することがあります。Vercel のキャッシュが主な犯人です。ロゴを更新したのに表示されない場合、エッジネットワークが古いバージョンを配信している可能性があります。
キャッシュバスター戦略
Vercel は静的アセットを積極的にキャッシュします。更新を強制するには、ファイル名を変更するか、クエリ文字列を追加する必要があります。単にファイルを上書きするだけでは不十分です。バージョンハッシュを含めて名前を変更し、favicon-v2.svg のようにし、HTML リンクも更新してください。
あるいは、URL にクエリ文字列を追加する方法もあります。これによりブラウザに新しいリソースだと認識させることができます。/icons/favicon.svg を /icons/favicon.svg?v=2026 に変更します。ファイルをリネームせずに強制更新を行う最も簡単な方法です。
コンソールの確認
ブラウザの開発者ツールを開き、Network タブを確認してください。favicon でフィルタリングします。404 エラーが表示されている場合、パスが誤っています。200 OK が表示されていてもアイコンが表示されない場合は、MIME タイプを確認してください。Vercel が image/svg+xml ではなく text/plain として配信している可能性があります。
MIME タイプが誤っている場合、プロジェクトのルートに vercel.json 設定ファイルを追加する必要があるかもしれません。このファイルは Vercel に特定のファイル形式をどのように配信するかを正確に指示します。SVG が正しいヘッダーで配信されるようにルールを追加します。
{
"headers": [
{
"source": "/icons/(.*)",
"headers": [
{
"key": "Content-Type",
"value": "image/svg+xml"
}
]
}
]
}これにより、Vercel のデフォルト設定が不適切であっても、SVG が正しく配信されます。これは、デバッグに費やす時間を数時間節約する小さな安全網です。
デプロイに関する最終的な考察
Vercel 環境でのファビコンを正しく設定するのは、魔法ではなく精度の問題です。適切なファイル構造、明示的な HTML リンク、そしてキャッシュ対策が必要です。表示されないアイコンが、あなたのハードワークを未完成に見せることを許さないでください。
次のアップデートをプッシュする前に、簡単な監査を実行してください。manifest.json を確認し、パスを検証し、シークレットウィンドウでテストします。ロゴから完璧なアイコンセットを生成する必要がある場合は、Mzu favicondl を使用して重労働を肩代わりさせましょう。ユーザーは口には出さなくても、その違いに気づくはずです。