vue项目动态设置浏览器icon

最新推荐文章于 2025-06-12 15:05:04 发布

梓喻

最新推荐文章于 2025-06-12 15:05:04 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js 学习文章标签： vue项目设置icon link querySelectAll 浏览器icon

本文链接：https://blog.youkuaiyun.com/wzp20092009/article/details/120514437

学习同时被 3 个专栏收录

84 篇文章

订阅专栏

74 篇文章

订阅专栏

vue

35 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript遍历文档中的<link>标签，寻找rel属性包含'icon'的元素，并将指定的浏览器图标URL赋值给这些元素的href属性，从而更新网页的favicon。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码很简单，获取 <link> 标签中 rel 相关设置的值为 icon 的标签元素，将 icon 地址的值赋给该标签的属性 href。

//	比如某个路径 browerIconUrl
document.querySelectAll("link[rel*='icon']").forEach(item => {
	item.href = browserIconUrl;
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

梓喻

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【插件】vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容

工作中遇到问题记录

01-29

1630

vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容,VueHead,vuehead

vue 动态设置系统在浏览器中的标题title和图标favicon

宁静致远

04-06

2723

vue动态修改系统title和favicon

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

vue 动态修改ico网站图标

偏执的小男孩儿

03-31

1172

vue 动态修改ico网站图标

Vue 动态设置当前页面标题和图标

最新发布

yuzheh521的博客

06-12

588

【代码】Vue 动态设置当前页面标题和图标。

vue 动态修改浏览器图标.ico

u010609022的专栏

09-19

599

【代码】vue 动态修改浏览器图标.ico。

vue中动态跟新 favicon.ico；＜link rel=“icon“ href=“＜%= BASE_URL %＞favicon.ico“＞

HeMister的博客

01-31

3321

因为第一次加载成功后就会有缓存（再vue项目，请各位大神解惑为啥）相同域名首次加载成功后，会被缓存无法更改，首次加载不成功可以有效。updateFavicon 内容。其次再router守卫处理。不href控制会被缓存。

vue设置浏览器ico图标

fakuangjingling的博客

12-20

2740

【代码】vue设置浏览器icon图标。

vue3项目动态设置浏览器icon及vite中怎么配置

03-29

在Vue3项目中，可以使用以下代码动态设置浏览器icon： ``` // 设置浏览器icon const setFavicon = (url) => { const favicon = document.querySelector('link[rel="icon"]'); if (favicon) { favicon.href = url...

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

12-07

目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 favicon图片放到该文件夹下。然后再index.html中添加： <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" ...

vue3修改link标签默认icon无效问题详解

10-16

在Vue3中，修改`link`标签默认的`icon`可能会遇到一些问题，尤其是在尝试替换浏览器的导航栏小图标（通常称为favicon）时。本文将深入探讨这个问题，并提供解决方案。首先，我们需要理解Vue3项目的目录结构。在Vue...

vue项目--favicon设置以及动态修改favicon（网站顶头的.icon小图标）

热门推荐

muzidigbig的博客

05-29

3万+

favicon图标的制作请看我前面的文章：https://blog.youkuaiyun.com/muzidigbig/article/details/80492902 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置，目前主要的浏览器都支持favicon.ico图标. 目前vue-cli搭建的vue项目里面已经有了一个s...

vue 动态更换网页icon

小橙的博客

09-13

1242

public>index.html <head> <link rel="shortcut icon" type="image/x-icon" href="./biniu.png"> </head> <script> (function() { var newHostname=window.location.hostname; console.log('hostName',newHostn

vue动态修改网页icon图标【浏览器】

m0_61811926的博客

01-17

588

如果没反应，可以将index.html中的带有rel="icon"的注释掉。在app.vue文件中添加以下代码。动态修改网页icon图标。

vue项目动态设置 shortcut icon--favicon设置以及动态修改favicon

初心 - 杨瑞超个人博客

07-03

1772

直接贴代码了： var link = document.querySelector("link[rel*='icon']") || document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = '新的图片地址'; document.getElementsByTagName('head')[0].appendChild(link); ..

vue 网站添加图标

逆风优雅的博客

04-24

546

第一种 <link rel="icon" href="favicon.ico" type="image/x-icon"> 第二种 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 第三种 <link rel="icon" href="文件位置.png" sizes="16x16" type="image/png"> 第四种 <link rel="icon" href="文件位置.g..

vue项目--favicon设置以及动态修改favicon

aiyouer0191的博客

03-05

1314

最近写公司项目时，动态更新favicon 动态更新之前需要有一个默认的favicon。目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 favicon图片放到该文件夹下。然后再index.html中添加： <link rel="shortcut icon" type="image/x-icon" href="st...

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

浩星

01-10

2976

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

vue动态修改浏览器title和icon图标

轻风细雨_林木木

09-20

1601

【代码】vue动态修改浏览器title和icon图标。

vue-cli3 vue项目动态修改favicon.ico(浏览器顶部小图标)

wocwin的博客

08-17

5428

vue-cli3 vue项目动态修改favicon.ico(浏览器顶部小图标)