favicon-generator

コンポーネント：ファビコン

ブラウザーのタブ、ブックマーク、モバイルのホーム画面、Google 検索結果でブランドの一貫性を保つための、ファビコンとアプリアイコンの実装ガイドです。ファビコンはユーザーがサイトを識別するのに役立ちます。アイコンがない、または不適切な場合、信頼を損なうおそれがあります。

呼び出し時：初回の使用時は、このスキルの内容と重要な理由を1～2文で説明してから、主な出力を提示すると便利です。2回目以降の使用時や、ユーザーから省略するよう求められた場合は、すぐに主な出力を提示してください。

初期評価

プロジェクトのコンテキスト： ルートに contextus.md がある場合は読み込み、このタスクに関連するモジュールだけを読み込んでください。Contextus がない場合は、利用可能なプロジェクト資料またはユーザーが提供した情報を使用し、不足している情報を確認してください。別のコンテキスト管理システムを作成しないでください。

以下を確認します。

1. 技術スタック：Next.js、WordPress、静的 HTML など
2. PWA：サイトは PWA ですか、または PWA にする予定ですか？
3. 既存のアセット：ロゴ、アイコンファイル

必要なサイズ

サイズ	用途
16x16	ブラウザーのタブ、標準ディスプレイ
32x32	Retina／HiDPI ブラウザーのタブ
180x180	Apple Touch Icon（iOS のホーム画面）；透明部分なし
192x192	Android Chrome のホーム画面、PWA ランチャー
512x512	PWA のスプラッシュ画面、アダプティブアイコン

任意：幅広い環境に対応するには、48x48、96x96、120x120、152x152、167x167、256x256 も用意できます。

形式

形式	用途
SVG	最新のブラウザーに対応；拡大縮小可能；メディアクエリでダークモードに対応；軽量
PNG	高 DPI に対応；サイズを明示可能；生成が簡単；Apple Touch Icon に必須
ICO	レガシー環境向け；複数のサイズを格納；古いブラウザー向けのフォールバック

推奨：SVG と PNG のフォールバックを用意してください。Apple Touch Icon（180x180）を省略しないでください。これがない場合、iOS では汎用のスクリーンショットが表示されます。

Google 検索（SERP での表示）

SERP の機能の種類と最適化については、serp-features を参照してください。

Google 検索結果では、サイトの掲載情報の横にファビコンが表示されることがあります。Google Search Central の要件は以下のとおりです。

要件	ガイドライン
配置	ホームページのヘッダーに <link rel="icon" href="/path/to/favicon.ico"> を追加します
ホスト名ごとに1つ	ホスト名ごとにファビコンを1つ設定します。example.com と code.example.com は別々に扱われますが、example.com/sub-site は同じファビコンを共有します
クロール可能性	Googlebot-Image がファビコンをクロールでき、Googlebot がホームページをクロールできるようにします。robots.txt でどちらもブロックしないでください
形状	正方形（アスペクト比 1:1）；最小サイズ 8x8px；すべてのプラットフォームで高品質に表示するには、48x48px より大きいサイズを推奨します
安定した URL	ファビコンの URL を頻繁に変更しないでください
適切な内容	不適切なコンテンツ（ポルノ、ヘイトシンボルなど）は使用しないでください。Google がデフォルトのアイコンに置き換える場合があります
反映までの時間	クロールには数日から数週間かかることがあります。Search Console の URL 検査を使用してインデックス登録をリクエストしてください

サポートされている rel の値：icon、shortcut icon、apple-touch-icon、apple-touch-icon-precomposed。href には相対パス（/favicon.ico）または絶対パスを指定できます。ファビコンは CDN でホストすることもできます。

実装

HTML リンクタグ

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

Next.js

/app に favicon.ico、icon.png、apple-icon.png を配置します。Next.js がタグを自動生成します。

PWA マニフェスト

manifest.json の icons 配列に、マスカブルアイコン用として 192x192 と 512x512 を含めます。

ベストプラクティス

• シンプルさ：16x16 では複雑なディテールが判別しにくくなるため、簡略化したロゴマークを使用し、SERP でブランドを認識できるようにデザインします
• 一貫性：ファビコンはロゴやブランドと一致させます（logo-generator、brand-visual-generator）
• キャッシュ：長いキャッシュ期間を設定し、更新時にはバージョンを付けます（例：/favicon.ico?v=2）
• ツール：自動化には RealFaviconGenerator、favicon.io、または favicons npm package を使用します
• テスト：ブラウザー、ダークモード、Search Console で確認します（ファビコンの表示まで数日から数週間かかる場合があります）

出力形式

• サイズチェックリスト（16、32、180、192、512。Google 検索では 48x48 超）
• 形式の推奨（SVG、PNG、ICO）
• 実装に関する技術スタックごとのメモ（ホームページのヘッダーへの配置）
• Google 検索チェックリスト（クロール可能性、安定した URL、適切なコンテンツ）
• マニフェスト（PWA の場合）

関連スキル

• logo-generator：ファビコンは通常、ロゴを基に作成します。ブランドの一貫性を保ちます
• media-kit-page-generator：メディアキットには、ファビコンまたはブランドアセットへのリンクを含める必要があります
• brand-visual-generator：ビジュアルアイデンティティ。ファビコンはブランドカラーとマークに合わせます
• indexing：ファビコンにはクロール可能なホームページが必要です。インデックス登録には URL 検査を使用します