一.首先可以使用在線工具將普通png或jpg轉(zhuǎn)化為ico圖標(biāo)。

工具地址：https://www.bitbug.net/?rsv_upd=1

推薦使用3232或者4848，16*16比較模糊。

二.保證根目錄index.html里面有ico設(shè)置，如：

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

三.在vue工程目錄build文件夾下webpack.dev.conf.js與webpack.prod.conf.js文件中的HtmlWebpackPlugin中添加一條favicon:'favicon文件的相對(duì)路徑’。

1.favicon內(nèi)填寫(xiě)路徑一定要是相對(duì)路徑

2.修改的文件，dev是開(kāi)發(fā)環(huán)境下，prod是生產(chǎn)環(huán)境下，兩個(gè)都進(jìn)行修改才能保證本地和通過(guò)服務(wù)器訪問(wèn)都有小圖標(biāo)

如：

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: './favicon.ico'  //此處是ico配置項(xiàng)
    })

來(lái)源：http://www.qubiancheng1024.com/details/623fc6c68fe8934aa4300888