设置网站图标（favicon）

每个网站都有自己的图标（favicon），除了便于识别与书签收藏，也是一个厂牌吧。浏览器可以将favicon显示于浏览器的地址栏中，也可置于书签列表的网站名前，还可以放在标签式浏览界面中的页标题前。

但是我们自己的网站，例如博客怎么设置这个图标（favicon）呢？

首先我们准备好自己的favicon即favicon.ico，一般是16x16像素或者32x32像素，一般在保证favicon清晰度的情况下越小越好，有利于提升网站速率。
制作favicon有很多在线的网站，找合适的即可。

• 情况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