关于Vue项目中favicon.ico的应用配置&取消favicon.ico请求

已于 2022-05-10 15:52:55 修改
阅读量6k 收藏 11
点赞数 5
文章标签： vue es6 vue.js webpack
于 2020-12-15 10:50:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daisymao0205/article/details/111193299
版权
本文介绍了如何在Vue项目中应用和配置favicon.ico，通常将其置于static目录下。在开发和生产环境中，分别在webpack.dev.conf.js和webpack.prod.conf.js的HtmlWebpackPlugin中添加对应的favicon配置。同时，文章还提供了取消favicon.ico请求的方法，在index.html中通过<link rel="icon" href="data:;base64,=">实现。" 124693131,9228236,LeetCode 三数之和的解决方案与复杂度分析,"['算法', 'Leetcode', '数组操作', '复杂度分析']
摘要由CSDN通过智能技术生成

目录

favicon.ico的应用配置

拓展（取消favicon.ico请求）

favicon.ico的应用配置

首先，一般把favicon.ico（固定命名）放在static里，如下图：

在开发环境中，配置 webpack.dev.conf.js里的plugins

new HtmlWebpackPlugin里加上 favicon: './static/favicon.ico',相对路径

最低0.47元/天 解锁文章
daisymao0205
关注
解决Vue 项目打包后favicon无法正常显示的问题
12-07
在开发中经常需要为项目添加favicon以增加网站辨识度，在使用Vue开发中出现添加的favicon.ico无法显示问题，如下给出解决方法： 问题分析： 问题根源在于路径，如果使用http链接作为favicon地址一般不是出现问题，出现问题的基本在使用本地图片作为favicon。 如下常规配置： 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下，同时在index.html中正确配置favicon路径。 项目启动后会发现该中配置方式并没有生效： 打包后的项目同样存在问题。 (很抱歉的说，写到这里才发现我目前并没有解决本地无法添加favicon的问题，只是解
在node.js中怎么屏蔽掉favicon.ico的请求
10-20
主要介绍了在node.js中怎么屏蔽掉favicon.ico的请求,非常不错，具有参考借鉴价值，需要的朋友可以参考下
No static resource favicon.ico.
weixin_73060959的博客
08-05 485
异常解决
vue项目发布后禁止 favicon.ico 请求
晚星的博客
11-12 1424
favicon.ico 图标用于收藏夹图标和浏览器标签上的显示，如果不设置，浏览器会请求网站根目录的这个图标，如果网站根目录也没有这图标会产生 404。出于优化的考虑，要么就有这个图标，要么就禁止产生这个请求。 在做 H5 混合应用的时候，不希望产生 favicon.ico 的请求。 可以在页面的 区域，加上如下代码实现屏蔽： <link rel="icon" href="data:;base64,="> 或者详细一点 <link rel="icon" href="data:ima.
Vue项目中favicon.ico的应用配置&取消favicon.ico请求
weixin_43286206的博客
10-26 1145
favicon.ico的应用配置 首先，一般把favicon.ico（固定命名）放在static里，如下图： 在开发环境中，配置 webpack.dev.conf.js里的plugins new HtmlWebpackPlugin里加上 favicon: ‘./static/favicon.ico’,相对路径 项目打包部署，便配置 webpack.prod.conf.js里的plugins new HtmlWebpackPlugin里加上 favicon: ‘./static/favicon.ico’,相对
favicon.ico 怎么加在vue的项目中
servepeople的博客
08-29 1082
这个图标通常是网站的标识性图像，可以帮助用户更容易地识别和区分不同的网站。它可以是网站的标志、图标或其他与网站相关的图像。如果没有找到该文件，浏览器可能会使用默认的图标，或者不显示图标。如果浏览器仍然显示旧的图标，可能是因为浏览器缓存了之前的图标。请注意，不同浏览器可能在刷新缓存方面有不同的行为，所以如果你无法立即看到变化，可能需要进行更多的操作。如果你的项目正在运行，停止运行并重新启动项目，以便浏览器加载新的。
vue中添加favicon.ico
qq_39598092的博客
06-19 2357
方法一：修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 缺点：打包后需要将favicon.ico复制到根目录 方法二：修改webpack配置文件 1、找到build下的webpack.dev.conf.js文件 new HtmlWebpackPlugin({...
vue项目添加favicon的几种方式
高先生的猫
04-08 2906
一、 在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 自定义网页图标 favicon.ico 和 网页标题
朝阳39的博客
01-09 1497
在内添加。
vue项目添加网页图标 favicon.ico
weixin_48102654的博客
01-05 877
然后在html入口文件标签中添加link引用。将下载的ico放入public目录下。
如何优雅地处理Django中的favicon.ico图标详解
12-25
本文主要给大家介绍了关于优雅处理Django中favicon.ico图标的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧 起步 默认情况下，浏览器会访问网站 “/favicon.ico” 这个地址获取网站的...
vue favicon设置以及动态修改favicon的方法
12-07
最近写公司项目时，动态更新favicon 动态更新之前需要有一个默认的favicon。 目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 favicon图片放到该文件夹下。 然后再index.html中添加： <...
vue小图标favicon不显示的解决方案
08-29
在 Vue 项目中，小图标 Favicon 不显示的原因可能有多种，例如： * Favicon.ico 文件路径错误 * Webpack 配置错误 * 缓存问题 三、解决方案 为了解决 Vue 小图标 Favicon 不显示的问题，我们可以采取以下步骤： ...
在vue项目中使用favicon.ico
05-22 1154
一般项目使用favicon.ico都是在index.html头部head中加入代码 <linkrel="shortcut icon"type="image/x-icon"href="favicon.ico"/> vue项目中使用和上面的方法不同，需要配置webpack才能使avicon.ico生效，记录一下，以备后用。 webpack.dev.conf.js文件中修改 let path = require('path') // 增加 new HtmlWebpa...
vue中添加favicon 图标 （3种方法）
IT博客技术分享
11-19 6820
首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。 方法一：修改index.html文件 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 缺点：打包后需要将favicon.ico复制到根目录 方法二：修改webpack配置文件 1、找到build下的webpack....
Vue中Favicon.ico配置
Moke的博客
05-04 406
在Vue中配置favicon.ico小图标
vue项目中配置favicon图标
m0_67841039的博客
08-25 899
vue项目中配置favicon图标
2024年前端最全Typora设置高亮，前端驱动面试
2401_84619467的博客
05-06 610
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
es6中set和map的区别
最新发布
hexadecimal_001的博客
09-13 473
在ES6（ECMAScript 2015）中，Set和Map是两种新的集合类型，它们提供了更高级的数据结构来存储唯一值或键值对集合。尽管它们在功能上有些相似，但它们在用途和内部机制上存在一些关键区别。
vue2 根据打包不同 动态修改favicon.ico
06-06
你可以在 Vue2 中使用 `html-webpack-plugin` 插件来动态修改 `favicon.ico`。这可以通过以下步骤实现： 1. 安装 `html-webpack-plugin` 插件： ``` npm install html-webpack-plugin --save-dev ``` 2. 在 `webpack.config.js` 中引入插件： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); ``` 3. 在 `webpack.config.js` 中的 `plugins` 中添加插件： ```javascript plugins: [ new HtmlWebpackPlugin({ favicon: 'path/to/your/favicon.ico' }) ] ``` 这里的 `path/to/your/favicon.ico` 是你要设置的 `favicon.ico` 的路径。 4. 在 `package.json` 中添加一个脚本来指定环境变量，以便在打包时动态修改 `favicon.ico`： ```json "scripts": { "build": "NODE_ENV=production webpack" } ``` 5. 在 `index.html` 中添加 `link` 标签来引用 `favicon.ico`： ```html <link rel="shortcut icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.favicon %>"> ``` 这里的 `<%= htmlWebpackPlugin.options.favicon %>` 是在 `plugins` 中设置的 `favicon` 属性。这样就可以根据打包不同动态修改 `favicon.ico` 了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值