【问题标题】:Jekyll website not setting faviconJekyll 网站没有设置网站图标
【发布时间】:2017-12-24 02:58:41
【问题描述】:

第一次与 Jekyll 合作。我正在使用 localhost 并尝试为网站设置一个图标。我确实生成了 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"

【问题讨论】:

  • 应该直接在&lt;head&gt;,而不是&lt;noscript&gt;,使用{{ site.baseurl }}/favicon.ico
  • @Ryan 在此之后仍然无法工作。是这个(更新后),对吧?
  • 你的控制台说什么了吗?也许该文件不在您认为的 _site 中?
  • 我不确定到底出了什么问题,但我尝试了你和@Eric 所说的一切,就像我说的那样,更改为 png 文件有效。但也感谢您提供帮助。

标签: javascript jquery html jekyll favicon


【解决方案1】:

应将您的图标代码放在&lt;noscript&gt; 标记之外。 &lt;noscript&gt; 中的内容只有在禁用 javascript 时才会被解析。

更新

是时候绕圈跑,然后尝试一切:

清除你的缓存等等。尝试在浏览器中导航到 /favicon.ico 以确保它正在被提供。

以隐身/私人模式、多个浏览器或 不同的设备

去掉rel="shortcut icon" 行。 IE8及以下,没人关心。

尝试使用普通的 png 图标。保存一个名为 favicon.png 的 PNG,然后使用
&lt;link rel="icon" href="{{ site.baseurl }}/favicon.png" type="image/png" /&gt;

【讨论】:

  • 非常感谢!!!我尝试了你说的每一个项目,但没有任何效果......直到最后一个!完成您之前所说的所有事情后,我更改为 favicon.png 并且成功了!谢谢!
猜你喜欢
  • 1970-01-01
  • 2013-08-20
  • 1970-01-01
  • 2018-10-29
  • 1970-01-01
  • 1970-01-01
  • 2021-04-20
  • 1970-01-01
相关资源
最近更新 更多