Web サイトの favicon を更新したのに、一生 Google の検索結果に反映されなかった経験から、反映されやすい favicon 群を作る君を公開します。
割と自分用に作りましたが、汎用性はあるのでぜひ使ってください。
Favicon ベストプラクティス・ジェネレーター
Favicon ベストプラクティス・ジェネレーター
画像を読み込み、ベストプラクティスな favicon 一式と
<head> 用のタグをまとめて生成します（画像は外部送信しません）。
1. 画像を取り込む
2. 仕上げ設定
例: / / /assets/favicons/（ルート起点推奨）
モバイル UI の色。空ならタグを出力しません。
Safari pinned tab の単色塗り。
0〜24% で調整できます。
3. 生成するファイル
manifest メタ情報
ホーム画面やインストール時に表示される名前。
短い表示名。ホーム画面のラベル用。
PWA 起動時の開始URL。
ファイル名の詳細設定
導入後はファイル名やパスを頻繁に変えないのが安全です。
推奨ファイル一覧
生成したファイルは public/ 配下に配置します。
生成プレビュー
小さいサイズは実寸表示、大きいサイズは縮小表示で比較できます。
4. head タグ / manifest
このスニペットを <head> に貼ります。
public/ 配下に site.webmanifest として配置する前提（ファイル名は上で変更可）。
5. 生成とダウンロード
更新情報
2025-12-15（SEO/クロール観点のルールを再点検）
Google Search Central の favicon ガイドに合わせ、SEO/互換性の「落とし穴」になりやすい要件をジェネレーター側のデフォルトと出力ガイドに反映しました。
Google Search Central: Define a favicon to show in search results
Google Search Central: Latest documentation updates
- URL を頻繁に変えない前提の出力と注意喚起を追加。
- ホスト名（hostname）単位で 1 faviconの前提を UI/説明に明記（サブディレクトリ単位では分けられない）。
- Googlebot / Googlebot-Image がクロールできる前提のチェック項目（robots / 認証 / 404 など）を出力ガイドに追加。
relは原則iconを推奨し、shortcut iconは標準適合の観点から非推奨として扱う。
2025-11-30（shortcut icon 非推奨と、iOS の選択ロジック注意を明確化）
MDN の rel 属性解説を受け、標準適合と実運用のギャップをジェネレーターのデフォルトに反映しました。
MDN: HTML attribute rel
rel="shortcut icon"をデフォルト出力から除外（標準適合の観点から非推奨）。- 複数の
<link rel="icon">を出す場合に、type/sizes/mediaを使った選択を前提に、出力順と属性の付け方（例: SVG + PNG fallback）のテンプレを整理。 - iOS について、
rel="icon"やsizesを参照しない前提でapple-touch-iconを別途生成する方針を明確化。
2024-10-26（Google 検索結果の favicon 要件アップデートに追従）
Google Search Central の SEO 面の要件をジェネレーターのデフォルトに反映しました。
Google Search Central: Latest documentation updates
Google Search Central: Define a favicon to show in search results
- **1:1（正方形）**を前提に、入力画像のクロップ/余白付けのガイドを強化。
- 最小 8×8 は満たしつつ、48×48 より大きいサイズを推奨する出力（少なくとも 48px 超の PNG を用意する設計）に変更。
- favicon URL は安定させる（頻繁に変えない）を強い注意事項として追加。
- hostname 単位で 1 つという制約を UI/出力ガイドに反映。
2024-04-16（maskable icon を “PWA 互換の実務標準” としてオプション追加）
Lighthouse の監査要件に合わせ、PWA を視野に入れる場合に限り maskable アイコン生成を有効化できるようにしました。
Chrome for Developers: “Manifest doesn’t have a maskable icon”
- オプションで Web App Manifest を生成し、
iconsにpurpose: "maskable"（またはany maskable）を含むエントリを出力（デフォルト:site.webmanifest。必要なら変更可）。 - ただし「ブログ等で PWA を狙わない」場合に、manifest を無理に出さない設計（不要なファイルと期待値を増やさない）。
2024-04-12（favicon.svg 生成と PNG/ICO フォールバックを追加）
SVG favicon の利点（スケール・テーマ適応など）を取り込みつつ、未対応環境のために ICO/PNG を残す方針をテンプレ化しました。
web.dev: Building an adaptive favicon
- SVG favicon を生成し、
<link rel="icon" ... type="image/svg+xml">を出力（デフォルト:favicon.svg。必要なら変更可）。 - 併せて
.icoを フォールバックとして先に参照する推奨テンプレを採用（段階的強化）。
2023-6-21
Favicon ベストプラクティス・ジェネレーター作成
