MCP
开发者体验
按环境划分的应用图标，由你的 agent 生成
· 6 min read
当本地、staging 和生产环境都显示同一个标签页图标时，迟早会有人在错误的标签页里运行错误的脚本。Favicon Tools MCP 从源头解决了这个问题：它默认返回 dev、staging 和生产环境的图标。
每个阶段得到什么
| 阶段 | 图标 |
|---|---|
| 生产环境 | 干净的品牌图标，无叠加 |
| Staging | 相同的图形，角上带一个“S”角标 |
| 开发环境 | 相同的图形，角上带一个“D”角标 |
一次调用返回整套图标
把你的 agent 指向 MCP 服务器并调用 generate_iconset。在默认设置下，单个来源就能生成完整的按阶段套件，以及配套的 manifest。
// .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安装代码片段已经是条件式的
你无需自己编写切换逻辑。返回的代码片段会根据你的环境变量渲染正确的图标和 manifest。把它放进你的根布局中：
// 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-）为依据，让生产环境保持干净，其他阶段则自动获得各自的角标。
一张部署安全网
标签栏成了一眼就能看出当前所在环境的指示器。带角标的图标就是那个让人停顿一下、阻止破坏性命令落到生产环境的瞬间。
由于这些变体和条件式代码片段在同一次响应中返回，你能免费获得多环境的规范治理：无需再生成一遍，也无需手动编辑 link 标签。
发布之前
- 1
确认文件都在
确认 staging-* 和 dev-* 文件（及其 manifest）都在你的静态目录中。
- 2
为每次部署设置环境变量
代码片段读取 NEXT_PUBLIC_APP_ENV 或你的等效变量。在每个环境上都要设置它。
- 3
为每个 manifest 名称加后缀
例如“Acme”、“Acme (Staging)”、“Acme (Dev)”。
- 4
验证每个环境
对每个环境的 URL 运行 /verify，确认正确的图标已上线。