# @cypress-design/favicon 中文文档

规范地址：https://npmcn.com/package/%40cypress-design/favicon/

版本：1\.0\.0
npm 元数据更新时间：2026-09-24T17:29:58.247Z
中文译文更新时间：2026-11-11T07:16:06.548Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cypress-design/favicon
原文对照：https://npmcn.com/package/%40cypress-design/favicon/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：180 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-09-24T17:29:57.089Z
- 最新版本发布：2026-09-24T17:29:57.727Z
- 近 30 天下载量：5086（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 1 个）

## 中文简介

Cypress favicon资产 和宣布它们的头标.

## 安装

```sh
npm install @cypress-design/favicon
```

也可以使用：`pnpm add @cypress-design/favicon`、`yarn add @cypress-design/favicon`、`bun add @cypress-design/favicon`

## README

# @ cypress-design/ favicon (英语)

Cypress favicon资产 和宣布它们的头标.

**大多数站点不应该直接安装.** 狦 `<head>` 由 Astro 提供,安装 `@cypress-design/vue-favicon` 或者说 `@cypress-design/react-favicon` 换句话说,每个都带来了这个包裹, 其图标文件及其复制命令。 仅在您头部安装此软件包 无法渲染组件: Docusaurus 插件、 EJS 模板、 或其他由服务器发送的 HTML . 完整文档: [法维孔](https://design.cypress.io/components/Favicon)。 。 。 .

## 为什么这是文件副本,不是导入

一个favicon从来没有进入文档。 浏览器将它作为独立的 URL 获取并涂入 它本身的染色体——标签条,书签,历史——通常在JavaScript捆绑存在之前. 因此与其它设计系统不同,这个包必须把真实的文件放入磁盘.

## 使用量

将资产复制到您网站静态服务的任何目录中, 作为建设前的步骤:

```jsonc
// package.json
{
  "scripts": {
    "prebuild": "cypress-favicon public", // `static` for Docusaurus
  },
}
```

然后宣布加分。 你使用的哪一种形式取决于你的头层接受什么——所有三种 从同一个来的 `FAVICON_LINKS` 阵列,所以它们不能相互异议.

### 天体

```astro
---
// use the build matching a framework your Astro config registers
import Favicon from '@cypress-design/vue-favicon'
// or, on a site whose Astro config registers React:
// import Favicon from '@cypress-design/react-favicon'
---
<head>
  <Favicon />
</head>
```

挑错的不仅仅是多余的。 Astro 向每个注册者查询后找到一个渲染器 反过来,和 `@astrojs/react`检查会丢入编译的 Vue 组件而不是返回 虚假 —— 所以在登录 React 的站点上有一个 Vue 组件 .

过 `links` 缩小清单的范围,例如,一个没有网络清单的网站:

```astro
<Favicon links={FAVICON_LINKS.filter((l) => l.rel !== 'manifest')} />
```

### 多龙

Docusaurus 插件注入对象而不是标记,所以没有组件可以渲染:

```js
const { faviconHeadTags } = require('@cypress-design/favicon')

module.exports = async function favIcon() {
  return {
    name: 'docusaurus-plugin-favicon',
    injectHtmlTags: () => ({ headTags: faviconHeadTags() }),
  }
}
```

### EJS 和服务器上的其他 HTML

```ejs
<head>
  <%- faviconLinksHtml() %>
</head>
```

EJS模板取一个字符串. 这也是在没有 JavaScript 的页面上工作的唯一形式 全部——服务器发送的页面没有 `<script>` 标记没有组件可以装入.

### 为什么不到处都有一个组件

该部分使 `<link>` 元素,所以它需要一个框架,在 `<head>` 已经建成。 阿斯特罗有 一个 Docusaurus 插件在任何组件树之前将描述符交回 已存在,且 EJS 模板没有组件运行时间。 客户端反应组件 _能够_ 到达 水合后头部,但在初始的 HTML 解析中会取出一个外形- 所以在稍后插入它 表示浏览器已要求 `/favicon.ico` 继续前进.

## 故意缺了两件事

没有 `rel="icon"` 条目 `favicon.ico`,没有 `rel="mask-icon"` 一点也不.

## 哈里发国规则

`FAVICON_LINKS` 故意包含 **没有 `rel="icon"` 条目 `favicon.ico`。 。 。 .**

以Chrome 153和Safari 26.5衡量:当一个哈里发国被宣布时,它战胜了SVG 引擎无论大小 `sizes` 或文档命令,而Chrome甚至不下载SVG. 这个 广泛复制 `<link rel="icon" href="/favicon.ico" sizes="any">` 线条是 _防止_ 页:1 适应性的图标从被使用, 而不是什么使得它.

哈里发国号仍然被运出并服役. 想要的客户 26岁前的Safari 爬行者, unfurlers, RSS 读取器——请求 `/favicon.ico` 从原生根通过常规,不读 你的标记。 将文件保存在根上,不申报.

## 盒子里的东西

| 文件 | 用于 |
| --- | --- |
| `favicon.svg` | Chrome, Edge, Firefox – 适应光/暗通过 `prefers-color-scheme` |
| `favicon.ico` | 26岁前的Safari,爬行者,未起行者. 真正的哈里发国集装箱,16/24/32/48/64 |
| `apple-touch-icon.png` | iOS家用屏幕. 180x180, 无α |
| `android-chrome-*.png` | 机器人和安装的PWA,通过清单 |

哈里发国从烤出 **阴暗** 与填充的海军光碟的变体。 它不能适应,所以它必须 一个在灯光或暗色标签条上生存的图像——一个被填充的光碟给出了自己的文字标记 不论背景如何.

Safari 26 使 SVG 变得轻而易举 变种. 这是可以辨认的, 只是不与克洛姆相同.

## 地方发展

`exports` 点数 `dist/`,因此一个链接的消费者看到了已建的输出,而不是源. 后重建 编辑 :

```sh
yarn workspace @cypress-design/favicon build
```

## 为什么没有面具

萨法里需要平面单色 `safari-pinned-tab.svg` safari 9(2015年)的被贴标签. Safari 12(2018年)开始使用那里普通的favicon,从没有要求过它 从那以后 在Safari26.5中验证的惰性:一个被钉住的标签使全色的外观无论是否 标记被宣布。 苹果公司对其的指导被存档 苹果.com不再发货.

请注意,Safari使 `favicon.svg` 但总能解决 **光线**在两种外表中 - 所以 a Safari 暗模式标签显示光变体,而Chrome和Firefox显示为暗变体.

## 常见问题

### @cypress-design/favicon 是什么？

Cypress favicon资产 和宣布它们的头标\.

### 如何安装 @cypress-design/favicon？

在项目目录运行 npm install @cypress-design/favicon，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 cypress-favicon，可以用 npx cypress-favicon 直接运行。

### @cypress-design/favicon 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cypress-design/favicon 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cypress-design/favicon 可以商用吗？

@cypress-design/favicon 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cypress-design/favicon 的下载量有多少？

根据 npm 官方下载统计，@cypress-design/favicon 在 2026/10/11 – 2026/11/09 这 30 天内被下载 5,086 次，日均约 170 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cypress-design/favicon 还在维护吗？

最新版本 1\.0\.0 发布于 2026/09/25（1 个月前）；至今共发布 1 个版本，其中过去 12 个月发布了 1 个；首次发布于 2026/09/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。