favicon

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

使用する場面

• 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.toml、または Hugo マーカーを含む 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：静的アセットディレクトリが存在することを確認する

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

画像とマニフェストの安全対策

拡張子だけでなく、ソースの寸法や内容も確認してください。信頼できない SVG は、リソース制限を設け、外部リソースへのアクセスを許可せずにレンダリングしてください。レビューしていない SVG を公開サイトにコピーしないでください。アスペクト比を維持したリサイズで宣言した正方形の寸法になるよう、レビュー済みの正方形キャンバスと余白を使用し、すべての出力を確認してください。一般的な方法でリサイズした画像が、自動的にマスク対応になるわけではありません。以下のマニフェストでは any を使用しています。セーフゾーンのデザインを確認したうえで、別途 maskable アイコンを追加してください。start_url、scope、id、ショートカット、無関係なアイコンなど、既存のマニフェストフィールドは維持し、URL は実際のデプロイベースに合わせて調整してください。アプリアイコンの用途を参照してください。

手順 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

手順 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": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

静的ディレクトリに site.webmanifest がすでに存在する場合は、name、short_name、icons 配列を更新しつつ、既存の theme_color、background_color、display の値を維持してください。

手順 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 を手動で追加するよう案内します

制限事項

• タスクが上記の説明にある適用範囲に明確に一致する場合にのみ、このスキルを使用してください。
• 環境固有の検証、テスト、専門家によるレビューの代わりとして出力を扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を止めて確認を求めてください。