【Vue】更换浏览器默认 logo

吃小猫的大鱼

已于 2024-03-01 18:00:55 修改

阅读量1.2k

点赞数 7

分类专栏：基于VUE实现功能文章标签： vue.js javascript 前端

于 2024-03-01 17:58:44 首次发布

本文链接：https://blog.csdn.net/weixin_47375144/article/details/136402221

版权

基于VUE实现功能专栏收录该内容

18 篇文章 1 订阅

订阅专栏

更换浏览器默认logo为自定义图片

一. 浏览器默认 logo
二. 替换为自定义logo
三. 步骤

一. 浏览器默认 logo

在这里插入图片描述

二. 替换为自定义logo

在这里插入图片描述

三. 步骤

3.1 转换大小

将自定义 logo 转为32×32（单位：px）的图片（图片后缀不限）

3.1.1 查看图片尺寸

非 32px × 32px

3.1.2 修改尺寸（为32px 32px）

图片-鼠标右键打开属性框-属性修改-修改尺寸
修改尺寸-保存（.ico/.png/jpg/…）
图片放于项目

（1）图片名称为 favicon.ico

路径：public下即可
方式：直接替换原 favicon.ico即可

在这里插入图片描述

（2）图片名称为【非 favicon.ico】

图片路径：public下即可
index.html 路径：public下
图片名称和必须 index.html 中保持一致

在这里插入图片描述
到这里就可以啦
tip：index.html中有关logo的link标签，也可以有以下写法：

 <link rel ="shortcut icon" type="image/x-icon" href="/public/favicon.ico" rel="external nofollow"  rel="external nofollow" >

3.2 替换成功

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吃小猫的大鱼

关注关注

7
点赞
踩
7

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue如何更换网页标签的logo

m0_63174529的博客

04-12

1185

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包一个人可以走的很快，但一群人才能走的更远。

vue组件、配置脚手架、浏览器本地存储

N奈斯先生的博客

04-18

670

欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨文章目录组件非单文件组件Vue中使用组件的三大步骤：几个注意点关于VueComponent：一个重要的内置关系单文件组件脚手架安装和创建项目脚手架文件结构关于不同版本的Vuevue.config.js配置文件浏览器本地存储面试题组件实现应用中局部功能代码和资源的集合非单文件组件 Vue中使用组件的三大步骤：一、

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

vue如何设置网站标题和logo图标

夏日漱石的博客

07-27

4777

vue如何设置网站标题和logo图标

vue项目中如何修改网页地址栏中小图标（网站logo）+文字

最新发布

joan_yb的博客

08-13

522

vue项目中如何修改网页地址栏中小图标（网站logo）+文字

vue动态修改浏览器标题和图标

Hello_oll的博客

07-22

2190

动态修改浏览器标题和图标

vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

浩星

01-10

2285

vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

vue2项目设置浏览器标题title及图标logo

小韩要快乐！

03-26

4196

vue2 修改网页标题和图标

vue项目中修改页面logo和标题

正一品程序员的博客

09-24

2848

第一步：把图片转成icon格式（比特虫转换工具），建议尺寸为16*16。第二步：将图标重命名为“favicon.ico”，并放在项目根目录下。第三步：然后在index.html中引入，title中修改页面标题。第四部：分别修改build文件夹下webpack.dev.conf.js和webpack.prod.conf.js文件中的内容。第五步：重新npm run dev 效果图： ...

vue中修改浏览器的小图标

人间草木

02-27

5777

在目录结构在的index.html，写入如下代码： <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico"> 效果图：

vue怎么给pc端浏览器设置一个最小屏幕_图文讲解uni-app的PC宽屏适配方案

weixin_39608301的博客

10-23

1625

天下苦平台碎片化已久。在移动互联网以前，开发者只需幸福的面对web。进入移动互联网时代，iOS、Android、H5以及各种小程序快应用层出不穷，开发者再也幸福不起来。学习n个技术开发n个版本各版迭代混乱，无法拉齐，用户茫然、内部痛苦开发测试成本n倍暴涨结果就是工程师不停加班到头秃，但产品的需求仍然做不完、老板的预算一直压不下去，全都痛苦。uni-app之前已经实现了手机端全覆盖，支持iOS、An...

vue项目改图标_VUE3 项目自定义修改网页标题和图标

weixin_39526546的博客

12-19

1305

VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。1 标题修改标题修改直接在项目的 /public/index.html中修改title标签即可。明月网址导航2 图标修改这个修改相对来说，需要以下几个步骤。1)首先做一个ico的小图标，命名为 favicon.ico 放在 /pu...

[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课程拓展---vue的ie兼容，ios兼容

qq_38502369的博客

04-25

977

vue的基础指令——1 v-for v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似 v-for=“item in list” list是一个数组，item是当前遍历的数组元素 v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始 <div id="app"> <table> <tr class="thead"> <td>序号</td>

vue项目修改浏览器图标名称

热门推荐

JxiaoZhang的博客

11-23

1万+

首先打开项目目录：找到index.html：这个y就是浏览器显示名称，如果想要添加项目图标，在index.html的head中： <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico"> 完成！...

vue-cli项目，更改浏览器logo

weixin_43835827的博客

07-14

301

1、外层主页面index.html 2、build下webpack.dev.config.js配置原文：https://www.cnblogs.com/xxflz/p/12788274.html

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

07-09

3994

一，改标题内容方法一：直接在public/index.html中修改title即可，如下：方法二：在main.js中添加一下代码 Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } }) 再在app.vue中添加： ...

更改vue项目的浏览器图标与标头

呆子小木心的博客

03-25

586

更改vue项目的浏览器图标与标头修改public文件里面的index.html文件，如果不在index.html不放在public文件夹里面的，在根目录找到或者其他地方 <link rel="icon" type="image/x-icon" href="<%= BASE_URL %>/wb_school.svg" /> <title>XXXXX管理平台</title> 在根目录中找到vue.config.js中加上 pwa: { iconPa

vue如何更换网页标签的logo，面试前端开发十大问题

m0_60634964的博客

04-02

689

(img-PKnyjGfY-1712007347171)]1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）5）vue：组件之间的通信（props，callback，emit）4）vue：view——medol之间双向绑定。+真实项目实战+最新讲解视频】]( )**3）props，单一数据流。2）状态管理（react）3）对象属性（vue）

vue默认浏览器为谷歌

09-07

Vue.js并没有将谷歌浏览器设置为默认浏览器。Vue.js是一个用于构建用户界面的JavaScript框架，它并不关心使用的是哪个浏览器。然而，Vue-cli，Vue.js的官方脚手架工具，默认会将谷歌浏览器作为开发环境的默认浏览器。这意味着当我们使用Vue-cli创建一个新的Vue项目并运行时，在开发环境下会自动使用谷歌浏览器打开我们的应用。这仅仅是Vue-cli为了方便开发者在调试和开发过程中提供更好的体验而做出的默认配置选择，并且你可以通过配置文件更改默认浏览器为其他浏览器。在生产环境中，Vue.js并不限制使用哪个浏览器，它会将编译后的代码生成适用于所有主流浏览器的JavaScript文件。因此，无论是使用谷歌浏览器还是其他浏览器，Vue.js的应用程序都可以正常运行。总而言之，Vue.js本身并没有将谷歌浏览器设置为默认浏览器，但Vue-cli作为Vue.js的官方脚手架工具，默认选择谷歌浏览器作为开发环境的默认浏览器。但在生产环境中，Vue.js不限制使用哪个浏览器，它会生成适用于所有主流浏览器的JavaScript文件。