github.io website icon/favicon not rendering

Question

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:

m24197 · Answer 1 · 2021-02-10T10:02:51.980

0

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:mindyng8855@gmail.com">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 }}.

edited Feb 10 '21 at 10:02

answered Feb 10 '21 at 09:44

m24197

1,038
1
4
12

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 – Mindy Ng Feb 14 '21 at 22:10
favicon finally showed up for chrome (thank you!) though why doesnt it show up on LinkedIn page? – Mindy Ng Feb 27 '21 at 04:29
I do not think that favicon will be shown on LinkedIn, instead 'og:image' will be shown. – m24197 Apr 07 '21 at 17:48
this helped a lot more: https://stackoverflow.com/questions/62743304/customize-preview-image-for-github-pages – Mindy Ng May 14 '21 at 17:58

score 0 · Answer 2 · edited Feb 19 '23 at 23:15

0

looks like the issue was on LI side. their code update eventually got my github.io site icon to render about a year or more ago

screeenshot from my LI page's Featured Carousel

edited Feb 19 '23 at 23:15

Fcmam5

4,888
1
16
33

answered Feb 13 '23 at 22:19

Mindy Ng

1
1

github.io website icon/favicon not rendering

2 Answers2