appicons

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

App Icons (agent-first)

应用图标（Agent优先）

Generate a full favicon / app-icon stack and install it into the current project in one shot. The whole flow is a single command — there is no UI to click, no zip to download, and no files to move. A brand-new app shipping with a blank tab icon looks unfinished; this is the fastest way to fix that.

一键生成完整的favicon/app-icon图标栈并安装到当前项目中。整个流程只需一条命令——无需点击UI、无需下载压缩包、无需手动移动文件。全新应用如果带着空白标签页图标发布，会显得不够完善；这是最快的解决方法。

When to use

使用场景

User wants a favicon / tab icon / site icon / app icon / PWA icons.
User points at a logo, an emoji ("a fox"), a brand ("the React logo"), or an existing site's icon and wants it turned into a proper icon set.
A new web project has no favicon yet, or still has the framework default.

用户需要favicon/标签页图标/网站图标/应用图标/PWA图标。
用户指向某个logo、emoji（比如“一只狐狸”）、品牌（比如“React标志”）或现有网站的图标，希望将其转换为标准图标集。
新的Web项目还没有favicon，或者仍使用框架默认图标。

Defaults (no manual input needed)

默认设置（无需手动输入）

This skill is built so you can act on intent alone. Unless the user says otherwise, generate the full per-stage set:

theme-aware light/dark favicons, and
per-environment variants — a clean production icon plus badged staging (
```
S
```
) and dev (
```
D
```
) icons, each with its own manifest.

That's the

--badges --theme-aware

defaults below. Only drop them (

--no-badges

--no-theme-aware

) if the user explicitly wants a single plain icon.

本工具的设计支持仅根据用户意图操作。除非用户另有说明，默认生成全环境阶段图标集：

支持主题适配的明暗favicon，以及
分环境变体——简洁的生产环境图标，加上带有标记的预发布（
```
S
```
）和开发（
```
D
```
）环境图标，每个环境都有独立的manifest文件。

这对应下方的

--badges --theme-aware

默认参数。只有当用户明确需要单一纯色图标时，才移除这些参数（

--no-badges

--no-theme-aware

）。

Step 1 — Pick the source

步骤1 — 选择来源

The generator accepts three kinds of

--source

. Choose based on what the user gave you:

User gave you…	Use	Example
A local logo/image	the file path	`--source ./assets/logo.png`
A URL to an image/logo	the URL	`--source https://site.com/logo.svg`
A vibe / emoji / brand name	an Iconify name `prefix:name`	`--source noto:fox`

For the Iconify path you translate the user's intent into a

prefix:name

Emoji →

noto:

(or

twemoji:

fluent-emoji:

). "a rocket" →

noto:rocket

, "fox" →

noto:fox

, "purple heart" →

noto:purple-heart

Brand / product logo →

simple-icons:

logos:

. "React" →

simple-icons:react

, "GitHub" →

logos:github-icon

, "Stripe" →

simple-icons:stripe

UI / line icon →
```
lucide:
```
,
```
mdi:
```
, or
```
tabler:
```
. "a camera" →
```
lucide:camera
```
.

If unsure an icon name exists, browse https://icon-sets.iconify.design or just try it — the script errors clearly if the name is unknown, then pick another. If the project already has a logo, prefer it over an emoji.

生成器接受三种类型的

--source

参数。根据用户提供的内容选择：

用户提供了…	使用方式	示例
本地logo/图片	文件路径	`--source ./assets/logo.png`
图片/logo的URL	URL地址	`--source https://site.com/logo.svg`
风格/emoji/品牌名称	Iconify名称 `prefix:name`	`--source noto:fox`

对于Iconify路径，需将用户的意图转换为

prefix:name

格式：

Emoji → 使用
```
noto:
```
（或
```
twemoji:
```
、
```
fluent-emoji:
```
）。比如“火箭”→
```
noto:rocket
```
，“狐狸”→
```
noto:fox
```
，“紫心”→
```
noto:purple-heart
```
。
品牌/产品标志 → 使用
```
simple-icons:
```
或
```
logos:
```
。比如“React”→
```
simple-icons:react
```
，“GitHub”→
```
logos:github-icon
```
，“Stripe”→
```
simple-icons:stripe
```
。
UI/线性图标 → 使用
```
lucide:
```
、
```
mdi:
```
或
```
tabler:
```
。比如“相机”→
```
lucide:camera
```
。

如果不确定图标名称是否存在，可以浏览https://icon-sets.iconify.design，或者直接尝试——如果名称不存在，脚本会清晰地抛出错误，之后再选择其他名称。如果项目已有logo，优先使用项目logo而非emoji。

Step 2 — Generate (writes files directly)

步骤2 — 生成（直接写入文件）

bash

scripts/favicon-gen.sh --source <file|url|prefix:name> --out <public-dir> [options]

Pick

--out

to match the framework's static dir (see Step 3). Options:

```
--bg none|white|black
```
— background fill (default
```
none
```
/transparent). Emoji and line icons usually look best on
```
white
```
+
```
--shape circular
```
.
```
--shape square|circular
```
```
--variant badge|color
```
+
```
--primary "#7c3aed"
```
— how staging/dev are marked.
```
badge
```
(default) adds a corner S/D letter;
```
color
```
tints them from
```
--primary
```
.
```
--no-badges
```
— single production icon only (skip dev/staging variants).
```
--no-theme-aware
```
— skip the light/dark 16×16 favicons.

Examples:

bash

undefined

bash

scripts/favicon-gen.sh --source <file|url|prefix:name> --out <public-dir> [options]

选择

--out

参数以匹配框架的静态文件目录（见步骤3）。可选参数：

```
--bg none|white|black
```
— 背景填充色（默认
```
none
```
/透明）。Emoji和线性图标通常在
```
white
```
背景+
```
--shape circular
```
时效果最佳。
```
--shape square|circular
```
— 图标形状
```
--variant badge|color
```
+
```
--primary "#7c3aed"
```
— 预发布/开发环境图标的标记方式。默认
```
badge
```
会在角落添加S/D字母；
```
color
```
会使用
```
--primary
```
指定的颜色为图标着色。
```
--no-badges
```
— 仅生成单一生产环境图标（跳过开发/预发布变体）。
```
--no-theme-aware
```
— 跳过支持明暗主题的16×16尺寸favicon。

示例：

bash

undefined

Default: emoji favicon, polished, with theme-aware + per-stage variants

默认：emoji favicon，优化版，支持主题适配+分环境变体

scripts/favicon-gen.sh --source noto:fox --bg white --shape circular --out ./public

From the project's own logo (still per-stage by default)

使用项目自身的logo（默认仍生成分环境变体）

scripts/favicon-gen.sh --source ./public/logo.svg --out ./public

Brand mark, color-tinted stage variants instead of letter badges

品牌标志，使用颜色标记分环境变体而非字母徽章

scripts/favicon-gen.sh --source simple-icons:react --variant color --primary "#61dafb" --out ./public

Just a single plain icon, no stages

仅生成单一纯色图标，不分环境

scripts/favicon-gen.sh --source ./logo.png --no-badges --out ./public


The script writes the icon files (`favicon.ico`, `favicon-16/32/48/96`,
`apple-touch-icon.png`, `android-icon-192x192.png`, `manifest.json`, theme
variants, and `staging-*`/`dev-*` + `staging-manifest.json`/`dev-manifest.json`
when stages are on) into `--out`, and prints a `<head>` snippet, also saved to
`<out>/.favicon-head.html`.

scripts/favicon-gen.sh --source ./logo.png --no-badges --out ./public


脚本会将图标文件（`favicon.ico`、`favicon-16/32/48/96`、`apple-touch-icon.png`、`android-icon-192x192.png`、`manifest.json`、主题变体，以及开启分环境时的`staging-*`/`dev-*`和`staging-manifest.json`/`dev-manifest.json`）写入`--out`目录，同时输出一段`<head>`代码片段，该片段也会保存到`<out>/.favicon-head.html`文件中。

Step 3 — Install the tags (framework-aware)

步骤3 — 安装标签（支持框架适配）

Place the icons in the right static dir and wire up the

<head>

. Detect the framework from the repo, then:

Next.js (App Router) →
```
--out ./public
```
. Next auto-serves
```
app
```
/
```
public
```
icons, but for the full set add to
```
app/layout.tsx
```
metadata or drop the
```
<head>
```
snippet's
```
<link>
```
s into the root layout.
```
manifest.json
```
→ link via
```
metadata.manifest
```
or a
```
<link rel="manifest">
```
.
Next.js (Pages) / CRA / Vite / plain HTML →
```
--out ./public
```
and paste the contents of
```
.favicon-head.html
```
into the
```
<head>
```
of
```
index.html
```
(or
```
_document
```
/
```
app.html
```
). All paths are already root-relative (
```
/favicon.ico
```
).
Vite/Astro/SvelteKit → static dir is usually
```
./public
```
(Astro/Svelte) — confirm and pass it to
```
--out
```
. Then add the snippet to the base HTML.

After patching, delete or replace any pre-existing

favicon.ico

<link rel="icon">

so the old icon doesn't win the cache. In Next.js, files in

app/

(e.g.

app/favicon.ico

) override

public/

— remove the stale one.

将图标放置在正确的静态文件目录并配置

<head>

标签。从代码仓库中检测框架，然后：

Next.js（App Router） → 设置
```
--out ./public
```
。Next.js会自动提供
```
app
```
/
```
public
```
目录下的图标，但要使用完整图标集，需将代码片段中的
```
<link>
```
标签添加到
```
app/layout.tsx
```
的元数据中，或者添加到根布局的
```
<head>
```
里。
```
manifest.json
```
可通过
```
metadata.manifest
```
或
```
<link rel="manifest">
```
进行关联。
Next.js（Pages）/ CRA / Vite / 纯HTML → 设置
```
--out ./public
```
，并将
```
.favicon-head.html
```
中的内容粘贴到
```
index.html
```
（或
```
_document
```
/
```
app.html
```
）的
```
<head>
```
标签中。所有路径均已设置为根相对路径（如
```
/favicon.ico
```
）。
Vite/Astro/SvelteKit → 静态文件目录通常为
```
./public
```
（Astro/Svelte）——确认后将其传入
```
--out
```
参数，然后将代码片段添加到基础HTML文件中。

完成修补后，删除或替换所有已存在的

favicon.ico

<link rel="icon">

标签，避免旧图标因缓存问题生效。在Next.js中，

app/

目录下的文件（如

app/favicon.ico

）会覆盖

public/

目录下的文件——请移除旧的图标文件。

Step 3.5 — Wire up the stages (when per-stage variants are on)

步骤3.5 — 配置分环境逻辑（当开启分环境变体时）

When you generated stages (the default), don't hard-code production-only tags. Render the icon set conditionally off the deploy environment so production shows the clean icon while staging/dev show their badged ones. The variants follow a filename-prefix convention:

(prod),

/staging-

/dev-

Next.js / React — in

app/layout.tsx

(or a

<FaviconHead>

component):

tsx

const isStaging = process.env.NEXT_PUBLIC_APP_ENV === "staging";
const isDev = process.env.NODE_ENV === "development";
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" type="image/png" sizes="32x32" href={`${prefix}favicon-32x32.png`} />
// <link rel="apple-touch-icon" href={`${prefix}apple-touch-icon.png`} />
// <link rel="manifest" href={manifest} />

Vite / Vue —

const prefix = import.meta.env.DEV ? '/dev-' : import.meta.env.VITE_APP_ENV === 'staging' ? '/staging-' : '/'

Astro — key off

import.meta.env.PUBLIC_APP_ENV

. SvelteKit — same idea in

+layout.svelte

Make sure the

staging-manifest.json

dev-manifest.json

land in the static dir too, and suffix each manifest's

name

short_name

per stage, e.g.

"Acme"

"Acme (Staging)"

"Acme (Dev)"

. Set

start_url

to the page users should land on (

for marketing,

/dashboard

for admin apps).

当生成分环境变体（默认开启）时，不要硬编码仅适用于生产环境的标签。需根据部署环境条件渲染图标集，使生产环境显示简洁图标，而预发布/开发环境显示带有标记的变体。变体遵循文件名前缀约定：

（生产）、

/staging-

、

/dev-

。

Next.js / React — 在

app/layout.tsx

（或

<FaviconHead>

组件）中：

tsx

const isStaging = process.env.NEXT_PUBLIC_APP_ENV === "staging";
const isDev = process.env.NODE_ENV === "development";
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" type="image/png" sizes="32x32" href={`${prefix}favicon-32x32.png`} />
// <link rel="apple-touch-icon" href={`${prefix}apple-touch-icon.png`} />
// <link rel="manifest" href={manifest} />

Vite / Vue — 使用

const prefix = import.meta.env.DEV ? '/dev-' : import.meta.env.VITE_APP_ENV === 'staging' ? '/staging-' : '/'

。

Astro — 根据

import.meta.env.PUBLIC_APP_ENV

判断。SvelteKit — 在

+layout.svelte

中使用相同逻辑。

确保

staging-manifest.json

dev-manifest.json

也存入静态文件目录，并为每个manifest的

name

short_name

添加环境后缀，例如

"Acme"

、

"Acme (Staging)"

、

"Acme (Dev)"

。设置

start_url

为用户应进入的页面（营销网站设为

，管理应用设为

/dashboard

）。

Step 4 — Verify

步骤4 — 验证

Confirm the files exist in the static dir (at minimum
```
favicon.ico
```
,
```
favicon-32x32.png
```
,
```
apple-touch-icon.png
```
,
```
manifest.json
```
— plus the
```
staging-*
```
/
```
dev-*
```
files when stages are on).
Confirm the
```
<head>
```
(or layout metadata) references them, and that the stage logic resolves to the right files.
Report the coverage (which sizes/variants/stages were produced) to the user.
If a dev server is running, the favicon may be cached — mention a hard refresh.

确认静态文件目录中存在所需文件（至少包含
```
favicon.ico
```
、
```
favicon-32x32.png
```
、
```
apple-touch-icon.png
```
、
```
manifest.json
```
——开启分环境时还需包含
```
staging-*
```
/
```
dev-*
```
文件）。
确认
```
<head>
```
（或布局元数据）已正确引用这些文件，且分环境逻辑能解析到正确的文件。
向用户报告生成的覆盖范围（包括哪些尺寸、变体、环境阶段的图标已生成）。
如果开发服务器正在运行，favicon可能被缓存——提醒用户强制刷新页面。

Notes

注意事项

Network is required (calls
```
favicontools.com
```
). Override the endpoint with
```
--api
```
or the
```
FAVICON_API
```
env var (e.g. a self-hosted instance).
The API rasterizes SVG sources server-side, so vector logos and Iconify icons come out crisp at every size.
Requires
```
curl
```
,
```
unzip
```
, and either
```
python3
```
or
```
jq
```
(for JSON parsing).

需要网络连接（调用
```
favicontools.com
```
）。可通过
```
--api
```
参数或
```
FAVICON_API
```
环境变量覆盖端点（例如自托管实例）。
API会在服务器端将SVG来源栅格化，因此矢量logo和Iconify图标在所有尺寸下都能保持清晰。
需要依赖
```
curl
```
、
```
unzip
```
，以及
```
python3
```
或
```
jq
```
（用于JSON解析）。

Alternative: the MCP server

替代方案：MCP服务器

If the user runs an MCP-aware agent, they can add the Favicon Tools MCP server instead of this script:

json

{ "mcpServers": { "favicontools": { "type": "http", "url": "https://favicontools.com/api/mcp" } } }

It exposes

search_inputs

and

generate_iconset

;

generate_iconset

also returns per-stage variants and a stage-aware head snippet by default, then hands back CDN URLs for every file. Use whichever fits the environment.

如果用户运行支持MCP的Agent，可以添加Favicon Tools MCP服务器来替代本脚本：

json

{ "mcpServers": { "favicontools": { "type": "http", "url": "https://favicontools.com/api/mcp" } } }

它暴露了

search_inputs

和

generate_iconset

接口；

generate_iconset

默认也会返回分环境变体和支持分环境的<head>代码片段，然后返回所有文件的CDN URL。可根据环境选择合适的方式。

Provenance

来源

Generation API:

POST https://favicontools.com/api/favicons

(public, no auth).

Icon/emoji lookup: Iconify —
```
https://api.iconify.design/<prefix>/<name>.svg
```
(public). Browse names at https://icon-sets.iconify.design.
Built from the source project
```
mewc/favicon-generator
```
. This skill uses only the public website API above — it contains no private source.

生成API：

POST https://favicontools.com/api/favicons

（公开，无需认证）。

图标/emoji查询：Iconify —
```
https://api.iconify.design/<prefix>/<name>.svg
```
（公开）。可在https://icon-sets.iconify.design浏览图标名称。
基于开源项目
```
mewc/favicon-generator
```
构建。本工具仅使用上述公开网站API——不包含任何私有源代码。