Webサイトのファビコンを作る方法
ファビコンはブラウザタブの小さなアイコン — 10個のタブが開いているときに目が行く視覚的ブックマークです。作り方はシンプル：切手サイズでも読めるようマークを簡略化し、標準サイズ（多くは1つの`.ico`にまとめる）を書き出し、HTMLタグを設定し、iOSホーム画面ショートカットを気にするなら大きめPNGも追加。以下の手順の後、ファビコン生成でバイナリを手編集せずサイズをパックできます。
1. 看板サイズではなく16×16向けにデザイン
タブバーサイズでは細い線、小さな文字、複雑なグラデーションは潰れます。1〜2色の太いシルエットが、フルワードマークのミニ版よりはるかに縮小に耐えます。
正方形から始める。横長ロゴは先に中央正方形に切り抜き — そうでないとジェネレーターが全体を縮小し、マークが点に見えます。
ベクターSVG、または最低256×256 PNGマスター（512×512がより良い）を保持。ぼやけたサムネから拡大するのではなく、このソースからダウンサンプリングします。
2. 複数サイズICO（またはPNGセット）を書き出す
定番の`favicon.ico`は16×16、32×32、48×48レイヤーを1ファイルにまとめ、デスクトップのタブとブックマークが最も近いサイズを選びます。
PNG、SVG、JPGをファビコン生成にアップロードし、サイズバンドルを選んでダウンロード — 手動の16進編集は不要。
多くのチームは32×32と180×180の単体PNGも配信します。PWAにはweb app manifestの明示的なアイコンエントリも必要です。
3. ファイル配置とHTML追加
`favicon.ico`をサイトルートに置くか、フレームワークの慣習に従う — Next.js、Astroなどは`public/`下を想定。
最低限：`<link rel="icon" href="/favicon.ico" sizes="any">`。PNGバリアントもある場合：`<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`など。
iOS「ホーム画面に追加」用に180×180 PNG：`<link rel="apple-touch-icon" href="/apple-touch-icon.png">`。
4. デプロイ後に確認
ハードリフレッシュまたはシークレットウィンドウ — ファビコンは強くキャッシュされるため、通常リロードでは昨日のアイコンが残ることがあります。
スマホでホーム画面に追加し、apple-touch-iconが余白なくくっきり見えるか確認。
リブランド？ICO、PNG、manifestアイコンをまとめて差し替え。新旧混在は同じサイトに2つのマークが残る原因になります。
午後を無駄にする落とし穴
512px PNGを小さいサイズを埋め込まず`favicon.ico`にリネーム — 環境によっては拡大が悪く、タブアイコンがぼやけます。
SVGのみファビコンは支持が広がっていますが、一部の社内イントラネットでは静かに失敗 — ICO＋PNGが依然として信頼できるデフォルト。
完全透過アイコンはWindowsの明るいタブ背景で壊れて見えることがあり — マークの後ろにブランド色の正方形があると読みやすいです。
ファビコンに関する質問
- ICOファイル1つで十分？
- デスクトップ・モバイルのブラウザタブなら通常は十分。PWAやiOSホーム画面タイルを配信するなら、PNGサイズとmanifestエントリも追加。
- SVGだけをファビコンにできる？
- 現行ブラウザでは増えていますが、ICOとPNGの組み合わせがエッジケースをカバー — SVGは補助として有効、唯一の資産とは限りません。
- ファイルを更新したのにタブは古いアイコンのまま
- キャッシュ。シークレット、ファイル名変更、またはhrefにバージョンクエリを付けて新しい資産が反映されるまで。
- ファビコンはヘッダーロゴと同じ？
- ブランド色は共有することが多いですが、ファビコンは簡略化したマークであるべき。ヘッダーロゴはタブアイコンに載せられないタグラインや細部を持てます。
- 実際に必要なサイズは？
- ICO内の16、32、48で多くのタブをカバー。180×180はapple-touch-icon。PWA manifestが要求するなら192と512を追加。