将图标添加到静态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是可在所有浏览器类型上运行的最佳图片格式。
我无法让它在本地运行，尽管代码签出后只有在服务器开始为站点提供服务后才能真正正常运行。只需尝试将其推送到服务器并刷新缓存，它就可以正常工作。
第2055篇《将图标添加到静态HTML页面》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
Try to use the <link rel="icon" type="image/ico" href="images/favi.ico"/>
Note that FF fails to load an icon with a redundant // in URL like /img//favicon.png. Tested on FF 53. Chrome is OK.
Notice that if your site is running as a subfolder ie:
http://localhost/MySite/
You will need to take that into account. If you are doing so from an ASP.NETapp all you need to do is add a ~ to the front of the URL:
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
If you add the favicon into the root/images folder with the name favicon.ico browser will automatically understand and get it as favicon.I tested and worked. your link must be www.website.com/images/favicon.ico
For more information look this answer:
Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?
I used convert -resize 16x16 img.png favicon.ico (on linux konsole) to convert my image, and
add <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> to my header and everything work perfect.
作为可能对某人有所帮助的补充说明。
您无法在页面上回显任何内容：
Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
will not load ico
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello
works fine
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
这对我有用
如果收藏夹图标是png类型的图片，则在旧版Chrome中将无法使用。但是，它将在FireFox中正常工作。另外，在进行此类操作时，请不要忘记清除浏览器缓存。很多时候，代码还不错，但是缓存才是真正的罪魁祸首。
根据W3.org的建议，您可以使用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"/>
使用类似这样的工具将图像文件转换为Base64字符串，然后将YourBase64StringHere以下代码片段中的占位符替换为字符串，并将该行放入HTML标题部分：
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
这将在浏览器中100％工作。
以下对我有用...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
实际上，要使您的收藏夹图标在所有浏览器中都能正常工作，您必须以正确的大小和格式包含10个以上的图像。
我创建了一个应用程序（faviconit.com），因此人们不必手动创建所有这些图像和正确的标签。
希望你喜欢。
您可以制作一个16x16 .png文件，然后<head>在静态HTML文档的标签之间使用以下片段之一：
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
相似问题
问题类别
I Just used a png. Make sure to remove any white background. makes for a better Icon