协慌网

登录 贡献 社区

将图标添加到静态 HTML 页面

我有一些纯 HTML 的静态页面,当服务器关闭时会显示这些页面。如何将我制作的 favicon(它的大小为 16x16px,与 HTML 文件位于同一目录;它称为 favicon.ico)作为 “标签” 图标的原样?我已经阅读了 Wikipedia,并看了一些教程,并实现了以下内容:

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

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

更新

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

答案

您可以制作一个. png 图像,然后在静态 HTML 文档<head>

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

大多数浏览器都会从网站的根目录中favicon.ico但是他们并不总是立即使用新的更新它。

但是,我通常会使用您的第二个示例:

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

实际上,要使您的收藏夹图标在所有浏览器中都能正常工作,您必须以正确的大小和格式包含 10 张以上的图像。

我创建了一个应用程序( faviconit.com ),因此人们不必手动创建所有这些图像和正确的标签。

希望你喜欢。