'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" />
htmlwebpackiconswebpack-dev-serverfavicon


Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ayman Morsy
Solution 2 derpdewp

Related Questions