ファビコンジェネレーター

ロゴ、イニシャル、またはブランドカラーから完全なファビコンパッケージを生成します。必要なすべてのフォーマットと HTML 統合コードを生成します。

ワークフロー

ステップ 1: アプローチを選択

ロゴにアイコン要素がありますか?
 YES -> ロゴからアイコンを抽出
 NO  -> テキスト/イニシャルはありますか?
         YES -> モノグラムファビコンを作成
         NO  -> ブランド形状を使用

ステップ 2: ソース SVG を作成

抽出されたアイコン — ロゴからアイコンパスをコピーして 32x32 viewBox の中央に配置し、小さいサイズ用に簡潔化します。

モノグラム — assets/ のテンプレートを使用します:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
  <text x="16" y="21" font-size="16" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text>
</svg>

ブランド形状 — 円（汎用）、角丸正方形（モダン）、シールド（セキュリティ）、六角形（テック）。

SVG テンプレートは assets/ ディレクトリで利用できます。

ステップ 3: すべてのフォーマットを生成

ImageMagick (convert コマンド) が必要です。必要に応じてインストールしてください: brew install imagemagick (macOS) または apt install imagemagick (Linux)。

# ICO (16x16 + 32x32)
convert favicon.svg -define icon:auto-resize=16,32 favicon.ico

# Apple Touch Icon (180x180、ソリッド背景 — 透明 = iOS で黒い正方形)
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

# Android/PWA アイコン
convert favicon.svg -resize 192x192 icon-192.png
convert favicon.svg -resize 512x512 icon-512.png

ImageMagick がありませんか? SVG から変換するには https://favicon.io を使用してください。

ステップ 4: Web マニフェストを作成

assets/manifest.webmanifest をコピーしてカスタマイズします:

{
  "name": "Your Business Name",
  "short_name": "Business",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "display": "standalone"
}

ステップ 5: HTML タグを追加

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0066cc">

すべてのファイルをサイトルート (Vite/React では /public/) に配置します。

---

重要なルール

• 常にすべてのフォーマットを生成 — SVG、ICO、apple-touch-icon、192、512、manifest
• iOS アイコンはソリッド背景が必須 — 透明 = 黒い正方形
• モノグラムテキストには常にボールドフォントウェイトを使用 (標準は 16x16 で消えます)
• 16x16 でテスト — 読みやすくない場合は簡潔化してください
• CMS デフォルトで起動しないでください (WordPress の "W" など)

フォーマット クイックリファレンス

フォーマット	サイズ	透明性	用途
favicon.svg	ベクトル	はい	最新ブラウザ
favicon.ico	16+32	はい	レガシーブラウザ
apple-touch-icon.png	180x180	いいえ	iOS ホーム画面
icon-192.png	192x192	はい	Android
icon-512.png	512x512	はい	PWA

アセットファイル

• assets/favicon-svg-circle.svg — 円形モノグラムテンプレート
• assets/favicon-svg-square.svg — 角丸正方形テンプレート
• assets/favicon-svg-shield.svg — シールドテンプレート
• assets/manifest.webmanifest — Web マニフェストテンプレート

リファレンスファイル

• references/format-guide.md — 完全なフォーマット仕様
• references/extraction-methods.md — ロゴアイコン抽出のステップ
• references/monogram-patterns.md — 高度なモノグラムデザイン
• references/shape-templates.md — 業界別シェイプと SVG コード