Jekyll website not setting favicon

Question

First time working with Jekyll. I'm working localhost and trying to set a favicon to the website. I did generate the image.ico and put the code generated on my head.html file. It generates the image on my _site folder but it does not show on the tab icon. What am I doing wrong?

I generated the favicon on: https://www.favicon-generator.org that told me to use this on my file:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

So I did on my head.html file and the image is on my root folder:

<head>

    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
    <script src="{{ site.baseurl }}/js/jquery.min.js"></script>
    <script src="{{ site.baseurl }}/js/skel.min.js"></script>
    <script src="{{ site.baseurl }}/js/skel-layers.min.js"></script>
    <script src="{{ site.baseurl }}/js/init.js"></script>

    <noscript>
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="{{ site.baseurl }}/css/skel.css" />
        <link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" />
        <link rel="stylesheet" href="{{ site.baseurl }}/css/style-xlarge.css" />
    </noscript>
</head>

I don't know if this is really necessary but just in case, this is my header.html file:

<!-- Header -->
<header id="header" class="skel-layers-fixed">
    
    
    <h1><a href="{{ site.baseurl }}/" class="site-title" ><img class="image full" style="width: 35%; height: 85%; margin-top: 2px; margin-bottom: 5px; " src="images/logo.png"/></a></h1>
    <nav id="nav">
        <ul>
            <li><a href="{{ site.baseurl }}/">Home</a></li>
            <li><a href="{{ site.baseurl }}/team.html">Item 1</a></li>
            <li><a href="{{ site.baseurl }}/amitis.html">Item 2</a></li>
            <li><a href="{{ site.baseurl }}/enactusTogether.html">Item 3</a></li>
            <li><a href="{{ site.baseurl }}/awards.html">Item 4</a></li>
            <!-- <li><a href="{{ site.baseurl }}/blog.html">Blog</a></li> -->
            {% for page in site.pages %}
                  {% if page.title %}
                    <li><a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
                  {% endif %}
            {% endfor %}
            <!-- <li><a href="#" class="button special">Sign Up</a></li> -->
        </ul>
    </nav>
</header>

Is that right? Should I put the favicon code in somewhere else?

Update:

I did what you guys told me to do but it is still not working.

<head>

    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <link rel="shortcut icon" href="{{ site.baseurl }}/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="{{ site.baseurl }}/favicon.ico" type="image/x-icon" />

    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
    <script src="{{ site.baseurl }}/js/jquery.min.js"></script>
    <script src="{{ site.baseurl }}/js/skel.min.js"></script>
    <script src="{{ site.baseurl }}/js/skel-layers.min.js"></script>
    <script src="{{ site.baseurl }}/js/init.js"></script>

    <noscript>
        <link rel="stylesheet" href="{{ site.baseurl }}/css/skel.css" />
        <link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" />
        <link rel="stylesheet" href="{{ site.baseurl }}/css/style-xlarge.css" />
    </noscript>
</head>

It was like this? It's inside the head tag, outside the no script tag and using href="{{ site.baseurl }}/favicon.ico"

It should be directly in <head>, not <noscript>, and use {{ site.baseurl }}/favicon.ico. — Ry-
@Ryan still not working after this. It was this (post updated), right? — U23r
Does your console say anything? Maybe the file isn't where you think it is in _site? — elsyr
I'm not sure what was wrong exactly but I tried everything that you and @Eric said, and like I said, change to a png file worked. But thank you too for trying to help. — U23r

Eric Eric · Accepted Answer · 2017-12-24T03:04:01

Should put your icon code outside the <noscript> tag. Stuff inside <noscript> is only parsed if javascript is disabled.

UPDATE

Time to run in circles and try everything then:

Clear your caches and whatnot. Try to navigate to /favicon.ico in your browser to make sure it's being served.

Load your site in incognito/private mode, or on multiple browsers, or on a different device

Get rid of the rel="shortcut icon" line. It's for IE8 and below, so nobody cares.

Try using a plain png favicon. Save a PNG called favicon.png, and use
<link rel="icon" href="{{ site.baseurl }}/favicon.png" type="image/png" />

Jekyll website not setting favicon

Update:

1 Answers