将一个favicon添加到一个静态的HTML页面
我有几个static pages ，只是纯HTML，当服务器closures时显示。 如何将我制作的图标（它是16x16px，它与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来testing网站。 根据维基百科，.ico是在所有浏览器types上运行的最佳图片格式。
更新
虽然代码检查出来，但是一旦服务器开始为网站提供服务，它将只能真正正常工作，我无法在本地工作。 只要尝试推送到服务器，并刷新您的caching，它应该工作正常。
你可以做一个16×16 PNG和使用
<link rel="shortcut icon" type="image/png" href="/favicon.png"/> <link rel="shortcut icon" type="image/png" href="http://eg.com/favicon.png"/>
大多数浏览器都会从网站的根目录中选取favicon.ico而不需要被告知。 但是他们并不总是立即更新一个新的。
不过，我通常会拿你的第二个例子来说：
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
实际上，为了让你的图标在所有的浏览器中都能正常工作，你必须有10多张正确尺寸和格式的图片。
我创build了一个应用程序（ faviconit.com ），所以人们不必手动创build所有这些图像和正确的标签。
希望你喜欢。
以下为我工作…
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
用像这样的工具将图像文件转换为Base64string，然后用下面的代码片段中的YourBase64StringHere占位符replace为string，并将该行放入HTML头部分：
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
这将在浏览器中100％工作。
如果图标是一个PNG图像，它将不适用于旧版本的Chrome。 不过在FireFox中它可以正常工作。 另外，不要忘了在处理这些事情时清除浏览器caching。 很多次，代码都很好，但是caching是真正的罪魁祸首。
按照W3.org的build议 ，您可以使用rel属性来实现这一点。
例：
<head> <link rel="icon" type="image/png" href="http://example.com/myicon.png"> ...
<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"/>
我知道它的旧post，但仍然为像我这样的人张贴。 这对我有效
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
把你的favicon图标放在根目录下
作为一个额外的笔记，可能有助于某人某天。
您无法在之前回复任何内容：
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
工作正常
我使用convert -resize 16x16 img.png favicon.ico （在linux konsole上）转换我的图像，并添加<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">我的头，一切工作完美。
如果您将favicon添加到名称为favicon.ico的root / images文件夹中，那么浏览器将自动理解并按照favicon.Itesting和工作。 您的链接必须是www.website.comhttp://img.dovov.comfavicon.ico
欲了解更多信息看这个答案：
你必须包含<link rel =“icon”href =“favicon.ico”type =“image / x-icon”/>？
尝试使用<link rel="icon" type="image/ico" href="images/favi.png"/>
<link rel="shortcut icon" type="image/png" href="/favicon.ico"/> <link rel="shortcut icon" type="image/png" href="http://exmvple.com/favicon.ico"/>
这对我有效
请注意，FF无法像/img//favicon.png一样在URL中加载多余的图标。 testingFF 53. Chrome是好的。
