如何修改create-react-app项目的默认logo（含网站标签页图标）

ico与png格式的区别 #

• .ico 是浏览器默认优先识别的网站标签栏图标格式，单个文件可存储多种尺寸的图标，适配不同设备的显示要求，兼容性最好
• .png 是通用无损压缩图片格式，现代浏览器均支持直接作为favicon使用，制作门槛低、文件体积更小，适合常规场景使用

具体操作步骤 #

1. 导入图标到项目 #

在VS Code左侧资源管理器中找到项目根目录下的public文件夹，两种方式导入你的目标图标：

• 右键点击public文件夹，选择「将文件添加到文件夹」，选中本地准备好的图标文件确认即可
• 直接把本地的图标文件拖放到VS Code中public文件夹的层级下
  注意：图标必须放在public目录，不要放到src目录下，否则html无法直接引用

2. 修改图标引用配置 #

打开public文件夹下的index.html文件，找到头部默认的favicon引用代码：

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

根据你使用的图标格式调整即可：

• 如果你用的是ico格式：直接把你自己的ico文件命名为favicon.ico覆盖原文件即可，不需要修改代码
• 如果你用的是png格式：把上述代码的文件名改成你自己的png文件名即可，示例：

<link rel="icon" href="%PUBLIC_URL%/自定义的图标文件名.png" />

3. 验证生效 #

保存所有修改后，重启本地开发服务，打开浏览器清空缓存刷新页面，就能看到标签栏的默认蓝色原子图标已经替换为你自定义的图标。

可选优化：如果需要适配苹果设备添加到桌面的图标，可以在index.html头部额外添加一行配置：

<link rel="apple-touch-icon" href="%PUBLIC_URL%/自定义的图标文件名.png" />

内容的提问来源于stack exchange，提问作者Victor