CODEWITHSUNDEEP
javascriptnode.jswebpackwebpack-dev-server
xahovuzu
xahovuzu

Reputation: 361

Index.html template isn't loading favicon for HtmlWebpackPlugin

I'm trying to load a favicon using the index.html that is the template for the HtmlWebpackPlugin but it's not loading.

That is how my Webpack config looks like:

'use strict'

const webpack = require('webpack')
const { join, resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: join(__dirname, 'src', 'index'),
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.s?css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  },
  devServer: {
    contentBase: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: join(__dirname, 'public', 'index.html')
    })
  ]
}

And that is my index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="shortcut icon" href="favicon.ico">

  <title>React App</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>

  <div id="root"></div>
</body>

</html>

Upvotes: 3

Views: 5914

Answers (2)

Hyfy
Hyfy

Reputation: 344

HtmlWebpackPlugin has an option called favicon which lets you inject an icon link into the header in development or production.

        new HtmlWebpackPlugin({
            title: "Title Here",
            template: "./src/index.html",
            favicon: "./src/favicon.ico",
            inject: "body",
        })

You should also have a rule to grab the icon, and also import it in your bundler file.

            // # Target: favicon
            {
                test: /\.ico$/i,
                type: "asset/resource",
                // Use 'generator' to output unique name (based on webpack pattern e.g. [name], [ext], etc.)
                generator: {
                    filename: "[name][ext][query]"
                }
            },

NB: I'm writing for Webpack 5

I'm not sure if Webpack 4 has the type: "asset/resource" feature, but I assume you can achieve the same thing with file-loader and its options.

            {
                test: /\.ico$/i,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]"
                    }
                }
            },

*Not guaranteed for Webpack 4.

Upvotes: 3

Dan Inactive
Dan Inactive

Reputation: 10060

HTMLWebpackPlugin will not parse the HTML to find your resources. You'll need to include it like this in your template:

index.html

<link rel="shortcut icon" href="${require('./favicon.ico')}">

You'll also need to include file-loader for your .ico file:

webpack.config.js

{
   test: /\.ico$/,
   loader: 'file-loader'
}

Upvotes: 6

Related Questions