怎么在vue项目中的浏览器网页标题添加小图标

最新推荐文章于 2023-07-27 00:23:30 发布
最新推荐文章于 2023-07-27 00:23:30 发布
阅读量390 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lemontree_fu/article/details/102466943
版权

1、在Vue项目文件夹目录中找到index.html

2、将所需图标放在static目录下

      为什么放在static目录下，而不是放在src目录下呢？

      因为放在src下浏览器会找不到的，网页把根域名作为相对文件的根目录了，但是我们的文件的路径是相对于我们的项目文件的 

      根目录的，因此找不到了。

3、在index.html的head标签中添加<link rel="icon" type="image/x-icon" href="static/favicon.ico" />

    

 

水蜜桃那么甜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目改图标_VUE3 项目自定义修改网页标题和图标
weixin_39526546的博客
12-19 1292
VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。1 标题修改标题修改直接在项目的 /public/index.html中修改title标签即可。明月网址导航2 图标修改这个修改相对来说，需要以下几个步骤。1)首先做一个ico的小图标，命名为 favicon.ico 放在 /pu...
为VUE-CLi2项目自定义title标签页小图标
whylost
05-19 1491
初始图标如图 1. 在项目根目录（index.html同级目录）下添加favicon.ico文件 2. 在项目index.html中引入图标 <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> 3. 配置webpack配置文件(build文件夹下面) 在 webpack.dev.conf.js 和 webpack.prod.config.js 中添加如下代码 favicon: path.resolve(
Vue项目_设置浏览器上方的项目标题和图标(避小坑)
qq_41497443的博客
07-15 6061
Vue项目_设置浏览器上方的项目标题和图标(注意图标放置位置) 1.设置自定义图标注意点： 项目根目录的index.html，进行设置：【注】 设置自定义的图标，需要把自己的的图片放在static目录下（与src同级目录，不要放在src目录下，浏览器会找不到） 2.话不多说，直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"
浏览器标签栏logo添加
ZF10001的博客
12-01 164
在<head >中引入link，如下： <head> <link rel="icon" type="image/icon" href="G:\testWeb\Alibaba\IMAGE\favicon.ico"> </head> 将图标转换成icon格式 ico文件在线转换链接;https://www.i...
怎么在vue项目中的浏览器网页添加小图标
qq_42353989的博客
08-01 513
1.实现功能：在网页标题处添加小图标 例如： 2.将所需图标放在static目录下 为什么放在static目录下，而不是放在src目录下呢？ 因为放在src下浏览器会找不到的，网页把根域名作为相对文件的根目录了，但是我们的文件的路径是相对于我们的项目文件的根目录的，因此找不到了。 还有这里推荐大家用 .ico格式 的图标，而不是.jpg和.png格式的图片，改个格式而已，不紧要的。为什么这样用呢...
【Vue】vue项目网页标题栏ico小图标修改调整
weixin_46368797的博客
05-09 2875
找到index.html文件，将link标签中的图标路径名favicon.ico改成logo.jpg（png格式同理）将logo图片文件复制到public文件夹中。刷新网页，图标更新成功。
vue项目中，网页地址栏添加小图标
Lhy_JL的博客
12-31 2318
前提：Vue项目，网页添加小图标 相信大家都知道图标的添加方法：在<head></head>里添加，在Vue项目中的index.html里编辑 <link rel="shortcut icon" type="image/x-icon" href="图标的路径"> 需要主要的是： 1、图标的格式：.ico（尺寸：16*16） 2、图片存放的位置。 解...
[vue-element-admin]设置icon+浏览器+侧边栏等图标、标题
u013998349的博客
11-28 1万+
vue-element-admin中设置icon图标一、引入图标ICON：二、使用步骤1.src/router/index.js参考资料： 一、引入图标ICON： https://www.iconfont.cn/ 可以到https://www.iconfont.cn/上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。 二、使用步骤 1.src/router/index.js 直接在meta: { title: ‘主页’, icon: ‘dashb
vue前段开发网页图片及名称
03-26
在标题“vue前段开发网页图片及名称”中，我们可以理解为讨论的是如何在Vue项目中处理和组织网页中的图片资源，以及如何进行有效的文件命名。 Vue.js是一个轻量级的前端框架，它简化了JavaScript应用的构建过程，...
uniapp修改H5页面浏览器标签栏小图标
abcdebb的博客
04-15 3044
uniapp如何修改上图浏览器的标题栏的图标。 找到根目录的index.html文件，然后在head标签离添加以下两行代码 <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />//必须的，要不然不生效 <link rel="icon" href="./static/logo1.png"/>//图标的路径 效果图如下： .
Vue框架 ，设置浏览器标题栏图标
caimaomaocai的博客
07-23 8307
在创建Vue项目时一般会用默认的项目标题和图标，如下图所示：   不是很美观也可能不符合项目的需求，所以有时候就需要改变项目在浏览器上方的标签名称或者图标。 找到项目根目录的index.js，如图：  进去就能够修改title，也就是在浏览器上方的标题 &lt;meta name="viewport" content="width=device-width,initial-scale=1....
vue如何设置网站标题和logo图标
最新发布
夏日漱石的博客
07-27 4748
vue如何设置网站标题和logo图标
vue3项目引入第三方图标（阿里图标）
kanno的博客
03-01 1422
vue3项目引入第三方图标（阿里图标）
Vue中修改favicon.ico标题小图标步骤
weixin_52094928的博客
07-06 2680
1、Vue中弹窗打开验证规则重置方法 open() { this.Visible = true this.$nextTick(() => { if (this.$refs[formname] !== '') { this.$refs[formname].resetFields() } }) }, 2、Vue中修改favicon.ico标题小图标步骤 （1）、首先制作favicon.ico小图标，在比特虫（http://www.bitbug.net/）网站上，制
vue项目设置浏览器标题title及图标
Aaron_杀死庸碌的博客
07-14 1万+
方法一：在vue.config.js文件，添加如下代码： 方法二：直接在public/index.html中修改title即可，如下： 二、动态设置标题方案 方法一：通过路由导航守卫设置，使用Vue-Router的beforeEach拦截 方法二：使用插件vue-wechat-title来设置浏览器动态标题 三、图标修改 1、首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面，替换原有的 favicon.ico，需要可以备份原有的 favicon.ico。 2、在 /pub
web前端_Vue框架_设置浏览器上方的标题和图标
人生几何的博客
05-15 2万+
在创建Vue项目时一般会用默认的项目标题和图标，如下图所示： 不是很美观也可能不符合项目的需求，所以有时候就需要改变项目在浏览器上方的标签名称或者图标。 找到项目根目录的index.js，如图： 进去就能够修改title，也就是在浏览器上方的标题 &amp;amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width,initial-sca...
vue 工程修改浏览器title以及icon
lxlmycsdnfree的博客
10-22 1340
Icon: icon 效果如： vue 工程中有一个专门放置静态文件的文件夹：static；将静态的图标放到static文件夹下，比如是test.jpg或者test.png都可以。 然后在index.html &lt;head&gt;&lt;/head&gt;中添加 &lt;link rel="shortcut icon" type="image/x-icon" href="./sta...
如何在vue项目中增加网页logo
IT小村
05-05 4936
一、前言 vue项目中增加网页，操作很简单，就能达到效果：一张图片 + 一行代码 。 二、正文 本项目是基于 ElementUI 的 element-starter，以做更好的演示。 1.代码 就增加了如下的代码 <link rel="icon" href="../img/MyLogo.png"> 注意在项目的根目录下，新建一个文件夹如 img，logo 的图片从里边获取，不要在 ...
vue项目--favicon设置以及动态修改favicon（网站顶头的.icon小图标）
热门推荐
muzidigbig的博客
05-29 3万+
favicon图标的制作请看我前面的文章：https://blog.csdn.net/muzidigbig/article/details/80492902 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli搭建的vue项目里面已经有了一个s...
vue项目中的浏览器页面标题是根据什么决定的
07-14
在Vue项目中，浏览器页面的标题可以根据多种方式决定。以下是一些常见的方式： 1. 使用`<title>`标签：在项目的HTML模板文件中，可以通过`<title>`标签来指定页面的标题。例如： ```html <!DOCTYPE html> , ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值