CODEWITHSUNDEEP
htmlwebpackiconswebpack-dev-serverfavicon
Ale
Ale

Reputation: 137

How can I put an icon (favicon) in the browser tab of a website using webpack?

I am working with webpack (it is my first time) and so far I have not had problems, but when I try to put the icon does not work, I have tried many things and I do not know why it does not work.

I've dealt with jpg formats, ico and I don't know what I'm doing wrong.

Some of the tags I've tried with are these:

<link rel="icon" href="./../Icons/name-icon.ico" />
  
<link rel="icon" sizes="192x192" href="./../Icons/name-icon.png" />
    
<link rel="Shortcut Icon" href="./../Icons/favicon.ico" type="image/x-icon" />

<link rel="Shortcut Icon" href="./favicon.ico" type="image/x-icon" />

Upvotes: 1

Views: 3448

Answers (3)

Srini
Srini

Reputation: 320

Use HTML Webpack Plugin:

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: 'js/[name].[contenthash].js',
    path: path.join(__dirname, 'build')
  },
  new HtmlWebpackPlugin({
    template: [path-to-html],
    favicon: [path-to-favicon],
    publicPath: './'
  })
};

Mention public path like this. But do not give ./ for any js or css output filenames in the webpack config.

Upvotes: 2

derpdewp
derpdewp

Reputation: 207

I was able to get this to work without the use of webpack by adding the following link tag to my index.html.

<!DOCTYPE html>
<html>
    <head>
        <link rel="icon" type="image/x-icon" href="images/favicon.ico" />    
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Folder structure:

public/
      images/
            favicon.ico
      index.html

Upvotes: 0

Ayman Morsy
Ayman Morsy

Reputation: 1419

follow this steps:

  • in the head add <link rel="icon" type="image/x-icon" href="favicon.ico" />
  • make sure that favicon.ico file in the root [ in the same level of src ]
  • if it dosen't work Hard reload your browser

if you changed distention path using any plugins like copy-webpack-plugin make sure to update your href='new path'

another solution :

to use a plugin call favicons-webpack-plugin-2

it looks great it generate favicons and inject it

https://www.npmjs.com/package/favicons-webpack-plugin-2

Upvotes: 0

Related Questions