AI 构建者
开发者体验
用 AI 添加应用图标：无需手动操作
· 6 min read
老办法：打开生成器、上传图片、下载 zip、解压、把文件复制到 public/、手动粘贴二十条 link 标签。新办法：告诉你的 agent“添加一个 favicon”，它就落进仓库，head 已修补，搞定。
整个流程是怎样的
- 1
你提出请求
在 Claude Code、Cursor 或任何支持 MCP 的 agent 里说一句话。无需准备任何素材。
- 2
它生成
favicon.ico、所有 PNG 尺寸、apple-touch、Android 图标、随主题切换的浅色/深色版本，以及 manifest.json。
- 3
它安装
文件写入你的静态目录，正确的 <head> 标签添加到布局中，无需手动搬动任何东西。
两种接入方式
除了一次性设置外，两者都是零配置，而且都会把文件直接写入你的项目。
方案 A：appicons skill
开源，直接接入你的 agent
- 教会 agent 如何把意图转化为图标集并安装它。
- 你只需和它对话，无需选择格式或尺寸。
- 在底层，它会把你的措辞解析成一个来源，调用 favicontools.com 的 API，并把结果解压到 public/。
方案 B：Favicon Tools MCP 服务器
两个工具，加入你的 agent 的工具箱
- 用 search_inputs 发现选项，用 generate_iconset 生成图标集。
- 返回每个文件的 CDN URL，外加一段可直接粘贴的 head 代码片段。
- 默认返回一整套按阶段划分的图标（一个干净的生产图标，加上带角标的 staging/dev 变体），因此 agent 可以在同一次调用中配置按环境划分的图标。
与 skill 对话
"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."四条提示词，全都会得到一套完整、已安装好的图标集。
添加 MCP 服务器
// .mcp.json
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}一条配置项，agent 就拥有了这两个工具。按阶段划分的默认设置意味着按环境划分的图标会在同一次调用中返回。
你用平实的语言描述
你从不需要挑选图标格式或尺寸。你说出想要什么，agent 就把它映射到一个来源。
| 你说什么 | agent 用什么 |
|---|---|
| 一个 emoji 或某种感觉 | 一个 Iconify 名称，比如 noto:fox 或 twemoji:rocket |
| 一个品牌 / 产品 | simple-icons:stripe, logos:github-icon |
| 你自己的 logo | 文件路径，例如 ./public/logo.svg |
| 一张图片的 URL | 该 URL，在服务器端栅格化 |
“搞定”是什么样的
| 落地了什么 | 细节 |
|---|---|
| 图标文件 | 全部放在 public/（Next.js 则是 app/）中。 |
| Head 标签 | 一个完整的 <head> 块，或布局元数据，引用这些文件。 |
| manifest.json | 包含你真实的应用名称和 start_url。 |
| 旧的 favicon.ico | 已删除，这样缓存就无法再提供占位图。 |