将网站图标添加到静态 HTML 页面

新手上路,请多包涵

我有一些纯 HTML 的静态页面,当服务器出现故障时我们会显示这些页面。我怎样才能把我制作的图标(它是 16x16 像素,它与 HTML 文件位于同一目录中;它被称为 favicon.ico)作为“选项卡”图标?我已经阅读了维基百科并查看了一些教程并实现了以下内容:

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

但它仍然不想工作。我正在使用 Chrome 来测试网站。根据维基百科,.ico 是可在所有浏览器类型上运行的最佳图片格式。

更新

我无法让它在本地工作,尽管代码检查它只有在服务器开始为站点提供服务后才能真正正常工作。只需尝试将其推送到服务器并刷新缓存,它应该可以正常工作。

原文由 TheLegend 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 739
2 个回答

您可以制作 .png 图像,然后在静态 HTML 文档的 <head> 标记之间使用以下片段之一:

 <link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

原文由 Hazy McGee 发布,翻译遵循 CC BY-SA 4.0 许可协议

大多数浏览器会从站点的根目录中获取 favicon.ico 而无需被告知;但他们并不总是立即用新的更新它。

但是,我通常会选择你的第二个例子:

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

原文由 Codecraft 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题