React 的网站图标
React 不会为您渲染 <head> - 图标位于 index.html 中。将您的 favicon.ico 放入 /public 并链接它；现代设置还提供 SVG 和 PNG 变体。
Vite 和 CRA 都在根服务 /public，因此 /favicon.ico 是默认发现路径。无需捆绑器配置。
对于高 DPI 显示器和 PWA 安装提示，请将 180×180 apple-touch-icon 和 512×512 PNG 添加到 /public 并在 index.html 中链接它们。
工作原理
- 1
生成多尺寸 .ico
使用我们的图标生成器和 512×512 源。
- 2
放入 /public
将 favicon.ico、favicon.svg 和 apple-touch-icon.png 放置在那里。
- 3
链接在index.html
添加 <link rel="icon" href="/favicon.ico"> 和 <link rel="icon" type="image/svg+xml" href="/favicon.svg">。
立即尝试
构建 React 就绪的图标
Favicon 生成器常见问题
Vite React 应用程序中的图标位于何处？+
/public/favicon.ico（如果您想要矢量变体，则为 /public/favicon.svg）。
如何添加暗模式图标？+
使用带有 <style>@media (prefers-color-scheme: dark) {...}</style> 块的单个 SVG。
为什么我的网站图标无法加载到开发中？+
硬刷新选项卡。即使在重新加载时，浏览器也会按源缓存 /favicon.ico。