让网站在浏览器网址前面显示小图标

方法一：比较麻烦，修改脚手架达到效果
效果图：

项目是基于vue2.0的。

1. 打开npm官网 https://www.npmjs.com
   搜索 favicons-webpack-plugin 插件

2. 下载包

npm install --save-dev favicons-webpack-plugin

1. 在webpack.dev.conf.js中添加

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

1. plugins 数组中添加

plugins: [
  new FaviconsWebpackPlugin({
    // Your source logo 
    logo: './logo.png',
    // The prefix for all image files (might be a folder or a name) 
    prefix: 'icons-[hash]/',
    // Emit all stats of the generated icons 
    emitStats: false,
    // The name of the json containing all favicon information 
    statsFilename: 'iconstats-[hash].json',
    // Generate a cache file with control hashes and 
    // don't rebuild the favicons until those hashes change 
    persistentCache: true,
    // Inject the html into the html-webpack-plugin 
    inject: true,
    // favicon background color (see https://github.com/haydenbleasel/favicons#usage) 
    background: '#fff',
    // favicon app title (see https://github.com/haydenbleasel/favicons#usage) 
    title: 'Webpack App',

    // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage) 
    icons: {
      android: true,
      appleIcon: true,
      appleStartup: true,
      coast: false,
      favicons: true,
      firefox: true,
      opengraph: false,
      twitter: false,
      yandex: false,
      windows: false
    }
  })
]

index.html 和 logo.png的位置

• 方法二：( 建议使用 .ico的后缀名 )

//index.html
<link rel="icon" sizes="48x48" href="/favicon.png">

这个方法就是这么简单的~~~~