React项目favicon设置方法

React是流行的前端框架,新建的React项目默认使用React官方favicon,需要替换成自己的图标。本文详解React项目favicon设置方法。

方法一:Create React App设置favicon

CRA项目结构中,public目录存放静态资源:

1. 用图捷智转把logo转成favicon.ico
2. 替换public/favicon.ico文件
3. 如果文件名不同,修改public/index.html
4. 找到<link rel="icon" href="%PUBLIC_URL%/favicon.ico">
5. 修改href为你的favicon路径
6. 重新运行npm start即可看到效果

方法二:Next.js项目设置favicon

Next.js 13+推荐使用app目录:

1. 把favicon.ico放在app/目录下
2. Next.js会自动识别并添加HTML引用
3. 也可以准备icon.png放在app/目录
4. 支持apple-icon.png用于iOS设备

老版本Next.js放在pages/或public/目录:

1. 把favicon.ico放在public/目录
2. 修改pages/_document.tsx或_layout.tsx
3. 添加link标签引用favicon

方法三:Vite React项目

1. 把favicon.ico放在public/目录
2. 修改index.html中的favicon引用
3. <link rel="icon" href="/favicon.ico">

React favicon设置注意事项

• 构建后favicon路径会变化,使用%PUBLIC_URL%或绝对路径
• PWA应用需要配置manifest.json中的icons
• 建议同时准备apple-touch-icon.png
• favicon.ico包含多尺寸最佳

需要制作favicon和apple-touch-icon时,使用图捷智转PNG转ICO在线工具,一次生成所有需要的图标文件。