如何删除react项目的默认图标,使在浏览器中不显示默认图标favicon.ico

devtools/2024/11/7 10:12:59/

要删除 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。
请求不存在的favicon.ico222时


其实,还有其它方法可以去除默认图标的显示,不要删除图标文件的。

方法三

方法要点:修改index.html中的图标链接,而不需要删除图标文件的。

去除favicon.ico,可以如下修改index.html中的图标链接:

<link rel="icon" href="data:;">

设置成href="data:;"时,不会加载图标

或者这样

<link rel="icon" href="javascript:;">

设置成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" /> -->

删除掉 public/index.html 中的 favicon 引用时
删除掉 public/index.html 中的 favicon 引用时,从浏览器访问可以展示默认图标

参考资料:
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


http://www.ppmy.cn/devtools/131700.html

相关文章

TrafficPeak | TB级云原生数据平台释放全新洞察力

Hydrolix是一款专为TB级工作负载设计的云原生数据平台&#xff0c;旨在消除现有解决方案中广泛存在的数据焦虑、技术障碍和限制等问题&#xff0c;为用户提供不受限制的实时可观察性。 最近&#xff0c;Hydrolix与Akamai联手&#xff0c;基于Akamai Connected Cloud提供完全托管…

AutoCAD2024

链接: https://pan.baidu.com/s/1TkUVIlwPUNef2o_KRP8VVg 提取码: 3yg2 简介&#xff1a;仅支持Win10/Win11、1909以上系统

Python 线程学习知识大全

一、Python 线程简介 线程是操作系统能够进行运算调度的最小单位&#xff0c;在 Python 中&#xff0c;threading模块提供了对线程的支持。使用线程可以实现并行和并发执行任务&#xff0c;从而提高程序的效率。 二、Python 线程不用 join() 以下是一个没有使用join()的示例…

LINUX离线安装Milvus

一.下载安装包 离线安装Docker需要你提前下载Docker的安装包&#xff0c;并将其传输到目标机器上进行安装。以下是一个基于Linux系统的离线安装Docker的简要步骤和示例&#xff1a; 从有网络的机器上下载Docker安装包。 将下载的安装包拷贝到离线的服务器上。 在离线的服务…

随机性、熵与随机数生成器:解析伪随机数生成器(PRNG)和真随机数生成器(TRNG)

随机性在诸多领域中扮演着至关重要的角色,涵盖密码学、仿真和机器学习等方面。因为随机性为无偏决策、不可预测序列和安全加密提供了基础。然而生成随机数是一项复杂的任务,理解伪随机数生成(pseudo-random number generation, PRNG)与真随机数生成(true random number generat…

【ESP32+MicroPython】单位数码管使用

在本教程中&#xff0c;我们将使用ESP32和MicroPython来驱动一个带小数点的单位数码管&#xff08;7段显示器&#xff09;。将详细讲解数码管的工作原理&#xff0c;并分步骤完成从基本的段位控制到完整的数字显示&#xff0c;最后封装成可重用的控制类。同时&#xff0c;本文将…

第一章 Linux安装 -- 安装Debian 12操作系统(四)

文章目录 2.3.4 安装Debian 12操作系统 2.3.4 安装Debian 12操作系统 虚拟机的创建参照前面2.3.1.3节里的步骤创建&#xff0c;这里不再详述。 下面就开始安装Debian 12系统了&#xff0c;单击“开启此虚拟机”&#xff0c;如图1-161虚拟机主界面。 图1-161 虚拟机主界面 弹…

微服务架构面试内容整理-微服务架构的定义及优势

微服务架构是一种软件架构风格,它将应用程序构建为一组小的、独立的服务,每个服务围绕特定的业务功能进行开发和部署。每个微服务都可以独立运行、独立部署,并通过轻量级的通信机制(如 HTTP/REST、gRPC 或消息队列)进行交互。 微服务架构的优势: 1. 独立性: 每个微服务…