这篇博客讨论了如何在静态HTML页面中添加favicon，包括尝试使用.ico格式的图标，遇到的问题，以及如何解决浏览器兼容性和缓存问题。提到了在不同浏览器上的表现，并推荐了使用<link rel="icon">标签进行设置。
本文翻译自：Adding a favicon to a static HTML page
I have a few static pages that are just pure HTML, that we display when the server goes down. 我有几个静态页面只是纯HTML，我们在服务器出现故障时显示。 How can I put a favicon that I made (it's 16x16px and it's sitting in the same directory as the HTML file; it's called favicon.ico) as the "tab" icon as it were? 我如何将我制作的图标（它是16x16px并且它与HTML文件位于同一目录中;它称为favicon.ico）作为“标签”图标？ I have read up on Wikipedia and looked at a few tutorials and have implemented the following: 我已经阅读了维基百科并查看了一些教程并实现了以下内容：
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
But it still doesn't want to work. 但它仍然不想工作。 I am using Chrome to test the sites. 我正在使用Chrome来测试这些网站。 According to Wikipedia .ico is the best picture format that runs on all browser types. 根据维基百科.ico是所有浏览器类型上运行的最佳图片格式。
Update 更新
I could not get this to work locally although the code checks out it will only really work properly once the server started serving the site. 虽然代码检查它只能在服务器开始为站点提供服务后才能正常工作，但我无法让它在本地工作。 Just try pushing it up to the server and refresh your cache and it should work fine. 只需尝试将其推送到服务器并刷新缓存，它应该可以正常工作。
#1楼
参考：https://stackoom.com/question/fipP/将favicon添加到静态HTML页面
#2楼
If the favicon is a png type image, it'll not work in older versions of Chrome. 如果favicon是png类型的图片，则它在旧版本的Chrome中无法使用。 However it'll work just fine in FireFox. 但是它在FireFox中运行得很好。 Also, don't forget to clear your browser cache while working on such things. 此外，在处理此类操作时，请不要忘记清除浏览器缓存。 Many a times, code is just fine, but cache is the real culprit. 很多时候，代码很好，但缓存是真正的罪魁祸首。
#3楼
Actually, to make your favicon work in all browsers, you must have more than 10 images in the correct sizes and formats. 实际上，要使您的favicon在所有浏览器中都能正常工作，您必须拥有10个以上正确大小和格式的图像。
I created an App ( faviconit.com ) so people don´t have to create all these images and the correct tags by hand. 我创建了一个App（ faviconit.com ），因此人们不必手动创建所有这些图像和正确的标签。
Hope you like it. 希望你喜欢。
#4楼
以下为我工作......
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
#5楼
As recommended by W3.org , you can use the rel attribute to achieve this. 根据W3.org的建议 ，您可以使用rel属性来实现此目的。
Example: 例：
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
#6楼
I know its older post but still posting for someone like me. 我知道它的老帖子，但仍然发布给像我这样的人。 This worked for me 这对我有用
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
put your favicon icon on root directory.. 将您的favicon图标放在根目录中..
扫一扫
964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
