【react】react项目修改浏览器图标

湛海不过深蓝

已于 2023-03-31 11:00:56 修改

阅读量1.7k

点赞数 1

文章标签： react.js 前端前端框架

于 2023-03-30 15:50:53 首次发布

本文链接：https://blog.csdn.net/bbt953/article/details/129859432

版权

将favicon.ico图标放置在项目的public文件夹下，并在public/index.html的HEAD部分添加<link>标签，使用%PUBLIC_URL%引用favicon.ico，以设定网站图标。

摘要由CSDN通过智能技术生成

在public文件夹下放置对应的favicon.icon

打开public/index.html
在head里面加入下面行代码

 <!-- %PUBLIC_URL%代表public文件夹的路径 -->
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

湛海不过深蓝

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

React 练手项目帮助快速创建项目

06-11

这个练手项目是针对初学者或希望提升React技能的开发者设计的，它提供了一种快速启动新React项目的方法。下面，我们将深入探讨React的基本概念，以及项目中包含的文件和它们的作用。 1. **React核心概念**： - **...

React脚手架，用于快速搭建React项目

06-04

React脚手架是一种工具，它简化了创建新React项目的初始设置过程。React是Facebook开发的JavaScript库，专门用于构建用户界面，尤其是单页应用程序（SPA）。JavaScript则是一种广泛使用的编程语言，是Web开发的核心...

参与评论您还未登录，请先登录后发表或查看评论

vue favicon设置以及动态修改favicon的方法

12-07

最近写公司项目时，动态更新favicon 动态更新之前需要有一个默认的favicon。目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 favicon图片放到该文件夹下。然后再index.html中添加： <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" rel="external nofollow" > 然后刷新浏览器，就会更新。如果没有效果，则查看你的build文件夹下：build/webpack.dev.conf.js中。（到这个步骤之前我的是出现了

Vue动态修改index.html中的title和icon图标

meiwan123的博客

10-18

4231

如何动态修改Vue项目中的页面title_qq_26780317的博客-CSDN博客_vue动态设置页面title vue项目--favicon设置以及动态修改favicon - ArthurWong - 博客园两篇博文记录一下

vue 页签图标(icon)修改设置

Kevin_Rose的博客

07-05

484

如果图标不是 svg 格式，而是 ico 格式，将上面代码中 type="image/svg+xml"替换为 type=“image/x-icon”

React项目动态设置index.html中的＜title＞标签内容

最新发布

qq_37698249的博客

07-31

205

【代码】React项目动态设置index.html中的＜title＞标签内容。

react项目中根据项目部署环境来显示logo

object_oriented的博客

07-21

769

因为项目是使用的一个镜像去部署所以他们打包后的代码内容是一样的，在编译阶段就无法知道是什么环境，目前采取的方式是因为node环境是可以获取字段判断当前环境的，所以可以在dockerFile文件中去执行node的脚本去修改图片名称。在前端直接写出logo路径，根据不同环境把对应logo的名称修改为显示的名称，如果本地就显示本，测试环境就显示测，线上就使用线上的图片最终显示的图片名称是favicon.ico。部署后即可根据环境显示。3.如何判断当前环境。...

React之改变页面上方标题与图标（简单粗暴）

qq_36330296的博客

07-25

8863

React之改变页面上方标题与图标（简单粗暴） react.js 716 次阅读 · 读完需要 2 分钟 0 使用create react app命令得到的React项目会有默认的页面标题与图标，怎么修改呢？一、修改图标：打开打包后的build文件夹的index.html 找到：<link rel="shortcut icon" href="/favicon.ic...

React动态修改页面title，icon神器react-helmet

weixin_43925630的博客

08-18

530

【代码】React动态修改页面title，icon神器react-helmet。

Vue3/React 动态设置 ant-design/icons 图标

卡尔特斯

11-07

2504

使用方式上，依然达到使用图片名称就能使用图标，下面以。这种标签方式，当需要像以前一样动态切换使用。文件，相当于自己做一个。

react-native 修改项目名称和图标

Define_best的博客

10-21

660

react-native 修改项目名称和图标

React更改document.title浏览器标题名字react-router-dom v5路由处理方案

刻痕

01-25

2680

React更改document.title浏览器标题名字react-router-dom V5路由处理方案.**react-router-dom路由创建和使用方式：**[点我另一个博客](https://blog.csdn.net/weixin_44461275/article/details/122239426) **V6 react-router-dom 版本处理方案：**[点我另一个博客](https://blog.csdn.net/weixin_44461275/article/details/

react-music:React Music PC项目

05-28

它会使用Webpack热重载服务器，自动编译源代码，并实时刷新浏览器，以便在修改代码后立即看到变化。开发过程中，这个命令能大大提高开发效率。 2. **`yarn test`**：这个命令运行项目的测试套件，通常基于Jest或...

React集成Cesium示例代码

02-08

在本项目中，"React集成Cesium示例代码" 是一个使用React框架构建的应用，它展示了如何将3D地球可视化库Cesium与React相结合。Cesium是一个强大的JavaScript库，用于在Web浏览器中创建高保真的3D地球和空间场景。这...

react移动商城项目使用图片

09-20

在React移动商城项目中，使用图片是常见的需求，无论是商品展示、页面背景还是图标，图片都是构建用户界面不可或缺的一部分。本文将深入探讨如何在React应用中有效地管理和使用图片。首先，我们来了解一下React中...

[React] 如何在React 项目中添加 favicon.ico

iChangebaobao的博客

04-14

3157

如何在React 项目中添加 favicon.ico一、使用 create-react-app 搭建的项目二、未使用脚手架搭建的项目一、使用 create-react-app 搭建的项目如果将文件放入 public 文件夹，Webpack 将不会处理它。相反，它将被复制到构建文件夹中。要引用 public 文件夹中的资源，需要使用名为 PUBLIC_URL 的特殊变量。 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-i

Vite构建的vue3项目修改网站标题和图标

maohe的博客

07-27

5561

记录 vite + vue3 + ts 项目修改网站标题和网站图标。

Ant design pro (九) 修改Title 图标等小功能

听我一言的博客

09-25

4096

一. 关于界面菜单及整体颜色风格修改 1. 直接修改 config/defaultSettings.ts 内部直接修改 2. 辅助修改 Ant Design Pro预览界面在预览界面中选择设置好之后将设置好的配置加到/修改 config/defaultSettings.ts 文件 1) 打开配置页面 2) 按照自己的想法进行配置 3）拷贝配置即可拷贝内容 { “primaryColor”: “#13C2C2”, “navTheme”: “dark”, “layout”: “top”, “con

umi 中修改浏览器上的icon和title

bighead的博客

10-22

3021

在项目中找到这个文件：.umirc.ts，没有的话可以手动创建一个文件中写入 export default { // 修改icon links: [ // href的图片你可以放在public里面，直接./图片名.png 就可以了，也可以是cdn链接 { rel: 'icon', href: './image/desktop.png', type: 'image/x-icon' }, ], // 修改title title:'标题'