環境ごとのアプリアイコンを、エージェントが生成
ローカル、staging、production がすべて同じタブアイコンを表示していると、誰かが間違ったタブで間違ったスクリプトを実行するのは時間の問題です。Favicon Tools MCP はそれを大元から解決します。デフォルトで dev、staging、production のアイコンを返すのです。
各ステージが受け取るもの
| ステージ | アイコン |
|---|---|
| Production | オーバーレイなしのクリーンなブランドアイコン |
| Staging | 角に「S」バッジが付いた同じグリフ |
| Development | 角に「D」バッジが付いた同じグリフ |
1回の呼び出しで一式が返る
エージェントをMCPサーバーに向けて generate_iconset を呼び出します。デフォルトのままなら、単一のソースからステージごとの完全なキットと、それに対応するマニフェストが生成されます。
// .mcp.json: add the server
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}// then the agent calls:
generate_iconset({ source: "noto:fox" })
// → clean production icon
// → staging-* variants (corner "S")
// → dev-* variants (corner "D")
// → manifest.json + staging-manifest.json + dev-manifest.json
// → a stage-aware <head> snippetインストールスニペットはすでに条件分岐済み
切り替えロジックを自分で書く必要はありません。返されるスニペットは、環境変数に基づいて正しいアイコンとマニフェストをレンダリングします。ルートレイアウトに貼り込むだけです：
// app/layout.tsx (Next.js)
const isStaging = process.env.NEXT_PUBLIC_APP_ENV === "staging";
const isDev = process.env.NODE_ENV === "development";
// pick the filename prefix + manifest per stage
const prefix = isDev ? "/dev-" : isStaging ? "/staging-" : "/";
const manifest = isDev
? "/dev-manifest.json"
: isStaging
? "/staging-manifest.json"
: "/manifest.json";
// <link rel="icon" href={`${prefix}favicon.ico`} />
// <link rel="icon" sizes="32x32" href={`${prefix}favicon-32x32.png`} />
// <link rel="manifest" href={manifest} />同じパターンが React、Vue、Svelte、Astro 向けにも提供されます。ファイル名のプレフィックス（/、/staging-、/dev-）を手がかりにするため、production はクリーンなまま保たれ、他のステージには自動でバッジが付きます。
デプロイのセーフティネット
タブバーが、今どの環境を見ているのかを一目で示すインジケーターになります。バッジ付きアイコンは、破壊的なコマンドが production に着地するのを止める「ひと呼吸」です。
バリアントと条件分岐スニペットが同じレスポンスで返ってくるため、マルチ環境の衛生管理がタダで手に入ります。2回目の生成パスも、手編集した link タグも不要です。
公開する前に
- 1
ファイルが揃っているか確認する
staging-* と dev-* のファイル（およびそのマニフェスト）が静的ディレクトリにあることを確認します。
- 2
デプロイごとに環境変数を設定する
スニペットは NEXT_PUBLIC_APP_ENV またはそれに相当する変数を読み取ります。すべての環境で設定してください。
- 3
各マニフェスト名にサフィックスを付ける
例：「Acme」「Acme (Staging)」「Acme (Dev)」。
- 4
各環境を検証する
各環境のURLに対して /verify を実行し、正しいアイコンが公開されていることを確認します。