当前位置: 首页 > news >正文

如何删除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

相关文章:

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

要删除 React 项目的默认图标&#xff0c;使在浏览器中不显示默认图标favicon.ico&#xff0c;其实有两种方法&#xff1a; 方法一 方法要点&#xff1a;删除掉 public 目录下的 favicon.ico 文件&#xff0c;再用浏览器访问时&#xff0c;如果加载不到图标文件&#xff0c;就…...

【React】react-app-env.d.ts 文件

在使用 create-react-app 生成的 TypeScript 项目模板中&#xff0c;react-app-env.d.ts 文件的作用是为 React 应用中的全局变量和类型进行声明。 全局类型声明&#xff1a;react-app-env.d.ts 文件会引入 react-scripts 提供的全局类型定义&#xff0c;这些类型定义扩展了 Ty…...

设计模式讲解01-建造者模式(Builder)

1. 概述 建造者模式也称为&#xff1a;生成器模式 定义&#xff1a;建造者模式是一种创建型设计模式&#xff0c;它允许你将创建复杂对象的步骤与表示方式相分离。 解释&#xff1a;建造者模式就是将复杂对象的创建过程拆分成多个简单对象的创建过程&#xff0c;并将这些简单…...

wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 wflow-web是一个开源的工作流设计器&#xff0c;它支持可视化拖拽表单组件&#xff0c;动态任意层级结构审批节点&#xff0c;以及复杂流程条件的设置…...

Promise 简单介绍及深入挖掘

一、什么是 Promise&#xff1f; 在 JavaScript 中&#xff0c;Promise 是用于处理异步操作的一种方式。它代表了一个 可能 在将来某个时间点完成或失败的操作的结果。Promise 使得我们能够优雅地处理异步代码&#xff0c;避免了回调地狱&#xff08;Callback Hell&#xff09;…...

103 - Lecture 1

Introduction to Database 一、Introduction to Database Systems 1. 数据的定义 What is Data? EX: data could be a docx file storing your project status report; data could be a spreadsheet containing information • 数据只有在设计的场景中才有意义。&#xff…...

Ubuntu 20.04禁用或者移除 cloud-init

1、禁用cloud-init 这是最简单最安全的方法&#xff0c;在 /etc/cloud 目录下创建 cloud-init.disabled 文件重启后生效。删除该文件就可以恢复 # 创建cloud-init.disabled文件 sudo touch /etc/cloud/cloud-init.disabled # 重启 reboot 2、移除 cloud-init 软件包及文件夹…...

DevOps开发运维简述

DevOps平台是一套集成的解决方案&#xff0c;旨在协调软件开发&#xff08;Development&#xff09;和信息技术运维&#xff08;Operations&#xff09;。它促进跨功能团队合作&#xff0c;实现自动化流程&#xff0c;确保持续集成与持续交付&#xff08;CI/CD&#xff09;。 一…...

C++之list的使用

在C中&#xff0c;std::list 是一个双向链表&#xff0c;它允许在列表的任何位置高效地插入和删除元素。以下是一些基本的使用方式&#xff1a; 包含头文件 要使用 std::list&#xff0c;首先需要包含头文件 <iostream> 和 /list>。 #include <iostream> #in…...

nginx配置代理地址

1&#xff0c;配置19上的代理 location /jmis/ { alias D:/images/; autoindex on; sendfile on; } 2.在18服务器上访问19的图片。18服务器nginx代理 proxy_set_header 指令用于在发送给后端服务器的请求中添加或修改指定的HTTP头信息。 proxy_p…...

国际版JAVA同城打车源码同城服务线下结账系统源码适配PAD支持Android+IOS+H5

一、数据中心 总用户数今日接单数量今日新增今日收入本月新增本月收入本年新增本年收入 二、用户中心 全部用户普通用户师傅用户推广员用户 三、财务中心 提现管理收入统计提现统计充值统计充值记录保证金管理平台收入统计 四、首页装修 轮播图分享图语音播报配置 五…...

AndroidLab:一个系统化的Android代理框架,包含操作环境和可复现的基准测试,支持大型语言模型和多模态模型。

2024-10-31&#xff0c;由清华大学和北京大学共同创建的AndroidLab数据集&#xff0c;为安卓自主代理的训练和评估提供了一个包含操作环境、行动空间和可复现基准的系统框架&#xff0c;这对于推动安卓代理技术的发展具有重要意义。 数据集地址&#xff1a;Android Instruct|A…...

Java--正则表达式入门指南

正则表达式&#xff08;Regular Expression&#xff09;是一种用于匹配字符串中字符模式的工具。在Java中&#xff0c;正则表达式的使用主要依赖于java.util.regex包&#xff0c;其中最重要的两个类是Pattern和Matcher。今天将探讨正则表达式的基础概念、书写规则、常用方法&am…...

阿里云服务器 篇十(加更二):自动定时备份CSDN博客内容:更新文件最后修改时间,以在个人博客正确展示最近更新

文章目录 系列文章核心修改更新后的核心代码使用方法系列文章 阿里云服务器 篇一:申请和初始化 阿里云服务器 篇二:搭建静态网站 阿里云服务器 篇三:提交搜索引擎收录 阿里云服务器 篇四:404页面模板 阿里云服务器 篇五:短链服务网站 阿里云服务器 篇六:GitHub镜像网站 …...

Python编程探索:从基础语法到循环结构实践

文章目录 前言1. 行与缩进&#xff1a;Python代码的灵魂2. 数据类型的转换&#xff1a;灵活处理数据3. 字符串切片&#xff1a;提取字符串的子部分4. 字符串拼接&#xff1a;连接多个字符串5. 逻辑运算符&#xff1a;处理布尔值6. 成员运算符&#xff1a;检查值是否存在于序列中…...

今天要重新认识下注解@RequestBody

在Spring框架中&#xff0c;RequestBody是一个常用的注解&#xff0c;它用于将HTTP请求体中的数据绑定到控制器&#xff08;Controller&#xff09;处理方法的参数上。这个注解通常与RESTful Web服务一起使用&#xff0c;在处理POST或PUT请求时尤为常见&#xff0c;因为这些请求…...

北斗有源终端|智能5G单北斗终端|单兵|单北斗|手持机

在当今科技日新月异的时代&#xff0c;智能设备的创新与升级速度令人目不暇接。其中&#xff0c;智能5G终端作为连接数字世界的桥梁&#xff0c;正逐步渗透到我们生活的方方面面。今天&#xff0c;让我们聚焦于一款集尖端科技与实用功能于一身的智能5G设备——QM-L5智能5G单北斗…...

【题解】—— LeetCode一周小结44

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结43 28.冗余连接 II 题目链接&#xff1a;685. 冗余连接 II 在…...

faiss 用于检索10亿向量(维度768)的方法

faiss 用检索10亿向量(维度768)的方法,注意考虑占用内存空间大小不能超过100G,因为100G已经是很多服务器内存的极限了,有的128G已经是超规格的机器了。价格也就是2000左右(月租)。 要处理 10 亿个 768 维的向量,并且限制内存占用不超过 100G,我们需要使用 FAISS 中的…...

sql专题 之 常用命令

文章目录 查询基础语法查询全表查询选择查询&#xff1a;常量和运算&#xff1a; 条件查询where运算符&#xff1a;、 !、<、>空值&#xff1a;null模糊查询&#xff1a;like逻辑运算&#xff1a;and or not 去重&#xff1a;distinct排序&#xff1a;order by截断和偏移…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...