# @basenative/favicon 中文文档
规范地址：https://npmcn.com/package/%40basenative/favicon/
版本：3\.3\.0
npm 元数据更新时间：2026-11-03T01:39:02.707Z
中文译文更新时间：2026-11-07T23:01:53.159Z
软件包许可：Apache-2\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40basenative/favicon
原文对照：https://npmcn.com/package/%40basenative/favicon/?lang=original
项目主页：https://github.com/DuganLabs/BaseNative/tree/main/packages/favicon#readme
源码仓库：https://github.com/DuganLabs/BaseNative
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：83.1 kB，28 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-10-18T05:29:14.911Z
- 最新版本发布：2026-11-03T01:39:02.319Z
- 近 30 天下载量：2111（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）
## 中文简介
SVG- First favicon 生成器 + 设计原始相 — 苹果- 触角相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相
## 安装
```sh
npm install @basenative/favicon
```
也可以使用：`pnpm add @basenative/favicon`、`yarn add @basenative/favicon`、`bun add @basenative/favicon`
## README
# @ basinative/ favicon
> SVG-First favicon生成器 + 每个 DuganLabs 项目的设计原始.
`@basenative/favicon` 是 BasicNative 回答"等待另一个通用的favion". 它为任何项目制作一个被打磨的、独特的SVG标记——加上辅助标记 `apple-touch-icon`, (中文(简体) ), `maskable`,网络应用程序显示,以及 **对** `` 要跳入的标签 ``. Pure SVG prime; PNG 只在iOS或Android需要时才使用.
```bash
pnpm add -D @basenative/favicon
```
PNG倒计时(`apple-touch-icon.png`, (中文(简体) ), `maskable.png`(等等) `@resvg/resvg-wasm`,宣布为 `optionalDependency` ——大多数安装都是免费的. 如果安装跳过可选的依赖( N)`--no-optional` 明确加入:
```bash
pnpm add -D @resvg/resvg-wasm
```
## 品牌规则: SVG 第一级,光栅只有在iOS需要时才使用
每个现代浏览器(Chrome、Edge、Firefox、Safari 16) `` 土生土长,包括在浏览器标签中. 用来. 将PNG churn保存在真正需要的平台上:
- **`favicon.svg`** ——主机,服务于每个浏览器.
- **`apple-touch-icon.png` (180x180) (中文(简体) )** ——iOS家用屏幕.
- **`icon-192.png` 编号 : `icon-512.png`** -Android Chrome(英语:Android Chrome)) (英语).
- **`maskable.png` (512x512) (中文(简体) )** —— Android 适应性图标(其中80%的安全区被烤入).
- **`favicon.ico`** – 对非常老旧的浏览器可选带并悬浮;我们不生成它,而是生成 `` 片段提到它是一个替代.
## `` 片断
```html
```
你不必记住这些.. `htmlTags()` 财务报告和审定财务报表 `defineFavicon().htmlTags()` 为你解开绳子.
## 国 际
```bash
# Interactive — picks a preset, writes public/favicon.svg + manifest + (optional) PNGs.
bn-favicon init
# Non-interactive, idempotent (asks before overwriting unless --force):
bn-favicon init --preset tabs --out public
# Render a preset to stdout:
bn-favicon render basenative > public/favicon.svg
# Print the recommended tags:
bn-favicon html --theme-color "#0C0B09"
# List presets:
bn-favicon list
```
若为 `@resvg/resvg-wasm` 已安装, `init` 还写 `apple-touch-icon.png`, (中文(简体) ), `icon-192.png`, (中文(简体) ), `icon-512.png`,以及 `maskable.png`。没有它,你只能得到 SVG 的设定,这对大多数网站都很好,直到你决定关心iOS家用屏幕图标为止,CLI打印出一条线来告诉你缺少什么以及如何安装它.
默认是名单 `name`编号 :`short_name` 使用预设的显示名(例如). `basenative` ——"BaseNative"). 过 `--name` 以覆盖或使用 `defineFavicon(...).manifest({ name: ... })` 在方案方面.
## 程序化 API
```js
import { defineFavicon } from "@basenative/favicon";
const fav = defineFavicon({
glyph: { kind: "monogram", text: "T", weight: 900, accentDot: true },
palette: { bg: "#0C0B09", fg: "#FFF3E0", accent: "#E8920A" },
shape: "rounded",
});
fav.svg; // — primary asset
fav.apple; // square variant (no rounding) for iOS rasterization
fav.maskable; // 80% safe-zone variant for Android adaptive icons
fav.htmlTags(); // string[] — drop into
fav.manifest({ name: "T4BS", themeColor: "#0C0B09" }); // JSON
```
您也可以直接通过一个预设名称 :
```js
defineFavicon("basenative"); // → uses the BaseNative house mark
```
## 预设
8个DuganLabs项目船预建. 使用它们,叉子,或者自己滚.
| 预设 | 格莱弗 | 形状 | 百分点 |
| --- | --- | --- | --- |
| `tabs` | 单克 **T级** +重音点 | 四舍五入 | `#E8920A` |
| `basenative` | 相接三角形 | 四舍五入 | `#E8920A` |
| `duganlabs` | 单克 **数字** | 屏蔽 | `#E8920A` |
| `pendingbusiness` | 符号——时钟 | 四舍五入 | `#4EAF7C` |
| `greenput` | 符号——叶 | 圆 | `#4EAF7C` |
| `warrendugan` | 单克 **W级** 编号 : **D级** 堆栈 | qui | `#E8920A` |
| `ralph-station` | sigil——车站标记 | 钻石 | `#5EA0E8` |
| `warren-sys` | 符号 — 终端提示 | 平方圆 | `#66E0A0` |
每个预设都转换成静态SVG `templates/favicons/.svg` 这样你就可以 `cp` 直接进入您的 `public/` 如果您不想安装运行时间 :
```bash
cp node_modules/@basenative/favicon/templates/favicons/tabs.svg public/favicon.svg
```
## 设计新预设
预设只是一个对象 :
```js
export const myproject = {
name: "myproject",
description: "A one-line description for CLI help",
glyph: { kind: "monogram", text: "MP", weight: 900, letterSpacing: -28 },
palette: { bg: "#0C0B09", fg: "#F0EDE4", accent: "#E8920A" },
shape: "rounded",
themeColor: "#0C0B09",
};
```
食谱——取出三个接头:
1. **格莱弗类型**
- `monogram` - 1 -3个字母。 键 : `text`, (中文(简体) ), `weight`, (中文(简体) ), `letterSpacing`, (中文(简体) ), `stack`, (中文(简体) ), `accentDot`。 。 。 .
- `symbol` ——取自所编集: `lightbulb`, (中文(简体) ), `leaf`, (中文(简体) ), `bolt`, (中文(简体) ), `key`, (中文(简体) ), `eye`, (中文(简体) ), `asterisk`, (中文(简体) ), `gear`, (中文(简体) ), `terminal-prompt`, (中文(简体) ), `calendar`, (中文(简体) ), `beaker`, (中文(简体) ), `clock`, (中文(简体) ), `anchor`。 。 。 .
- `sigil` - 抽象标记: `concentric-square`, (中文(简体) ), `intersecting-circles`, (中文(简体) ), `hex-grid`, (中文(简体) ), `signal-stack`, (中文(简体) ), `station-mark`。 。 。 .
- `wordmark` ——"相"中"相"中"相""相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相"相相"相"相"相"相"相"相"相"相相相"相"相"相相"相"相相"相"相"相"相相"相相"相"相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
2. **调色板** - 通过 `{ bg, fg, accent }`,或一六分(作为口音处理,与家用木炭配对). 这个 `fg` 自动从 `bg` 省去光线.
3. **形状** —— 说 `square`, (中文(简体) ), `rounded`, (中文(简体) ), `circle`, (中文(简体) ), `squircle`, (中文(简体) ), `shield`,或 `diamond`。形状的剪接通了胶片,可以将平方单体降入 `circle` 形状和角 得到修剪干净.
### 16x16测试
整点是 看起来像一个浏览器Tab favion。 将 SVG 显示为 `` 看看标签 如果它读作一个固态的blob,简化——少下下划线,更形成对比.
## 模块
| 路径 | 这是什么 |
| --- | --- |
| `@basenative/favicon` | 公共 API : `defineFavicon`, (中文(简体) ), `htmlTags`, (中文(简体) ), `presets`。 。 。 . |
| `@basenative/favicon/render` | `renderFaviconSvg`, (中文(简体) ), `shape`,可掩体+苹果变种. |
| `@basenative/favicon/glyphs` | Glyph 图书馆 —— `monogram`, (中文(简体) ), `symbol`, (中文(简体) ), `sigil`, (中文(简体) ), `wordmark`。 。 。 . |
| `@basenative/favicon/palette` | 颜色帮助器 - `resolvePalette`, (中文(简体) ), `mix`, (中文(简体) ), `luminance`。 。 。 . |
| `@basenative/favicon/manifest` | Web App Manifest 构建器. |
| `@basenative/favicon/png` | 可选 PNG 发光器( 可选分解 : `@resvg/resvg-wasm`) (中文(简体) ). |
| `@basenative/favicon/presets` | DuganLabs预设地图. |
## 许可证
阿帕奇-2.0 杜干拉布斯(英语:DuganLabs). 由 BaseNative 所建—— BaseNative.dev.
## 常见问题
### @basenative/favicon 是什么？
SVG- First favicon 生成器 \+ 设计原始相 — 苹果- 触角相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相
### 如何安装 @basenative/favicon？
在项目目录运行 npm install @basenative/favicon，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 bn-favicon，可以用 npx bn-favicon 直接运行。
### @basenative/favicon 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @basenative/favicon 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @basenative/favicon 可以商用吗？
@basenative/favicon 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。
### @basenative/favicon 的下载量有多少？
根据 npm 官方下载统计，@basenative/favicon 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,111 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @basenative/favicon 还在维护吗？
最新版本 3\.3\.0 发布于 2026/11/03（5 天前）；至今共发布 14 个版本，其中过去 12 个月发布了 14 个；首次发布于 2026/10/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。