@ cypress-design/ favicon (英语)

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

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

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

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

使用量

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

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

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

天体

---
// 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 缩小清单的范围,例如,一个没有网络清单的网站:

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

多龙

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

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

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

EJS 和服务器上的其他 HTML

<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 从原生根通过常规,不读 你的标记。 将文件保存在根上,不申报.

盒子里的东西

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

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

地方发展

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

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显示为暗变体.