AIビルダー
DevEx
AIでアプリアイコンを追加：手作業ゼロ
· 6 min read
従来のやり方：ジェネレーターを開き、画像をアップロードし、zipをダウンロードして解凍し、public/ にファイルをコピーして、20個ものlinkタグを手で貼り付ける。新しいやり方：エージェントに「faviconを追加して」と伝えるだけ。ファイルがリポジトリに配置され、headもパッチされ、完了です。
一連の流れ
- 1
あなたが頼む
Claude Code、Cursor、あるいはMCP対応の任意のエージェントに一文を伝えるだけ。準備しておくアセットは何もありません。
- 2
エージェントが生成する
favicon.ico、あらゆるサイズのPNG、apple-touch、Androidアイコン、テーマ対応のライト/ダーク、そしてmanifest.json。
- 3
エージェントがインストールする
ファイルは静的ディレクトリに書き込まれ、正しい<head>タグがレイアウトに追加されます。手で動かすものは何もありません。
組み込む2つの方法
どちらも一度きりのセットアップ以外は設定不要で、いずれもファイルをプロジェクトに直接書き込みます。
選択肢A：appicons スキル
オープンソース、エージェントに組み込む
- 意図をアイコン一式に変換してインストールする方法をエージェントに教えます。
- 選ぶべきフォーマットやサイズはなく、ただ話しかけるだけです。
- 内部では、あなたの言葉をソースへと解決し、favicontools.com のAPIを呼び出して、その結果を public/ に展開します。
選択肢B：Favicon Tools MCP サーバー
2つのツールを、エージェントの道具箱に追加
- search_inputs で選択肢を探し、generate_iconset で一式を生成します。
- 各ファイルのCDN URLに加えて、そのまま貼り付けられるheadスニペットを返します。
- デフォルトでステージごとの完全な一式（クリーンな本番用アイコンに加え、バッジ付きのstaging/dev用バリアント）を返すため、エージェントは同じ呼び出しで環境ごとのアイコンを組み込めます。
スキルへの話しかけ方
"Add a fox favicon to this app."
"Generate app icons for this site from our logo at public/logo.svg."
"Give this project a proper favicon using the React logo."
"Make me a favicon from https://example.com/mark.png."いずれも完全にインストール済みのアイコン一式へと解決される、4つのプロンプト。
MCPサーバーの追加
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}1つのエントリで、エージェントは両方のツールを手にします。ステージごとのデフォルトのおかげで、環境ごとのアイコンも同じ呼び出しで返ってきます。
自然な言葉で伝えるだけ
アイコンのフォーマットやサイズを選ぶことは一切ありません。欲しいものを伝えれば、エージェントがそれをソースへとマッピングします。
| あなたが伝えること | エージェントが使うもの |
|---|---|
| 絵文字や雰囲気 | noto:fox や twemoji:rocket のような Iconify 名 |
| ブランド／製品 | simple-icons:stripe、logos:github-icon |
| 自分のロゴ | ファイルパス、例：./public/logo.svg |
| 画像のURL | URL。サーバー側でラスタライズされます |
「完了」の状態とは
| 配置されるもの | 詳細 |
|---|---|
| アイコンファイル | すべて public/（Next.js の場合は app/）に収まります。 |
| headタグ | それらを参照する完全な<head>ブロック、またはレイアウトのメタデータ。 |
| manifest.json | 実際のアプリ名と start_url を記載。 |
| 古い favicon.ico | 削除され、キャッシュがプレースホルダーを返せないようにします。 |