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!
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" />