Vue工程的浏览器小图标（缩略的网站标志）无法解析或修改的问题

已于 2023-08-23 14:57:55 修改
阅读量728 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2022-11-30 21:42:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52116878/article/details/128122821
版权

1、把准备好的ico格式改名为 favicon.ico

不会把其他格式转为 ico 格式的朋友别急，文尾有提供方法

2、删除 原来的 favicon.ico ，就是 Vue 的logo

3、把咱自己的图片粘贴到 public文件夹下

4、做完的目录结构如下

注：无需改动代码，只需按本文步骤改文件
在这里插入图片描述

5、重启工程就可以了

拓展：其他格式图片转成ico格式的方法

  1. 选中要转换的图片，然后用windouws自带的画图这个App打开

  2. 看下图
    在这里插入图片描述

  3. 看下图
    在这里插入图片描述

  4. 看下图
    在这里插入图片描述

  5. 找到图片，重命名为 “ico” 格式

  6. 看下图，点击 是
    在这里插入图片描述

  7. 大功告成

Jay Yang.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue如何更换网页标签的logo
m0_63174529的博客
04-12 972
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包一个人可以走的很快，但一群人才能走的更远。
vue.js实现照片放大功能
10-15
在Vue.js中实现照片放大功能可以为用户提供更好的交互体验，特别是当展示一些细节丰富的图片时。这个功能通常通过点击或悬停图片来触发，将原始图片以更大的尺寸显示出来。下面我们将详细讲解如何使用Vue.js实现这一...
vue3.0 解决浏览器小图标 ico图标更换不了的问题 记录
weixin_42508580的博客
03-09 1414
vue3设置ico图标审查元素显示如下 <!--[if IE]><linke rel="icon" herf="logo.ico" /><![endif]--> 解决方法 index.html <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewpor
vue3项目修改浏览器的项目icon小图标
biapang的博客
05-15 242
修改根目录下的index.html的 link 标签引入地址。
vue设置浏览器ico图标
fakuangjingling的博客
12-20 1840
【代码】vue设置浏览器icon图标。
vue项目设置浏览器页签图标icon
qq_43592064的博客
11-07 8062
vue项目设置浏览器页签图标icon
vue+webpack设置浏览器图标
yjl13598765406的博客
11-23 486
vue2 设置浏览器图标
使用vue实现HTML页面生成图片的方法
10-15
如果logo仍然无法显示，可能是由于加载问题或样式设置不正确。确保logo的URL是有效的，并检查其在CSS中的样式设置，确保它可以正确显示在canvas上。 总的来说，通过Vue结合`vue_qrcodes`和`html2canvas`，我们可以...
html5模板-作品展示HTML5网站模板.zip
03-15
此外，考虑到这是一个作品展示模板，它可能包含了一些特定的设计元素和功能，如全屏背景图像、作品缩略图网格、详细的项目描述区域、滑动面板或弹出框来显示更多作品信息。设计师可能还使用了SVG图形或Web字体来提高...
html5 pgwslideshow.js带标题和缩略图响应式图片轮播插件.zip
09-25
`img`目录包含了轮播所需的图像资源，包括主图片、缩略图和其他可能的图标。在响应式设计中，这些图片可能会根据设备的屏幕尺寸和方向进行调整，以适应不同的显示环境。 `css`目录下的样式表文件（通常为`style.css...
vue项目如何修改网页logo
ffikn的博客
10-12 1903
1、制作一张.ico格式的图片，图片规格为32X32,取名问favicon.ico。2、将刚刚制作好的图片替换vue项目下public文件下的favicon.ico。4、重新运行项目就好了。
Vue项目更改项目图标
qq_45908140的博客
04-26 3290
修改Vue项目图标
vue项目如何更换网页图标
weixin_56733569的博客
04-23 1922
vue2的图标文件在public文件夹下，是.ico后缀的文件，我们只需要把新的图标放到这个文件夹下，并改成同名的，然后将旧的删掉，就能替换了。把svg图的代码复制过来，将原本的vite.svg文件里面的代码替换掉就可以啦。vue3的图标也在public文件夹下，但是它是一个.svg后缀的图标。
手把手教你更改Vue项目图标
不愧是暮言的博客
08-15 4999
除了使用第三方图标库外，你还可以自定义样式，使用项目中的自定义图标。这需要你自己设计和绘制图标，并将其转化为字体文件（通常使用SVG格式）
浏览器图标引入vue项目中
wzp20092009的博客
11-27 391
浏览器的tab中有个icon的图标需要显示 主要有两种方法 一、在webpack中配置 打开build/webpack.dev.conf.js文件进行配置 找到plugins这个属性，在里面添加属性favicon，值为icon的地址 有些文章说这里还需要在index.html中添加link，地址为favicon的地址，测过之后发现不需要 修改完配置文件之后一定要npm run dev才能生效，如...
vue项目设置浏览器标题图标
程序员一枚，仅记录工作中的难点
03-31 562
【代码】vue项目设置浏览器标题图标。
使用Vue实现点击页面触发特效
最新发布
qq_45569925的博客
07-19 605
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 286
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
vue如何改浏览器左上角小图标
06-02
要更改浏览器左上角的小图标，可以在 Vue 的入口文件 `main.js` 中添加如下代码： ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false // 更改浏览器左上角小图标 const favicon = require('@/assets/favicon.ico') const link = document.createElement('link') link.rel = 'shortcut icon' link.href = favicon document.head.appendChild(link) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 将上述代码添加到 `main.js` 中后，需要将 `src/assets/` 目录下的 `favicon.ico` 替换成你自己的小图标即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值