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

要删除 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.mzph.cn/pingmian/59349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络——路由器构成

算路由表是分布式去算——你算你的&#xff0c;我算我的 输出队列非先来先传 调度发生在哪里 缓存队列一般是应对——来数据方向的速度过快问题

项目活动进度计算题

六个时间参数①最早开始时间ESmax{紧前工作最早完成时间EF}&#xff08;紧前取大&#xff09; 最早完成时间EFES工期&#xff0c;从左→右计算&#xff0c;累加取大 ②最迟完成时间LFmin{紧后工作最迟开始时间LS}&#xff08;紧后取小&#xff09; 最迟开始时间LSLF-工期&am…

练习LabVIEW第四十题

学习目标&#xff1a; 用labvIEW做一个循环闪烁指示灯&#xff0c;要能够在前面板调节周期和占空比。 开始编写&#xff1a; 前面板 一个布尔指示灯一维数组&#xff0c;两个数值输入控件&#xff1b; 程序框图 添加一个while循环&#xff0c;循环内添加初始化数组&…

工商业储能是什么,工商业储能有什么作用?

随着全球能源结构的转型和“双碳”目标的推进&#xff0c;工商业储能系统作为新型电力系统的重要组成部分&#xff0c;正逐渐成为能源管理和电力市场的关键力量。工商业储能系统通过削峰填谷、需量管理、电力现货交易等多种方式&#xff0c;不仅能够有效降低企业的用电成本&…

DApp开发定制:合约设计与源码搭建支持快速上线

随着区块链技术的飞速发展&#xff0c;去中心化应用&#xff08;DApp&#xff09;已经成为区块链生态中不可或缺的一部分。DApp不仅改变了传统互联网应用的运作方式&#xff0c;还通过去中心化的理念和智能合约的支持&#xff0c;赋能了用户和开发者。无论是金融、游戏、社交、…

ssm+vue683基于VUE.js的在线教育系统设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…

CentOS操作系统安装过程简介

以下是在CentOS&#xff08;以CentOS 7为例&#xff09;中使用Anaconda安装器的一般步骤&#xff1a; 1. 准备工作 - 首先&#xff0c;需要获取CentOS 7的安装介质&#xff0c;可以是光盘或者制作好的USB启动盘。然后将计算机设置为从对应的安装介质启动。 2. 启动安装程序 -…

导出 MySQL 中所有表的结构(包括外键约束),并在另一个地方创建相同的表

要导出 MySQL 中所有表的结构&#xff08;包括外键约束&#xff09;&#xff0c;并在另一个地方创建相同的表&#xff0c;您可以使用以下步骤&#xff1a; 1. 使用 mysqldump 导出表结构 mysqldump 是一个用于备份 MySQL 数据库的命令行工具&#xff0c;可以用来导出数据库的…

纯前端生成PDF(jsPDF)并下载保存或上传到OSS

前言 在工作中遇到了一个需求&#xff0c;就是把前端页面生成PDF并保存在本地&#xff0c;因为前端网站可能会展示各种表格&#xff0c;图表信息内容并带有比较鲜艳的色彩样式&#xff0c;如果让后端生产的PDF的话样式可能和前端页面展示的有所差异&#xff0c;所以这个任务就落…

多商户电商平台开发指南:基于直播带货系统源码的搭建方案详解

本篇文章&#xff0c;小编将详细解析如何利用直播带货系统源码&#xff0c;快速搭建一套多商户电商平台的解决方案。 一、直播带货系统在多商户电商平台中的应用价值 在多商户电商平台中&#xff0c;直播带货系统可以帮助商家&#xff1a; 1.增加用户互动 2.提升转化率 3.…

登录功能设计(php+mysql)

一 登录功能 1. 创建一个登录页面&#xff08;login.php&#xff09;&#xff0c;包含一个表单&#xff0c;用户输入用户名和密码。 2. 在表单的提交事件中&#xff0c;使用PHP代码处理用户输入的用户名和密码。 3. 首先&#xff0c;连接MySQL数据库。然后&a…

P3-1.【结构化程序设计】第一节——知识要点:算法、顺序结构程序设计、if语句的语法结构及各种用法

讲解视频&#xff1a; P3-1.【结构化程序设计】第一节——知识要点&#xff1a;算法、顺序结构程序设计、if语句的语法结构及各种用法 知识要点&#xff1a;算法、顺序结构程序设计、if语句的语法结构及各种用法 一、算法、顺序结构程序设计任务分析 知识要点&#xff1a;算法…

18、论文阅读:AOD-Net:一体化除雾网络

AOD-Net: All-in-One Dehazing Network 前言介绍相关工作物理模型传统方法深度学习方法 建模与扩展变换后的公式网络设计与高级特征任务相结合 除雾评价数据集和实现 前言 该论文提出了一种基于卷积神经网络&#xff08;CNN&#xff09;的图像去雾模型&#xff0c;称为 All-in…

Golang | Leetcode Golang题解之第538题把二叉搜索树转换为累加树

题目&#xff1a; 题解&#xff1a; func getSuccessor(node *TreeNode) *TreeNode {succ : node.Rightfor succ.Left ! nil && succ.Left ! node {succ succ.Left}return succ }func convertBST(root *TreeNode) *TreeNode {sum : 0node : rootfor node ! nil {if n…

docker+nacos

安装数据库 以docker安装为例&#xff08;实际建议实体&#xff09; 初始化数据库 /******************************************/ /* 数据库全名 nacos_config */ /* 表名称 config_info */ /******************************************/ CREATE TABLE config_i…

react18中redux-promise搭配redux-thunk完美简化异步数据操作

用过redux-thunk的应该知道&#xff0c;操作相对繁琐一点&#xff0c;dispatch本只可以出发plain object。redux-thunk让dispatch可以返回一个函数。而redux-promise在此基础上大大简化了操作。 实现效果 关键逻辑代码 store/index.js import { createStore, applyMiddlewar…

python批量合并excel文件

当工作中发现有多个excel表需要进行相同的操作或者需要汇总在一起&#xff0c;一个一个处理太费时间&#xff0c;以下的python代码能够帮你解决这个问题~ import pandas as pd import os# 设置Excel文件所在的文件夹路径和合并文件的输出路径 folder_path D:\\Desktop\\dat…

Qt中弹出窗口的实现与鼠标事件处理

在 Qt 开发中&#xff0c;弹出窗口&#xff08;Popup Window&#xff09;是一个常见的需求&#xff0c;例如下拉菜单、工具提示等。在实现弹出窗口时&#xff0c;我们通常会考虑使用 Qt::Popup 窗口类型&#xff0c;因为它可以自动处理许多细节&#xff0c;例如窗口的显示和关闭…

汇编语言与接口技术--算术运算程序设计

一、 实验要求 编程实现两个数&#xff1a;#998877H 和 #778899H 的加法运算。编程实现两个数&#xff1a;#998877H 和 #778899H 的减法运算。 二、 实验设计 1.整体思路 无符号角度&#xff1a; &#xff08;1&#xff09;加法 1.初始化&#xff1a;设置两个数 998877H 和…

(蓝桥杯C/C++)——基础算法(上)

目录 一、二分法 1.二分法简介 二分法简介-解题步骤 2.整数二分-简介 整数二分-模板 3.浮点二分-简介 浮点二分-模板 4.二分答案-简介 二分答案-模板​​​​​​​ 二、位运算 1.位运算简介 2.常见的位运算 按位与AND(&) 按位或OR( | ) 按位异或…