My browser tab icon is not showing up after I push my repo to github. It shows up fine when I test it on localhost.
Left shows my website hosted on github, right shows my website on local host
Here's my code in index.html:
<!DOCTYPE html>
<html lang="">
<head>
<link rel="icon" href="public/favicon.ico" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: "Futura-Book";
margin: 0;
}
</style>
</head>
<body>
<!-- noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript -->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Would appreciate any help and suggestions, thank you!
Juan Pablo Isaza
The icon should be in the root of dist folder. So removing the public from the path should fix the problem.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
If it does not work, change the name of favicon.ico to something else.
<link rel="shortcut icon" href="something.ico" type="image/x-icon" />