diff --git a/frontend/src/images/favicon.png b/frontend/src/assets/favicon.png
similarity index 100%
rename from frontend/src/images/favicon.png
rename to frontend/src/assets/favicon.png
diff --git a/frontend/template/index.html b/frontend/template/index.html
index 80938f1a1bf2470bf7abe258561334ce4c46b4f9..04a72f9ff559cc1916d9944418abb6d3c2f1de21 100755
--- a/frontend/template/index.html
+++ b/frontend/template/index.html
@@ -5,7 +5,7 @@
         <title>Visual DL</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-        <link rel="shortcut icon" type="image/png" href="/static/favicon.png" />
+        <link rel="shortcut icon" type="image/png" href="favicon.png" />
         <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
         <script type="text/javascript" src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
     </head>
diff --git a/frontend/tool/webpack.config.js b/frontend/tool/webpack.config.js
index a6379f64f49c017070a6a7db6ec29c3b85e9adf6..f128fa280d113a1070a7e95f261e7b110fd65625 100644
--- a/frontend/tool/webpack.config.js
+++ b/frontend/tool/webpack.config.js
@@ -7,6 +7,7 @@ const argv = require('yargs').argv;
 const isDev = process.env.NODE_ENV === 'dev';
 const entry = require('./entry');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 function getLoaders(isDev, ext) {
     let arr = ['css-loader'];
@@ -122,7 +123,8 @@ const config = {
         new webpack.LoaderOptionsPlugin({
             test: /\.(styl)$/
         }),
-        new ExtractTextPlugin({filename: '[name].css'})
+        new ExtractTextPlugin({filename: '[name].css'}),
+        new HtmlWebpackPlugin({favicon: 'src/assets/favicon.png'})
     ],
     externals: {
         dagreD3: 'dagre-d3',