favicon

ソース画像 $1 からファビコン一式を生成し、適切なリンクタグでプロジェクトの HTML を更新します。

前提条件

まず、次を実行して ImageMagick v7 以降がインストールされていることを確認します。

which magick

見つからない場合は、処理を中止してユーザーにインストールを案内します。

• macOS：brew install imagemagick
• Linux：sudo apt install imagemagick

ステップ 1：ソース画像を検証する

1. 指定されたパスにソース画像が存在することを確認します：$1
2. ファイル拡張子が対応形式（PNG、JPG、JPEG、SVG、WEBP、GIF）であることを確認します
3. ファイルが存在しない場合、または有効な画像形式でない場合は、エラーを報告して処理を中止します

ソースが SVG ファイルかどうかを確認します。SVG ファイルの場合は、favicon.svg としてもコピーします。

ステップ 2：プロジェクトの種類と静的アセットのディレクトリを検出する

プロジェクトの種類を検出し、静的アセットの配置先を特定します。次の順序で確認します。

フレームワーク	検出条件	静的アセットのディレクトリ
Rails	config/routes.rb が存在する	public/
Next.js	next.config.* が存在する	public/
Gatsby	gatsby-config.* が存在する	static/
SvelteKit	svelte.config.* が存在する	static/
Astro	astro.config.* が存在する	public/
Hugo	Hugo の識別子を含む hugo.toml または config.toml が存在する	static/
Jekyll	Jekyll の識別子を含む _config.yml が存在する	ルートディレクトリ（index.html と同じ場所）
Vite	vite.config.* が存在する	public/
Create React App	package.json に react-scripts の依存関係がある	public/
Vue CLI	vue.config.* が存在する	public/
Angular	angular.json が存在する	src/assets/
Eleventy	.eleventy.js または eleventy.config.* が存在する	_site の出力先またはルートを確認
静的 HTML	ルートに index.html がある	index.html と同じディレクトリ

重要：既存のファビコンファイル（例：favicon.ico、apple-touch-icon.png）が見つかった場合は、フレームワークの検出結果にかかわらず、そのファイルの場所を配置先として使用します。

検出したプロジェクトの種類と、使用する静的アセットのディレクトリを報告します。

判断に迷った場合は質問する：静的アセットの配置先に確信が持てない場合（例：プロジェクト構成が曖昧、配置先の候補が複数ある、なじみのないフレームワーク）は、続行する前に AskUserQuestionTool を使って配置先を確認してください。誤った場所にファイルを配置するより、質問する方が適切です。

ステップ 3：アプリ名を特定する

次の情報源を優先順位順に確認し、アプリ名を特定します。

1. 既存の site.webmanifest：検出した静的アセットのディレクトリに既存のマニフェストがあるか確認し、name フィールドを抽出します
2. package.json：name フィールドがあれば抽出します
3. Rails の config/application.rb：モジュール名を抽出します（例：module MyApp → 「MyApp」）
4. ディレクトリ名：フォールバックとして、現在の作業ディレクトリ名を使用します

必要に応じて、名前をタイトルケースに変換します（例：「my-app」→「My App」）。

ステップ 4：静的アセットのディレクトリを用意する

検出した静的アセットのディレクトリが存在するか確認します。存在しない場合は作成します。

ステップ 5：ファビコンファイルを生成する

次の ImageMagick コマンドを実行して、ファビコンファイル一式を生成します。[STATIC_DIR] は、ステップ 2 で検出した静的アセットのディレクトリに置き換えます。

重要：SVG のレンダリング時に透明度を適切に保持するには、-background none フラグを入力ファイルより前に指定する必要があります。入力ファイルの後に指定すると、背景が白になります。

favicon.ico（複数解像度：16x16、32x32、48x48）

magick -background none "$1" \
  \( -clone 0 -resize 16x16 \) \
  \( -clone 0 -resize 32x32 \) \
  \( -clone 0 -resize 48x48 \) \
  -delete 0 -alpha on \
  [STATIC_DIR]/favicon.ico

favicon-96x96.png

magick -background none "$1" -resize 96x96 -alpha on [STATIC_DIR]/favicon-96x96.png

apple-touch-icon.png（180x180）

magick -background none "$1" -resize 180x180 -alpha on [STATIC_DIR]/apple-touch-icon.png

web-app-manifest-192x192.png

magick -background none "$1" -resize 192x192 -alpha on [STATIC_DIR]/web-app-manifest-192x192.png

web-app-manifest-512x512.png

magick -background none "$1" -resize 512x512 -alpha on [STATIC_DIR]/web-app-manifest-512x512.png

favicon.svg（ソースが SVG の場合のみ）

ソースファイルの拡張子が .svg の場合は、次のコマンドでコピーします。

cp "$1" [STATIC_DIR]/favicon.svg

Step 6: site.webmanifest を作成／更新する

[STATIC_DIR]/site.webmanifest を次の内容で作成または更新します（検出されたアプリ名に置き換えてください）。

{
  "name": "[APP_NAME]",
  "short_name": "[APP_NAME]",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

site.webmanifest が静的ディレクトリにすでに存在する場合は、theme_color、background_color、display の既存の値を保持したまま、name、short_name、icons 配列を更新します。

Step 7: HTML／レイアウトファイルを更新する

検出されたプロジェクトの種類に基づいて、適切なファイルを更新します。静的アセットディレクトリのウェブルートからの相対位置に応じて、href のパスを調整してください。

• 静的ファイルが public/ または static/ にあり、ルートから配信される場合 → /favicon.ico を使用します
• 静的ファイルが src/assets/ にある場合 → /assets/favicon.ico を使用します
• 静的ファイルが HTML と同じディレクトリにある場合 → ./favicon.ico または favicon.ico を使用します

Rails プロジェクトの場合

app/views/layouts/application.html.erb を編集します。<head> セクションを探し、ファビコン関連のタグを次の内容で追加または置き換えます。

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="[APP_NAME]" />
<link rel="manifest" href="/site.webmanifest" />

重要：

• ソースが SVG でない場合は、<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> の行を省略します
• 新しいタグを追加する前に、既存の <link rel="icon"、<link rel="shortcut icon"、<link rel="apple-touch-icon"、または <link rel="manifest" タグを削除します
• これらのタグは、<head> セクションの上部、存在する場合は <meta charset> と <meta name="viewport"> の後に配置します

Next.js プロジェクトの場合

検出されたレイアウトファイル（app/layout.tsx または src/app/layout.tsx）を編集します。metadata エクスポートを更新または追加し、アイコン設定を含めます。

export const metadata: Metadata = {
  // ... keep existing metadata fields
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    shortcut: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
  appleWebApp: {
    title: '[APP_NAME]',
  },
};

重要：

• ソースが SVG でない場合は、アイコン配列から { url: '/favicon.svg', type: 'image/svg+xml' } エントリを省略します
• metadata エクスポートが存在しない場合は、アイコン関連のフィールドだけを含めて作成します
• metadata エクスポートが存在する場合は、既存のフィールドとアイコン設定を統合します

静的 HTML プロジェクトの場合

検出された index.html ファイルを編集します。Rails の場合と同じ HTML を <head> セクション内に追加します。

プロジェクトが検出されない場合

HTML の更新をスキップし、HTML の <head> に次の内容を手動で追加する必要があることをユーザーに伝えます。

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="[APP_NAME]" />
<link rel="manifest" href="/site.webmanifest" />

Step 8: 概要

完了時に、次の内容を報告します。

• 検出されたプロジェクトの種類とフレームワーク
• 使用した静的アセットディレクトリ
• 生成したファイルの一覧
• manifest と HTML で使用したアプリ名
• 更新したレイアウトファイル（または手動更新が必要な旨）
• 既存のファイルを上書きした場合はその旨

エラー処理

• ImageMagick がインストールされていない場合は、インストール手順を提示して停止します
• ソース画像が存在しない場合は、試行した正確なパスを報告して停止します
• ImageMagick コマンドが失敗した場合は、具体的なエラーメッセージを報告します
• HTML 更新用のレイアウトファイルが見つからない場合は、ファイルを生成したうえで、HTML への追加を手動で行うよう指示します