DEV Community
·
如何在 Next.js 中正确添加 favicon
原文英文，约500词，阅读约需2分钟。
📝
内容提要
Next.js 允许将 favicon.ico 放入 src/app 文件夹以便捷支持图标。为确保在所有平台上良好显示，建议使用 RealFaviconGenerator 上传 SVG 格式 logo，调整背景等细节，生成适用于 iOS 和 Android 的图标文件，并提供配置步骤。
🎯
关键要点
-
Next.js 允许将 favicon.ico 放入 src/app 文件夹以便捷支持图标。
-
建议使用 RealFaviconGenerator 上传 SVG 格式 logo，以确保在所有平台上良好显示。
-
生成适用于 iOS 和 Android 的图标文件，并提供配置步骤。
-
RealFaviconGenerator 的 favicon 编辑器提供选项以适应不同平台的图标需求。
-
iOS 对透明触控图标应用黑色背景，需特别注意。
-
RealFaviconGenerator 不利用 Next.js 的 favicon 约定，需将图标存储在 public 目录中。
-
尽管 Next.js 提供良好的 favicon 支持，但缺少按平台定制图标的能力。
-
使用 RealFaviconGenerator 可以快速生成所需的 favicon 文件。
❓
延伸问答
如何在 Next.js 中添加 favicon？
将 favicon.ico 文件放入 src/app 文件夹即可。
使用 RealFaviconGenerator 有什么好处？
它可以快速生成适用于不同平台的 favicon 文件，并提供配置步骤。
iOS 的触控图标需要注意什么？
iOS 对透明触控图标应用黑色背景，需要特别注意。
Next.js 对 favicon 的支持有哪些限制？
Next.js 缺少按平台定制图标的能力，且不处理 Web manifest 中声明的图标。
如何确保 favicon 在所有平台上良好显示？
使用 RealFaviconGenerator 的编辑器调整图标背景等细节。
如何检查 favicon 是否正确配置？
运行命令 npx realfavicon check 3000 来检查配置是否正确。
🏷️
