You have used the default layout as shown here. which gives you the code
Header:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/cv">CV</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<div class="container">
And in between you have your own code in which you have used the favicon, and it is outside the first head tag, and inside the second, which is causing the problem.
Footer:
</div>
<footer>
<ul>
<li><a href="mailto:[email protected]">email</a></li>
<li><a href="https://github.com/mindyng">github.com/mindyng</a></li>
</ul>
</footer>
</body>
</html>
Put the favicon inside the head tag of the layout or do not close the head tag in the layout, instead close it in the {{ content }}.
I have been trying to get website icon/favicon to work on my new GitHub.io site for a while and have not had any luck. I have been working in my home directory where my index.html file is located.
location of my favicon:
In index.html’s section, I have tried all the below at different times and even did hard refresh:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" type="image/x-png" href="favicon.png">
<link rel="icon" href="http://mindyng.github.io/mindy.ico?v=2" />
None of the above have worked.
What I expect:
same favicon from my previous website:
What I got:
currently what is showing up:
favicon not rendering on my LinkedIn page:
Thank you. So what I got from your suggestion is to copy what I had in my index.html header to my _layouts/default.html. I did that and my favicon has yet to show up in my LI profile. Please advise
favicon finally showed up for chrome (thank you!) though why doesnt it show up on LinkedIn page?
I do not think that favicon will be shown on LinkedIn, instead ‘og:image’ will be shown.
