带有 GitHub 页面的 Favicon答案

【问题标题】：Favicon with GitHub Pages带有 GitHub 页面的 Favicon
【发布时间】：2016-05-04 09:52:46
【问题描述】：

我正在托管一些带有 GitHub 页面（用户和项目页面）的网站，但它们没有显示其网站图标（在浏览器中）。

<link rel="shortcut icon" type="image/png" href="/favicon.png">

是 GitHub 用<frameset> 显示站点的问题吗？我知道可以显示网站图标（至少使用 Jekyll），但我可以单独显示网站图标吗？

【问题讨论】：

【解决方案1】：

是的，你可以。

将其放入您网页的head 部分：

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

不要将斜线放在favicon.ico 部分之前，这一点很重要。将 favicon.ico 文件放在存储库的主目录中。

【讨论】：

【解决方案2】：

它也适用于 favicon.png

  <head>
    ...
    <link rel="shortcut icon" type="image/png" href="favicon.png">
  </head>

唯一的问题是"/favicon.png"中的斜线/

但这不适用于子页面！

链接应如下所示 - 因此您在每个页面上都有网站图标：

<link rel="shortcut icon" type="image/png" 
      href="{{ "/assets/images/favicon.png"  | absolute_url }}">

解析后的 URL 如下所示： https://pme123.github.io/scala-adapters/assets/images/favicon.png

这需要 Jekyll 项目的 assets/images 文件夹中的 favicon.png。

【讨论】：

【解决方案3】：

我用过

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

还有

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

或

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

这些都不起作用。最后我得到了它的工作

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

其实，上面的任何解决方案似乎都带有一个额外的“？”最后会成功的。

【讨论】：

【解决方案4】：

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

仔细看，我在 href 的末尾添加了一个 "?"。如果你做了这样的事情，然后去你的 github.io 页面并重新加载。你可以使用

ctrl/cmd + shift + r

硬重新加载页面。这将清除您的缓存。之后我希望你能看到收藏图标。

【讨论】：