首页 文章

将favicon添加到静态HTML页面

提问于
浏览 次
473

我有一些 static pages 只是纯HTML，我们在服务器关闭时显示 . 我怎样才能把我制作的图标（它与HTML文件放在同一目录中，它叫做favicon.ico）作为"tab"图标 . 我已阅读维基百科并查看了一些教程，并实现了以下内容：

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

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

Update

我无法在本地工作，虽然代码检查它只会在服务器开始为网站提供服务后才能正常工作 . 只需尝试将其推送到服务器并刷新缓存，它应该可以正常工作 .

html static favicon

15 回答

  • 1

    您可以制作16x16 .png，然后在静态HTML文档的 <head> 标记之间使用以下代码段之一：

    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
    回复于
  • 97

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

    但是，我通常会选择你的第二个例子：

    <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
    回复于
  • 4

    实际上，要使您的favicon在所有浏览器中都能正常工作，您必须拥有10个以上正确大小和格式的图像 .

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

    希望你喜欢 .

    回复于
  • 0

    以下为我工作......

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    回复于
  • 14

    使用this等工具将图像文件转换为Base64字符串，然后将以下代码段中的 YourBase64StringHere 占位符替换为您的字符串，并将该行放在HTML头部分中：

    <link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

    这将在浏览器中100％运行 .

    回复于
  • 7

    如果favicon是png类型的图片，则它在旧版本的Chrome中无法使用 . 但是它在FireFox中运行得很好 . 此外，在处理此类操作时，请不要忘记清除浏览器缓存 . 很多时候，代码很好，但缓存是真正的罪魁祸首 .

    回复于
  • 5

    As recommended by W3.org，您可以使用 rel 属性来实现此目的 .

    例：

    <head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
    回复于
  • 55
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
    回复于
  • 31

    我知道它的老帖子，但仍然发布给像我这样的人 . 这对我有用

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

    将您的favicon图标放在根目录中..

    回复于
  • 695
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

    这对我有用

    回复于
  • 14

    作为额外的说明，可能有一天可以帮助某人 .

    您之前无法向页面回显任何内容：

    Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

    不会加载ico

    <link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

    工作良好

    回复于
  • 178

    我使用 convert -resize 16x16 img.png favicon.ico （在linux konsole上）转换我的图像，并将 <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> 添加到我的 Headers 中，一切都很完美 .

    回复于
  • 3

    如果您将favicon添加到名称为favicon.ico的root / images文件夹中，浏览器将自动理解并将其作为favicon.I进行测试和工作 . 您的链接必须是www.website.com/images/favicon.ico

    有关更多信息，请看这个答案：

    Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?

    回复于
  • 5

    尝试使用 <link rel="icon" type="image/ico" href="images/favi.ico"/>

    回复于
  • 1

    请注意，FF无法加载带有冗余 // 的图标，如 /img//favicon.png . 在FF 53上测试过 . Chrome可以 .

    回复于

相关问题