title: Webpack URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
body: <p>webpack v4.20.2</p>
  <p>webpack-dev-server v3.1.9</p>
  <p>I'm running a react application with <code>webpack</code> and <code>webpack-dev-server</code> and meet a problem about <code>%PUBLIC_URL%</code>.</p>
  <pre><code>URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
  </code></pre>
  <p>The <code>%PUBLIC_URL%</code> hadn't been compiled in <strong>index.html</strong>, so failed to get the <strong>favicon</strong>.</p>
  <p><strong>public/index.html</strong></p>
  <pre><code>&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot;&gt;
    &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot;&gt;
  &lt;/head&gt;
  </code></pre>
  <p><strong>package.json scripts</strong></p>
  <pre><code>&quot;scripts&quot;: {
      &quot;dev&quot;: &quot;webpack-dev-server --config ./config/webpack.dev.conf.js --open&quot;,
      &quot;build&quot;: &quot;webpack --config ./config/webpack.prod.conf.js&quot;
    },
  </code></pre>
  <p><strong>project structure</strong></p>
  <pre><code>.
  ├── config
  │   ├── webpack.dev.conf.js
  │   └── webpack.prod.conf.js
  ├── public
  │    ├── index.html
  │    ├── favicon.ico
  │    └── manifest.json
  ├── src
  │    ├── index.js
  │     ...
  └── package.json
  </code></pre>
  <p><strong>webpack.dev.conf.js</strong></p>
  <pre><code>module.exports = {
    mode: 'development',
    entry: ['babel-polyfill', './src/index.js'],
    output: {
      filename: '[name].bundle.[hash].js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
    },
    devtool: 'source-map',
    devServer: {
      proxy: {
        '/api': {
          target: 'https://api.example.com',
          changeOrigin: true,
          secure: false,
        },
      },
      publicPath: '/',
    },
    module: {
      rules: [
        // styles
        {
          test: /\.(s)css$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins() {
                  return [autoprefixer()]
                },
                sourceMap: true,
              },
            },
            'sass-loader',
          ],
        },
  
        // javascripts
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: [['import', { libraryName: 'antd' }]],
            },
          },
          exclude: /node_modules/,
        },
  
        // images
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[path][name].[ext]',
                context: 'src',
                outputPath: 'assets/',
              },
            },
          ],
        },
  
        // htmls
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
            },
          ],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
      }),
      new HtmlWebpackPlugin({
        template: './public/index.html',
        filename: './index.html',
      }),
    ],
    ...
  }
  </code></pre>
  <p>Does it related to the <code>publicPath</code> field in the config file?</p>
  <p>How can I fix the error in <code>webpack.dev.conf.js</code> and <code>webpack.prod.conf.js</code>?</p>