vue项目修改浏览器图标以及标题

超、凢脫俗 2024-04-20 09:02 109阅读 0赞

**favicon.ico**一般用于作为**缩略的网站标志**,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持*favicon.ico*图标.

![20190920161257415.png][]

目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。

![20190920161400109.png][]

然后去index.html在head下添加：

<link rel="icon" href="static/img/logo/logo.jpg" type="logo/logo.jpg">
    <link rel="shortcut icon" href="static/img/logo/logo.jpg" type="logo/logo.jpg">

然后保存刷新浏览器，就会更新。（需重新运行项目npm run dev）

如果没有效果，则查看你的build文件夹下：build/webpack.dev.conf.js中。（到这个步骤之前我的是出现了，并且正常显示，如果不显示，则配置一下吧。）添加： favicon:'static/bitbug\_favicon.ico'

new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true,
    	  // favicon图标(这里需要图标的路径与页面中的路径一样)
    	  // favicon: 'static/bitbug_favicon.ico' 
    	  // favicon: path.resolve('static/bitbug_favicon.ico')
    	  favicon:'static/bitbug_favicon.ico'
        }),

到这里重新启动程序，页面的favicon已经可以正常显示了。(重新运行项目）

[20190920161257415.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e90cc6d0fdaf4991aaa61b113738af4e.png
[20190920161400109.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/302341f7c30d49599aec3cce9facc5d3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目修改浏览器图标以及标题

*favicon.ico**一般用于作为**缩略的网站标志**,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置，目前主要的浏览器都支持*f...

超、凢脫俗/ 2024年04月20日 09:02/ 0 赞/ 110 阅读

相关 javascript修改浏览器title方法 JS动态修改浏览器标题

itle在html中属于特殊的节点元素.因为它可以使用document.getElementsByTagName("title")\[0\]来获取网页的title标签,但...

蔚落/ 2024年04月20日 08:30/ 0 赞/ 97 阅读

相关 vue项目修改浏览器图标

首先打开项目目录： ![在这里插入图片描述][20191012100448130.png] 找到index.html：在index.html的head中添加：

待我称王封你为后i/ 2023年06月06日 14:26/ 0 赞/ 155 阅读

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

1、在Vue项目文件夹目录中找到index.html 2、将所需图标放在static目录下为什么放在static目录下，而不是放在src目录下呢？

约定不等于承诺〃/ 2023年06月06日 03:38/ 0 赞/ 45 阅读

相关 VUE修改页面的标题

重点代码 meta:{ title:'首页'} 完整代码 import Vue from 'vue' import Router from

﹏ヽ暗。殇╰゛Y/ 2022年11月29日 03:20/ 0 赞/ 214 阅读

相关 Vue 动态修改网页标题和图标

VUE2：二、普通方案，使用Vue-Router的beforeEach拦截 routes: [{ path: '/',

川长思鸟来/ 2022年11月07日 01:44/ 0 赞/ 1069 阅读

相关 VUE设置浏览器icon图标

Vue怎么设置左上角icon图标呢？步骤如下：（1）、提前把icon图标copy到static目录下 ![70][] （2）、在index.html页面添加 <l

清疚/ 2022年05月21日 23:11/ 0 赞/ 561 阅读

相关 vue引入标题ico图标方法，以及标题跑马灯

1 先有一个需要图片，png 、jpg ...格式都可以 2 把图片转换成 .con 格式的图标，http://www.bitbug.net/使用比特虫转换，目标尺寸：

浅浅的花香味﹌/ 2022年01月23日 14:27/ 0 赞/ 592 阅读

相关 vue修改浏览器的标题和图标

一，改标题内容方法一：直接在public/index.html中修改title即可，如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk

旧城等待，/ 2021年07月25日 12:47/ 0 赞/ 943 阅读

相关 vue-cli3.0修改浏览器中的小图标

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

雨点打透心脏的1/2处/ 2021年07月24日 23:47/ 0 赞/ 622 阅读