favicon-gen

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

ロゴ、イニシャル、またはブランドカラーから、完全なファビコンパッケージを生成します。必要なすべての形式と、HTML 組み込み用コードを作成します。

ワークフロー

ステップ 1：方法を選択する

Have a logo with an icon element?
 YES -> Extract icon from logo
 NO  -> Have text/initials?
         YES -> Create monogram favicon
         NO  -> Use branded shape

ステップ 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, SOLID background — transparent = black on iOS)
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

# Android/PWA icons
convert favicon.svg -resize 192x192 icon-192.png
convert favicon.svg -resize 512x512 icon-512.png

ImageMagick がない場合は？ https://favicon.io を使って SVG から変換してください。

ステップ 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 コード付きの業界別シェイプ