法维孔

安装

yarn add @cypress-design/vue-favicon

这是你唯一需要的包裹 它带来图标文件、链接数据和复制命令 带着它.

当您的 Astro 配置记录 Vue 时使用此构建 。 这个 react-favicon 建筑造型相同 用于注册的站点的标记 挑一个建筑 下面是为什么选择 问题.

复制图标文件

在 JavaScript 运行之前, 浏览器会将一个 favicon 取为简单的 URL, 因此图标文件 必须在您网站的静态目录中存在 。 添加副本为预建步骤 :

{
  "scripts": {
    "prebuild": "cypress-favicon public"
  }
}

标记

---
import Favicon from '@cypress-design/vue-favicon'
---
<head>
  <Favicon />
</head>

组件为服务器 : Astro inlines plain <link> 没有 JavaScript 元素和船舶 对于它.

缩小标签列表

过 links 当您的网站只运送部分地表时, 例如, 一个没有网络的网站 显示 :

---
import Favicon, { FAVICON_LINKS } from '@cypress-design/vue-favicon'
---
<Favicon links={FAVICON_LINKS.filter((l) => l.rel !== 'manifest')} />