Solution 1 :

You have used the default layout as shown here. which gives you the code

<!DOCTYPE html>
        <link rel="stylesheet" type="text/css" href="/css/main.css">
    <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>
    <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.


   <li><a href="mailto:[email protected]">email</a></li>
   <li><a href=""></a></li>

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 }}.

Problem :

I have been trying to get website icon/favicon to work on my new 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:
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="" />

None of the above have worked.

What I expect:
same favicon from my previous website:
same favicon from my previous website

What I got:
currently what is showing up:
currently what is showing up

favicon not rendering on my LinkedIn page:
favicon not rendering on my LinkedIn page


Comment posted by Mindy Ng

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

Comment posted by Mindy Ng

favicon finally showed up for chrome (thank you!) though why doesnt it show up on LinkedIn page?

Comment posted by m24197

I do not think that favicon will be shown on LinkedIn, instead ‘og:image’ will be shown.

Comment posted by…

this helped a lot more: