Question

第一次与杰基尔合作。我正在使用localhost并尝试在网站上设置一个favicon。我确实生成了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>

是吗？我应该将favicon代码放在其他地方吗？

更新

我做了你们告诉我要做的事，但它仍然没有用。

<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标记内，在无脚本标记之外并使用href =“{{site.baseurl}} / favicon.ico”

Answer 1

应将您的图标代码放在<noscript>标记之外。只有在禁用javascript时才会解析<noscript>内的内容。

<强>更新

时间绕圈跑，然后尝试一切：

清除缓存等等。尝试在浏览器中导航至/favicon.ico以确保其已投放。

以隐身/私密模式，多种浏览器或某种方式加载您的网站不同的设备

摆脱rel="shortcut icon"行。它适用于IE8及以下版本，所以无人问津。

尝试使用普通的png图标。保存名为favicon.png的PNG，并使用
<link rel="icon" href="{{ site.baseurl }}/favicon.png" type="image/png" />

杰基尔网站没有设置图标

更新

1 个答案: