### 什麼是 favicon.ico

favicon 是網站的圖案，在使用 Chrome 的情況下，favicon.ico 會顯示在 chrome tab 上。

![](https://cdn.19site.net/files/de/46/de466ced-d65b-4441-894a-ddace3bc42ec.png '19Site 使用了 19 字樣的 icon')

在網路上有很多不同的網站可以將 png 變成為 ico 檔案。我們只需要把喜歡的圖片使用這些工具變為 ico 檔案就可以直接使用。

### 使用 HTMLWebpackPlugin

在使用 webpack 時，我們可能要使用到 HTMLWebpackPlugin 來建立 html 的進入點 (特別是 react js)。我們可以通過設定 HTMLWebpackPlugin 的參數來設定 favicon。

```js
new HtmlWebpackPlugin({
	favicon: Path.join(__dirname, 'src', 'favicon.ico')
})
```

有關更多的使用方法，可以去 plugin 的官方 github 去查看 :

https://github.com/jantimon/html-webpack-plugin