Jekyll网站无法设置网站图标

3

我第一次使用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>

这样做对吗?我应该把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标签内,no script标签外使用href="{{ site.baseurl }}/favicon.ico"


它应该直接放在<head>中,而不是<noscript>,并且使用{{ site.baseurl }}/favicon.ico - Ry-
@Ryan 在这之后还是不起作用。就是这个(帖子已更新),对吧? - U23r
1
你的控制台有输出吗?也许文件不在你认为的_site目录下? - elsyr
我不确定到底出了什么问题,但我尝试了你和@Eric说的每一件事情,并且像我说的那样,改成了png文件。感谢你们的帮助。 - U23r
1个回答

2
应该将图标代码放在<noscript>标签之外。如果启用了JavaScript,则只会解析<noscript>内部的内容。
更新:
现在是时候开始尝试一切了:
清除缓存等。尝试在浏览器中导航到/favicon.ico,以确保它正在提供服务。
在隐身/私人模式下加载您的网站,或使用多个浏览器或不同设备。
摆脱rel="shortcut icon"行。这是针对IE8及以下版本的,所以没有人关心。
尝试使用普通的PNG图标。保存一个名为favicon.png的PNG文件,并使用
<link rel="icon" href="{{ site.baseurl }}/favicon.png" type="image/png" />

非常感谢!!! 我尝试了你说的每一项,但都没用...... 直到最后一个! 在做完你之前说的所有事情后,我将其更改为favicon.png,然后它起作用了! 谢谢! - U23r

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接