每個網(wǎng)站都有自己的圖標（favicon），除了便于識別與書簽收藏，也是一個廠牌吧。瀏覽器可以將favicon顯示于瀏覽器的地址欄中，也可置于書簽列表的網(wǎng)站名前，還可以放在標簽式瀏覽界面中的頁標題前。

但是我們自己的網(wǎng)站，例如博客怎么設置這個圖標（favicon）呢？

首先我們準備好自己的favicon即favicon.ico，一般是16x16像素或者32x32像素，一般在保證favicon清晰度的情況下越小越好，有利于提升網(wǎng)站速率。
制作favicon有很多在線的網(wǎng)站，找合適的即可。

• 情況1:使用vue-cli方法初始化的項目結構

image.png

我們找到圖中的文件，將其中的代碼加一句favicon的設置，如下:

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: path.resolve('favicon.ico'),
      ...
    }),

具體原因可以參考HtmlWebpackPlugin插件的屬性：https://github.com/jantimon/html-webpack-plugin#configuration

• 情況2:使用nodejs設置，在服務端設置favicon
  只需一句話即可，如下：

app.use(favicon(path.join(__dirname, 'public/images', 'favicon.ico')));

• 情況3:使用link標簽設置

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

關于這種方法更具體的知識和解釋可以參考：
https://zhangge.net/4344.html