vue项目在浏览器地址栏设置favicon.ico图标

最新推荐文章于 2024-08-13 14:34:22 发布
最新推荐文章于 2024-08-13 14:34:22 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： VUE.JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangwqi/article/details/107953939
版权

将图标文件放在本地项目static\images文件夹下

修改index.html代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>测试</title>
    <link rel="shortcut icon" type="image/x-icon" href="./static/images/favicon.ico">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

核心代码

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

效果展示

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

前端杨小白
关注
专栏目录
vue 中url 链接左边的小图标更改问题
12-13
在Vue.js应用中，改变URL链接左边的小图标，即浏览器标签页或地址栏上显示的网站logo，通常涉及到一个名为`favicon.ico`的文件。这个小图标是网站的标识，有助于用户快速识别出他们访问的网站。以下是详细的步骤来...
前端页面之网站头像处理
Spring-Li的博客
12-11 497
1、生成favicon.ico文件(生成网站) 2、页面引入 <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
vue脚手架搭建网站之——菜单栏.ico图标的添加
码农小唛、
08-16 4901
vue图标的添加 脚手架搭建好的vue项目，index.html引入了文件，居然失效了！怎么办！一起来配置吧~ vue图标的添加 1.制作合适的图标，并放至与index.html同级目录下 2.引入文件 3.在build &amp;amp;gt; webpack.dev.conf.js 里面添加配置 4.最后一步重新运行一下项目 npm run dev 1.制作合适的图标，并放至与ind...
vue项目中如何修改网页地址栏中小图标（网站logo）+文字
joan_yb的博客
08-13 1050
vue项目中如何修改网页地址栏中小图标（网站logo）+文字
vue项目中favicon.ico的使用
qq_41391628的博客
10-19 3103
1.在index.html中引入ico文件 &lt;link rel="icon" href="./favicon.ico" type="image/x-icon"&gt; 2.在build/webpack.prod.conf.js中，粘如如下代码。 new HtmlWebpackPlugin({ filename: config.build.index, ...
vue的favicon.ico的不能修改替换问题解决
smallteddy.blog.csdn.net
07-17 5548
vue的favicon.ico解决办法： 暴力替换图片： <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> vue文件中index.html文件修改如下： <!DOCTYPE html> <html lang="en"> <head>
vue项目添加favicon的几种方式
高先生的猫
04-08 2974
一、 在public下放置favicon.ico文件 浏览器会自动爬去根目录的favicon.ico文件，然后自动呈现 二、在index.html入口文件添加 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 当然也可以添加其他类型的网址图标，如：png图标 <link rel="shortcut icon" type="image/png" href="favicon.png"/>..
详解vue填坑之解决部分浏览器不支持pushState方法
10-18
pushState是HTML5历史API的一部分，该API允许我们改变浏览器地址栏中的URL而不刷新页面。但当浏览器不支持pushState时，尝试使用history模式会导致应用加载失败。这是因为Vue-router默认会使用history模式，当检测到...
三步解决IE地址栏ICON显示问题
09-22
本篇网页制作技巧教程是新手快速学习制作网站ICON的步骤的补充。今天我在自己的Blog遇到了这样一个问题：我在后台...link rel="shortcut icon" href="http://www.lxdong.cn/favicon.ico" type="image/x-icon" />”
JEECMSx1.8.0_vue_member 会员中心.zip
04-02
- **favicon.ico**：网站的图标，通常显示在浏览器的地址栏或收藏夹中。 - **main.js**：Vue项目的入口文件，通常包含Vue实例的创建和路由配置等。 - **config.js**：可能包含了项目的一些配置信息，如开发环境或...
Vue如何设置网站的小图标favicon
qq_43660897的博客
08-02 1298
把需要设置的icon放到static文件夹中 然后在index.html中引入 <link rel="icon" href="./static/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" /> 然后...
vue引入标题ico图标方法，以及标题跑马灯
突维
06-04 1212
1 先有一个需要图片，png 、jpg ...格式都可以 2 把图片转换成 .con 格式的图标，http://www.bitbug.net/使用比特虫转换 ，目标尺寸：16*16 或者 32*32都行 3 转换后的图标命名为favicon.ico ，放在项目根目录，与 index.html 文件同级 4 在index.html 文件的<head></head&gt...
vue中添加favicon 图标 （3种方法）
IT博客技术分享
11-19 6895
首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。 方法一：修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 缺点：打包后需要将favicon.ico复制到根目录 方法二：修改webpack配置文件 1、找到build下的webpack....
Vue设置浏览器小图标（ICON）
Sophia的博客
11-03 8198
Vue设置浏览器小图标及静态标题
【网站搭建】完整部署django+uwsgi+nginx
qq_45780842的博客
04-08 640
云服务器上部署django + nginx + uwsgi，配置实例详细过程以及加载静态文件的方式。
给网站动态增加一个favicon
@奮 鬥@的专栏
03-29 1289
给网站动态增加一个favicon var docHead = document.getElementsByTagName('head')[0];  var newLink = document.createElement('link');  newLink.rel = 'shortcut icon';  newLink.type = 'image/x-icon';
vue 动态设置系统在浏览器中的标题title和图标favicon
宁静致远
04-06 2053
vue动态修改系统title和favicon
Vue的favicon设置，打包生产开发条件下均可
Dreamy_LIN的博客
07-10 1440
主要是模仿了vue-cli的方式，第一步，将favicon.ico放在static目录下，通过vue-cli 的拷贝插件copy-webpack-plugin，打包后将生成在dist/static的目录下。第二步，修改打包前的index.html，在head里引入favicon.ico，如下，之后运行起来就可以看到了。 <link rel="icon" href="/static/favicon.ico" type="image/x-icon"> 不用vue-cli的话，自己配置拷贝插
如何在Vue 3项目中防止浏览器自动加载favicon.ico文件？
最新发布
10-19
在Vue 3项目中，如果你不想让浏览器自动加载`favicon.ico`文件，可以在项目的`index.html`或`router/index.js`等入口文件中通过配置跳过默认的 favicon 请求，或者直接设置一个空的链接。以下是几种方法： 1. **配置`<link>`标签**: 在`<head>`部分移除默认的`favicon.ico`链接，例如： ```html <head> <!-- 删除或替换默认的 favicon 链接 --> <link rel="icon" href="" /> </head> ``` 2. **修改Webpack配置**: 如果你在使用Webpack，可以配置外部资源加载，如将`favicon.ico`加入到忽略列表中。在`.vue.config.js`文件里添加： ```javascript module.exports = { configureWebpack: { externals: { 'favicon.ico': 'undefined' } } }; ``` 3. **使用路由懒加载**: 如果你是基于Vue Router，可以在需要的时候动态地引入`favicon.ico`，而不是在入口文件中预加载： ```javascript import.meta.glob(`**/favicon.ico`, { alias: 'favicon.ico' }).then(path => { // 使用path变量处理 favicon 路径，这里不做实际操作，可以注释掉或设置为null }); ``` 请注意，虽然上述做法阻止了浏览器的默认请求，但在某些场景下，用户可能会期望看到网站的图标，因此仅为了性能优化而完全禁用`favicon.ico`并不总是最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值