Frameworks
最适合 React 的 Favicon 生成器
一个纯 React 应用（Vite 或 Create React App）没有内建的图标约定。你把文件放进 public 文件夹,并自己在 index.html 里写 link 标签。合适的生成器把两者都交给你,让你无需靠猜。
在 React 上真正重要的是什么
React 本身不会替你在文档 head 里渲染任何东西。图标存在 public 文件夹里,并在 index.html 里声明,所以生成器必须既产出文件、也产出要粘贴的确切标签。一个只给你图像却不给标记的工具,恰恰把真正会出问题的那一半留给了你。
常见的失败是只有一个 favicon.ico、别的都没有,它覆盖了桌面标签页,却把 iOS 和 Android 留在各自的回退上。完整的一套外加匹配的标签,才是让图标在它该出现的每个地方都出现的东西。
在 React 上重要的评判标准
| 该看什么 | 为什么它在 React 上重要 | 这里的生成器如何做到 |
|---|---|---|
| 文件加标签 | React 不替你在 head 里声明任何东西 | 导出 public 文件夹的文件,以及要粘进 index.html 的标签 |
| 完整的尺寸集 | 只有一个 ICO 会把移动端留在回退上 | favicon.ico、每一种 PNG、apple-touch 和 Android 尺寸 |
| 包含 manifest | PWA 安装从 manifest 读取图标 | 附带 manifest.json,已接好导出的各个尺寸 |
| Vite 或 CRA | 两者提供 public 资源的方式相同 | 指引对 Vite 和 Create React App 同样适用 |
真正的生成器 vs 单个 favicon.ico
完整的一套外加标签
Start here推荐
- 从 16px 标签页到 512 安装图标,每种尺寸都有
- 要粘贴的确切 link 和 manifest 标签
- apple-touch 图标,所以 iOS 主屏幕也被覆盖
- manifest.json 已为 Android 和 PWA 安装接好
只丢一个 favicon.ico 进去
- 覆盖桌面标签页,仅此而已
- iOS 在主屏幕上回退成一张截图
- Android 安装显示一个通用图标
- 没有 manifest,所以 PWA 提示看起来没做完
在 React 应用里 favicon 文件放哪里？
放进 public 文件夹,由 index.html 里的 link 标签引用。Vite 和 Create React App 都不替你注入图标标记,所以生成器必须把文件和标签一起给你。public 里的文件从站点根路径提供,所以像 /favicon.ico 这样的标签能直接解析。
The step-by-step for React
You've picked the tool. Here's the exact install for React.