按平台划分的 favicon

Next.js 通过文件而不是手写的 link 标签来解析图标。把正确命名的文件放进正确的目录，框架就会替你生成对应的标记。

React 从不碰文档的 head。你的图标 link 要放进 HTML 外壳里，而具体是哪个文件，取决于项目是用 Create React App 还是 Vite 搭建的。

一个 Vue 单文件组件无法把 link 标签渲染进 head。图标在 index.html 中声明——它在 Vite 下位于项目根目录，在 Vue CLI 下位于 public/。

Angular 只有在构建配置这么要求时才会复制静态文件。一个没有被 angular.json 中 assets 条目匹配到的文件，无论你把它放在项目的哪里，都进不了 dist/。

SvelteKit 会把 static/ 里的所有东西复制到构建的根目录，而文档外壳是 src/app.html 而不是一个组件。图标标签属于那里，这样它们才能在任何 JavaScript 运行之前就出现在提供的 HTML 里。

Nuxt 默认会把一个指向 /favicon.ico 的 link 注入每个页面，所以新项目在你把文件放进 public/ 之前会为它记录一次 404。其余的图标在 nuxt.config 的 app.head 块里声明。

Vite 与众不同之处在于它把 index.html 当作源码而非静态资源：它位于项目根目录，并在构建时被改写。public/ 里的所有东西都会被原样复制到输出根目录。

Astro 会处理并给从 src/ 导入的资源加指纹，而把 public/ 原样复制到构建输出。图标需要稳定的文件名，所以它们放进 public/，并从一个 layout 里链接。

Gatsby 是这里唯一替你生成整套图标的技术栈。gatsby-plugin-manifest 会取一张在 gatsby-config.js 里指定名字的源图片，在构建时生成各种尺寸、web app manifest 以及 link 标签。

Hugo 会把 static/ 复制到已发布站点的根目录，但 head 标记属于你所安装的那个主题。诀窍在于从你自己的项目里覆盖主题的 partial，而不是编辑 themes/ 下的文件。

WordPress 不需要你准备一整个文件夹的图标文件。你只要上传一张方形图片作为站点图标（Site Icon），核心就会把它裁剪成所提供的各种尺寸，并把 link 标签打进每个页面。

在 Shopify 上，favicon 是一个由图片 CDN 支撑的主题设置，而不是你放到服务器上的文件。由主题决定渲染哪些标签，而大多数主题只渲染一个。

Squarespace 把 favicon 称作浏览器图标（browser icon），它是在站点设置里上传的一张方形图片。这里没有文件系统、没有可编辑的模板，所以那一次上传就是你能得到的大部分。

Wix 把自定义 favicon 绑定在带有已连接域名的付费套餐上。一个仍在 wix.com 子域名上的站点，无论你上传什么，显示的都是 Wix 自己的图标。这里没有文件系统，也没有可编辑的 head。