Веб-сайт Jekyll не устанавливает значок значка

Впервые работаю с Джекилом. Я работаю на локальном хосте и пытаюсь установить значок на веб-сайте. Я сгенерировал image.ico и поместил сгенерированный код в файл head.html. Он генерирует изображение в моей папке _site, но не отображается на значке вкладки. Что я делаю не так?

Я сгенерировал значок сайта: https://www.favicon-generator.org, который сказал мне использовать это в моем файле:

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

Так я сделал в своем файле head.html, и изображение находится в моей корневой папке:

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

Я не знаю, действительно ли это необходимо, но на всякий случай вот мой файл header.html:

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

Это правильно? Должен ли я поместить код фавикона в другое место?

Обновлять:

Я сделал то, что вы, ребята, сказали мне сделать, но это все еще не работает.

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

Это было так? Он находится внутри тега head, вне тега no script и с использованием href="{{ site.baseurl }}/favicon.ico"


javascript jekyll html jquery favicon
person U23r    schedule 24.12.2017    source источник
comment
Он должен быть непосредственно в <head>, а не <noscript>, и использовать {{ site.baseurl }}/favicon.ico.   -  person Ry-♦    schedule 24.12.2017
comment
@Ryan все еще не работает после этого. Это было (сообщение обновлено), верно?   -  person U23r    schedule 24.12.2017
comment
Ваша консоль что-нибудь говорит? Может быть, файл находится не там, где вы думаете, в _site?   -  person elsyr    schedule 24.12.2017
comment
Я не уверен, что именно было не так, но я попробовал все, что вы и @Eric сказали, и, как я уже сказал, изменение файла png сработало. Но и вам спасибо за попытку помочь.   -  person U23r    schedule 25.12.2017

Ответы (1)


arrow_upward
2
arrow_downward

Следует поместить код значка вне тега <noscript>. Материал внутри <noscript> анализируется только в том случае, если javascript отключен.

ОБНОВЛЕНИЕ

Время бегать по кругу и пробовать все тогда:

Очистите кеш и прочее. Попробуйте перейти к /favicon.ico в браузере, чтобы убедиться, что он обслуживается.

Загрузите свой сайт в режиме инкогнито/приватном режиме, в нескольких браузерах или на другом устройстве.

Избавьтесь от строки rel="shortcut icon". Это для IE8 и ниже, так что никого это не волнует.

Попробуйте использовать обычный фавикон png. Сохраните файл PNG под названием favicon.png и используйте
<link rel="icon" href="{{ site.baseurl }}/favicon.png" type="image/png" />

person Eric    schedule 24.12.2017
comment
Большое спасибо!!! Я пробовал каждый пункт, который вы сказали, и ничего не работает... до последнего! Я перешел на favicon.png после того, как сделал все, что вы сказали раньше, и это сработало! Спасибо! - person U23r; 25.12.2017