logo标签列表

Favicon with GitHub Pages

htmlgithubfavicongithub-pages
55

我在GitHub Pages上托管了几个网站（包括用户页面和项目页面），但是它们未在浏览器中显示它们的网站图标。

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

问题是GitHub显示网站时使用了<frameset>吗？我知道可以显示favicon（至少使用Jekyll），但我能否单独显示一个favicon？

如果使用了框架集，则框架集本身必须指定favicon。您不能从其中一个内部框架指定它。 - CBroe
我不知道如何在GitHub Pages中从框架集指定网站图标。 - Rokin
2
试试看这些是否有帮助：https://dev59.com/r10a5IYBdhLWcg3wPWlN - CBroe
6个回答
70

可以的。

将这段代码放入网页的 head 部分：

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

在favicon.ico部分之前不要加斜杠很重要。将favicon.ico文件放在您的代码库主目录中。

我在我的Github页面（非Jekyll）上也遇到了这个问题。这个答案对于我在Chrome、Chromium和Firefox中都有效。非常感谢！ - Matt Bruzek
12

我使用了

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

实际上，似乎在结尾加上一个"?"，任何上述解决方案都可以解决问题。

非常好，工作得很顺利！问号符号具体是做什么用的？ - Ângelo Polotto
1
@ÂngeloPolotto 没问题！我不确定，但我认为它意味着“查询”，请参考https://teamtreehouse.com/community/meaning-of-a-question-mark-in-the-url。 - wooohooo
12

它也可以使用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。

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

请仔细查看，我在href的末尾添加了一个"?"。 如果您做了这样的事情，请转到您的github.io页面并进行硬刷新。 您可以使用

ctrl/cmd + shift + r

来进行硬刷新。这将清除您的缓存。 之后，我希望您能看到收藏图标。

1
只是想补充一下...
如果您使用自定义域名，只需将favicon.ico文件放在根目录中，浏览器就会找到它。例如，如果您的自定义域名是something.domain.com，则favicon将位于根目录，并且可以在浏览器期望的位置something.domain.com/favicon.ico找到。
然而，如果您没有使用自定义域名，您的存储库内容将在username.github.io/repo-name/上可用。如果您向此存储库添加一个favicon，favicon将在username.github.io/repo-name/favicon.ico上可用，但浏览器将在根域名username.github.io/favicon.ico上查找它。
但是！！您可以通过创建一个名为username.github.io的存储库，在username.github.io/favicon.ico处放置一个favicon。如果存储库具有这个确切的名称，GitHub页面将自动打开，并且内容可在username.github.io上使用，有点像您的GitHub主页！
然后，如果您在这里放置一个favicon，所有没有自定义域名的GitHub页面都会自动使用这个favicon。

https://github.com/orgs/community/discussions/63631

注意：这也适用于组织。
0

另外，请确保您的ico或img为16 x 16像素。这也是我的问题。

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