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）が見つかった場合は、フレームワークの検出結果にかかわらず、そのファイルの場所を配置先として使用します。

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

判断に迷う場合は確認してください：静的アセットの配置先に 100％確信が持てない場合（プロジェクト構成が曖昧、候補となる場所が複数ある、未知のフレームワークなど）は、処理を進める前に 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 で検出した静的アセットディレクトリに置き換えます。

favicon.ico（マルチ解像度：16x16、32x32、48x48）

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

favicon-96x96.png

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

apple-touch-icon.png（180x180）

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

web-app-manifest-192x192.png

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

web-app-manifest-512x512.png

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

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

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

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

ステップ 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 配列を更新します。

ステップ 7：HTML／レイアウトファイルを更新する

検出されたプロジェクトの種類に基づいて、適切なファイルを更新します。静的アセットのディレクトリが Web ルートからどの位置にあるかに応じて、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" />

ステップ 8：概要

以下を含めて、完了を報告します。

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

エラー処理

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