在 vue-cli 项目中添加标签页图标 favicon

最新推荐文章于 2024-07-05 10:27:51 发布
原创 最新推荐文章于 2024-07-05 10:27:51 发布 · 878 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍了两种在 Vue CLI 项目中添加标签页图标（favicon）的方法：一是直接在 public/index.html 文件中使用 link 标签，但缺点是打包后需要手动更新；二是通过修改 vue.config.js 添加 PWA 内容，图标需放在 public 目录下，但需打包后生效。

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

说明：本文所基于的项目目录结构如下
vue-cli目录结构

方法一

直接在 public --> index.html 中通过 link 标签添加

<head>
    <!-- 自定义的 meta 、 title 内容省略了 -->
    <link rel="shortcut icon" type="favicon" href="./logo.png">  
</head>

此方法存在的弊端是需要在打包后的项目文件中再次手动更改 index.html 中的图标链接图片，较为麻烦。

方法二

在 vue.config.js 中添加 pwa 内容

pwa: {
        iconPaths:
            { favicon32: 'logo.png', favicon16: 'logo.png', appleTouchIcon: 'logo.png', maskIcon: 'logo.png', msTileImage: 'logo.png' }
    },

所在位置：
pwa位置
此方法在添加后需要将项目打包，才能出现图标效果，否则还是默认的图标。

备注：要特别注意各个文件所在目录，pwa 方法添加时 logo 图片需放置在 public 目录下。

itBellah
关注
Vue项目中如何添加网页Favicon图标及相关JavaScript代码实现
CodeWhizZ的博客
08-15 1085
在Vue开发过程中，为网页添加一个独特的Favicon图标是提高用户体验的重要一环。除了上述基本步骤外，我们还可以通过JavaScript代码来动态修改或替换Favicon图标。如果需要动态更换Favicon图标，则可以使用JavaScript代码来实现。总结一下，在Vue项目中添加Favicon图标的步骤如下：准备Favicon图标、将图标添加到。将准备好的Favicon图标文件（通常为.ico格式）添加到Vue项目的。元素添加到页面的头部，实现Favicon图标的更换。第一步：准备Favicon图标。
Vue项目中添加 页面 标签页 的 小图标
qq_41709082的博客
08-08 4988
Vue项目中添加 页面 标签页 的 小图标 1.找到 build 文件夹中的 webpack.prod.conf.js文件 // webpack.prod.conf.js ... //找到 这 一配置项 new HtmlWebpackPlugin({ ... }); 添加 favicon 属性 2.找到 build 文件夹 内的 webpack.dev.conf.js 文件 // webp...
vue项目动态设置浏览器标签页的图标
lalalalamjm的博客
02-01 910
假设图标地址为 http://dev-merchant.kppay.cc/kefu_icon/QQ.png。在App.vue中的onBeforeMount钩子中写入。
Vue中设置浏览器标签栏图标以及title
前端-卡布达的博客
02-12 1万+
1、设置浏览器标签栏图标 使用脚手架创建的项目，已经将标签栏图标设置好了，默认的是vue的图标。如果需要修改，只需要将public文件夹下面的favicon.icon文件替换为我们自己的图标即可 2、浏览器标签栏title修改 title的修改有很多种方法，我使用的是路由配置中的路由元信息结合路由导航钩子来实现的 import Vue from 'vue' import VueRouter from 'vue-router' import Login ...
vue 修改浏览器标签页图标
qq_36958916的博客
08-17 1191
vue 修改浏览器标签页图标
vue项目自定义网页标签栏上的小图标
yyanglirong的博客
04-26 3429
今天上司要求我更改我写的vue项目的小图标，百度之后，还有点麻烦，需要我们自己去制作图标，但因为我们公司直接给了我图片，所以修改起来很是方便，首先第一步，在pubic文件下新建img文件，将图标放在该目录下，并重命名为favicon.ico 然后直接打开index.html文件进行替换 <link rel="icon" href="./img/favicon.ico" /> 然后我...
vue中添加标签页title前面小图标
太阳晒屁股了的博客
09-12 2584
一，将favicon.ico图标放到static目录下 二，在index.html中引入favicon.ico <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="static/fav...
vue项目中配置favicon图标
xm2by的博客
08-15 1万+
vue项目中配置favicon图标 如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。 不配置是这样子的： favicon图标的配置也很简单，vue-cli默认帮我们安装了html-webpack-plugin（如果没有，可以自己npm安装），我们只需在html...
vue 项目中，动态修改浏览器标签页的图标
u010328533的博客
03-21 6117
vue 项目中，动态修改浏览器标签页的图标 需求： 项目中有一个入口可以修改平台的名称和图标，图标同步展示为浏览器页签的图标 实现： 1.找到项目中的app.vue 文件，动态创建link标签，调用后端接口，获取返回的图片，我的项目中，后端返回的图片格式为base64格式 <template> <div id="app"> <router-view /> </div> </template> <script> i
vue 页签图标(icon)修改设置
最新发布
Kevin_Rose的博客
07-05 1194
如果图标不是 svg 格式，而是 ico 格式，将上面代码中 type="image/svg+xml"替换为 type=“image/x-icon”
vue cli怎么添加浏览器标签页图标
晓风揽月
06-06 510
在build文件夹 1. 找到webpack.dev.conf.js，再找到HtmlWebpackPlugin，添加favicon:‘favicon.ico路径’ new HtmlWebpackPlugin({ 　　filename: 'index.html', 　　template: 'index.html', 　　favicon:'./nationalEmblem.png', //这里设置图标路径 　　inject: true }) 2. 然后找到webpack.prod.conf.js
Vue修改网页标签栏标题以及标签栏图标
weixin_63712639的博客
12-25 2317
//1.首先在src/router/index.js目录下给需要的路由添加title const routes = [ { path: '/', component: () => import('页面路径'), meta: { title: '我是主页', } }, ] //2.通过路由前置守卫处理 ---在跳转前就触发 router.beforeEach((to, from, next) => { // 参数是固定的3个: // .
vue项目设置浏览器页签图标icon
热门推荐
前端金牌摸鱼达人
11-07 13万+
vue项目设置浏览器页签图标icon
给vue项目设置浏览器logo
kairrys
05-27 2070
通过看vue项目的目录结构，根目录下有一个index.html，这个就相当于我们普通项目中的各个html页面文件，所以设置方法就是在index.html的head标签中添加link标签。 这里要注意的是图标文件的位置，不能放到src里，这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，因此就找不到了。 因此，图片一类的静态文件，应该放在这个static文件夹下，这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下。这时我们使用static绝对.
vue-cli搭建的项目如何去掉vue默认的favicon.ico
MISS_zhang_0110的博客
05-31 1969
在 public/index.html 中去除 favicon 链接：打开 public 目录中的 index.html 文件，在 标签中寻找类似如下的代码，通过以上步骤，您可以成功移除 Vue CLI 项目中的 favicon.ico 并使用浏览器默认图标。使用浏览器默认图标：如果您想使用浏览器默认图标（比如 Google 默认图标），在 index.html 的 标签中。这样就会告诉浏览器不要加载任何特定的 favicon.ico 文件，从而使用浏览器的默认图标。
Vue设置浏览器小图标（ICON）
Sophia的博客
11-03 8879
Vue设置浏览器小图标及静态标题
Vue-cli中怎么用JS代码来实现动态生成样式和标签?
qq_42349895的博客
11-19 1106
为什么要在Vue-cli中使用JS语法? Vue-cli的功能不够全面吗? Vue-cli框架中怎么使用JS语法? 下面我来一一解答上面的问题(由于中午休息时间比较短, 我会尽可能的描述详细一点) (1) 增加框架的灵活性, 弥补Vue-cli的不足. (2) Vue-cli的功能其实很全面, 但是应用场景有限,一般只适合OA系统的开发, 对于博客,新闻等网站的开发似乎有...
vue项目中使用自定义Icon图标
hhy
03-28 4391
在vue项目引入阿里巴巴矢量库中的图标
vue-cli创建的项目，vue.config.js按配置生成favicon
weixin_39788999的博客
07-21 2163
最近开发一个项目基于vue-element-admin进行开发的，它是vue-cli构建生成的项目，项目配置在vue.config.js文件里 根据需求favicon根据不同项目显示不同的icon，favicon默认配置在html文件中，每次手动改太麻烦，所以想在配置文件里统一配置favicon的值，每次只需要改一个配置文件就可以了。 虾米那介绍配置favicon的方法： 方法一：configureWebpack 修改配置项 调整 webpack 配置最简单的方式就是在 vue.config.js 中的 c
Vue-cli4结合Vant-ui打造最佳H5开发实践
- favicon.ico：网站的favicon图标，通常用于浏览器标签页上显示的小图标。 - index.html：项目的入口HTML文件，是所有页面渲染的起点。 - src：存放项目源代码的主要目录，其中包括： - assets：存放图片、样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值