要删除 React 项目的默认图标,使在浏览器中不显示默认图标favicon.ico,其实有两种方法:
方法一
方法要点:删除掉 public
目录下的 favicon.ico
文件,再用浏览器访问时,如果加载不到图标文件,就会不显示默认的react图标
删除 public
目录中的 favicon.ico
文件
React 项目的默认图标(favicon)是通过 public
目录下的 favicon.ico
文件来引用的。
- 路径:
public/favicon.ico
直接删除这个文件即可。
方法二
方法要点: 把favicon改成一个不存在的文件,再用浏览器访问时,就会加载不到,就会不显示默认的react图标
修改 public/index.html
中的 favicon
引用
打开 public/index.html
,查找类似以下的代码:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
修改成一个不存在的文件:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico222" />
但此时通常你再访问浏览器,还会看到之前的默认图标。。此时,需要你清除浏览器缓存
如何清除浏览器缓存
删除图标后,浏览器可能仍然缓存了旧的 favicon 图标。你可以通过以下方法来强制浏览器刷新 favicon:
- 清除浏览器缓存。
- 在开发模式下,按
Ctrl + F5
强制刷新页面。 - 使用隐私模式启动浏览器。
接下来,去访问chrome,竟然还是之前的图标,此时,不是因为public下的其它图标文件(logo192.png,logo512.png),也不是因为public/manifest.json里的icons配置,也不是因为src/logo.svg。而是因为chrome浏览器的本地缓存文件。
Chrome的本地缓存文件有哪些要删除
需要到对应的目录下删除一些文件:
C:\Users\xx\AppData\Local\Google\Chrome\User Data\Default
下面有两个相关的文件:
Favicons-journal
Favicons
我这里,再次访问,竟然还是之前的图标。。又查了一下,发现,只要把下面这两个目录下面的Favicons-journal和Favicons删掉,就可以了。
C:\Users\xx\AppData\Local\Google\Chrome\User Data\Default
C:\Users\xx\AppData\Local\Google\Chrome\User Data\Profile 1
C:\Users\xx\AppData\Local\Google\Chrome\User Data\Profile 2
之后,再访问就不会显示默认图标favicon.ico了
补充说明
此时,请求不存在的favicon.ico222时,竟然还返回200了。这个是由于查找不到这个文件,已经改为请求/了,这样,就相当于请求了localhost的html,所以,它的文件类型也变成了txt/html。
其实,还有其它方法可以去除默认图标的显示,不要删除图标文件的。
方法三
方法要点:修改index.html中的图标链接,而不需要删除图标文件的。
去除favicon.ico,可以如下修改index.html中的图标链接:
<link rel="icon" href="data:;">
或者这样
<link rel="icon" href="javascript:;">
补充说明
删除掉 public/index.html
中的 favicon
引用时的图标表现
删除掉 public/index.html
中的 favicon
引用时,但 public
目录下仍然保留 favicon.ico
文件,这时候,使用chrome浏览器仍然可以加载到默认图标favicon.ico
。估计这是react项目的一个默认设定,当配置favicon时,使用默认图标。
删除或注释掉这一行:
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
参考资料:
https://www.jianshu.com/p/b8337a13f152
https://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html
https://blog.csdn.net/qq_42813491/article/details/104004541