1 先有一个需要图片，png 、jpg ...格式都可以

2 把图片转换成 .con 格式的图标  ，http://www.bitbug.net/使用比特虫转换 ，目标尺寸：16*16 或者 32*32都行

3 转换后的图标命名为 favicon.ico ，放在项目根目录，与 index.html 文件同级

4 在 index.html 文件的<head></head> 内引入  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" />

5 在 webpack.dev.conf.js 文件中配置 ，如下所示

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: './favicon.ico'             此处是配置项
    })

6  npm run dev    如果报错

7  刷新页面即可

vue项目浏览器ioc小图标的更多相关文章

  1. vue项目使用阿里巴巴矢量图标库教程

    前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...

  2. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

  3. MintUI引入vue项目以及引入iconfont图标

    官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...

  4. reactjs 项目使用 iconfont 小图标以及使用带颜色 inconfont 小图标

    在 reactjs 项目中是所有小图标目前主要分为两类使用方式,第一类通过 CSS 引入的方式使用,第二类使用 JS 的方式引入使用. 注册-登录-建立项目-选中图标添加到购物车-添加至项目-下载到本 ...

  5. vue项目中配置favicon图标

    如上图所示,页面顶部的小图标会让页面显得高大上,一般把这种图标叫做favicon图标.利用vue-cli脚手架搭建的项目,如果不手动配置,页面中是不会显示favicon图标. 不配置是这样子的: fa ...

  6. 在vue项目引入阿里巴巴矢量图标

    1.在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.到我的项目中,将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹(名字自定义),将 ...

  7. 使用<link> 标签定义浏览器标题栏小图标

    使用link标签的rel属性,设置成icon.同时设置href属性值为小图标图片的url. <link rel=" icon " href="image/icon. ...

  8. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  9. Vue项目中使用svg图标

    svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader ...

  10. [html]浏览器标签小图标LOGO简单设置

    方式一:如果是一个项目一个LOGO 的话,直接接把图片像素设置成16x16像素,然后改名favicon.ico放在项目根部目录就可以,自动识别的! 方式二:简单设置! 首先找一个图片把像素设置成16x ...

随机推荐

  1. DPU02是一个高度集成的USB转UART的桥接控制器

    DPU02是一个高度集成的USB转UART的桥接控制器,该产品提供了一个简单的解决方案,可将RS-232设计更新为USB设计,并简化PCB组件空间.该DPU02包括了一个USB 2.0全速功能控制器. ...

  2. 【服务器数据恢复】raid5硬盘同步数据未完成时关机的数据恢复案例

    服务器数据恢复环境:某公司一台服务器组建了一组raid5磁盘阵列,作为共享存储池使用.该服务器存储数据库文件和普通文件. 服务器故障&检测:RAID5磁盘阵列的硬盘掉线导致服务器操作系统识别不 ...

  3. 阿里云ECS部署单机kafka 并对外提供服务（带认证）

    1. zk配置(单机) zoo.cfg tickTime=2000initLimit=10syncLimit=5dataLogDir=/data/zookeeper/log/dataDir=/data ...

  4. Java期末课程设计--购物车的GUI（编辑中）

    实现的功能 基本功能 使用admin登录 对商品表内的商品添加至购物车 结算价格 扩展功能 用户的登录注册(基于数据库) 钱包功能 结算前录入地址信息 丰富GUI(指插入图片) 管理员界面(对商品进行 ...

  5. BigDecimal精度等注意事项

    1.BigDecimal运算时尽量传入字符串, 反例: BigDecimal num=new BigDecimal(75); num.multiply(new BigDecimal(0.5)).set ...

  6. C与C++字符串比较

    #include<iostream> #include<string> using namespace std; int main() { char a[] = "a ...

  7. R7-1 字符排队

    R7-1 字符排队 分数 15 全屏浏览题目 切换布局 作者 颜晖 单位 浙大城市学院 本题要求编写程序,将给定字符串中的字符,按照ASCII码顺序从小到大排序后输出. 输入格式: 输入是一个以回车结 ...

  8. maven 通用pom.xml

    1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http:// ...

  9. ref、reactive、toRef、toRefs使用与区别

    reactive 传参:reactive(arg),arg只能是对象 arg为普通对象 返回响应式对象,不管层级多深,都能响应 使用:获取数据值的时候直接获取,不需要加.value 特点:解构.扩展运 ...

  10. java第七周学习情况

    这个星期 主要是在搞学校在暑期安排的实验报告b 怎么说来着 才知道这个消息几天  这是对学习不上心的体现啊 题目也有点多 慢慢做呗 而Java这边还是看些相关知识呗 说实话 已经学不太懂了 不过没关系 ...