新しいアプリは、faviconがないと未完成に見える
機能を作り込み、データベースを配線し、本物のURLにデプロイした。それでもブラウザのタブには、まだ真っ白な紙が表示されている。それはたった16×16の小さな四角ですが、すべての訪問者に「この製品はまだ完成していない」と静かに告げています。
なぜいつも起きるのか
favicon は、誰も予定に入れない最後の1%です。プロジェクトをスキャフォールドすると、プレースホルダーのアイコンがタダで付いてくるため、警告は一度も発火せず、そのプレースホルダーが production までそのまま乗っていってしまいます。
きちんとした一式を手作りするのは、正直かなり面倒です。十数種類のサイズを書き出し、ICO を作り、マニフェストを手書きし、20個の link タグを貼る。だから「あとで」に先送りされ、その「あとで」は永遠に来ません。
空白のタブが高くつく理由
タブアイコンは、最小サイズにおけるあなたのブランドです。誰かが30個のタブを開いているとき、favicon は自分のタブを再び見つける唯一の手がかりです。空白のものは、見えないのと同じです。
それはまた、最も安価な信頼のシグナルでもあります。くっきりしたアイコンは「本物の製品」に、空白のものは「週末のプロトタイプ」に読めてしまう。たとえ裏側のコードが優れていても、です。
みんなが実際に目にする四角
アイコンが欠けているサイン
公開中のサイトで次のいずれかに当てはまるなら、訪問者は未完成のアプリを目にしています：
ブラウザのタブに、角の折れた空白のページアイコンが座っている。
フレームワークのデフォルト（Next.js、Vite、Create React App のロゴ）が production に出ている。
警告を消すためだけに誰かが public/favicon.ico に放り込んだ、ピクセルの粗い、引き伸ばされたスクリーンショット。
ちぐはぐなアイコン：タブには1つ、iOS のホーム画面には別のもの、PWA のインストールプロンプトには何もない。
1ステップで直す
アイコンを手作業の雑務として扱うのをやめた瞬間に、問題はまるごと消えます。流れは短いものです：
- 1
ソースを選ぶ
絵文字、ブランドマーク、自分のロゴファイル、または画像のURL。
- 2
完全な一式を生成する
favicon.ico、あらゆるサイズのPNG、apple-touch-icon、Androidアイコン、そして manifest.json。
- 3
インストールする
ファイルを public/ に、link タグを <head>（または app/layout.tsx）に配置します。
- 4
検証する
完了とする前に、タブ・モバイル・インストールプロンプトで正しくレンダリングされることを確認します。
手作業か、エージェントか
手作業で
先送りされる理由
- 十数種類のサイズを書き出す。
- ICO を作る。
- マニフェストを手書きする。
- 20個の link タグを貼る。
コーディングエージェントに任せる
Start hereClaude Code、Cursor、あるいはMCP対応の任意のエージェント
- favicon ジェネレーターを開くことは一切ありません。
- アイコンが作成され、リポジトリへ直接インストールされます：ファイルが書き込まれ、<head> がパッチされます。
- すべては「このアプリにキツネの favicon を追加して」のような単一のプロンプトから。