目前在所有支持Favicons的浏览器中显示favicon的最佳方法是什么？

目前在所有目前支持它的浏览器中显示favicon的最佳方法是什么？

请包括:

哪些浏览器支持哪些图像格式.

在各种浏览器的哪些位置需要哪些行.

Brian Matthe.. 105

我在这里寻找腰带和牙套.

我创建两个32×32的图标.ico,并.png称为格式favicon.ico和favicon.png.除非您正在处理旧浏览器,否则图标名称并不重要.

放置favicon.ico在您的站点根目录以支持旧浏览器(可选且仅与旧版浏览器相关.

将favicon.png放在我的图像子目录中(只是为了保持整洁).

在元素中添加以下HTML .

请注意:

.ico文件的MIME类型由IANA注册为image/vnd.microsoft.icon .

Internet Explorer将忽略type快捷图标关系的属性,这是唯一支持此关系的浏览器,不需要提供它.

参考

1> Brian Matthe..：

---

我在这里寻找腰带和牙套.

我创建两个32×32的图标.ico,并.png称为格式favicon.ico和favicon.png.除非您正在处理旧浏览器,否则图标名称并不重要.

放置favicon.ico在您的站点根目录以支持旧浏览器(可选且仅与旧版浏览器相关.

将favicon.png放在我的图像子目录中(只是为了保持整洁).

在元素中添加以下HTML .

请注意:

.ico文件的MIME类型由IANA注册为image/vnd.microsoft.icon .

Internet Explorer将忽略type快捷图标关系的属性,这是唯一支持此关系的浏览器,不需要提供它.

参考

---

32×32？16x16不是常态吗？

---

好吧,我有一个'微软正在紧张的一天'.我无法在Internet Explorer中使用它,尽管它显示了stackoverflow站点的favicon.是否有其他影响此设置的设置,例如doctype？

---

更新 - 该行为是由浏览器缓存图标引起的.如果您对丢失缓存感到高兴,清除临时Internet文件将解决此问题.

---

将IE版本的链接放在IE条件注释中会更简洁吗？

2> John Topley..：

---

我使用.ico格式并在元素中放入以下两行:

3> Willem de Wi..：

---

为了支持平板电脑和智能手机的触摸图标,我更喜欢HTML5Boilerplate的方法

有关触摸图标的更多信息,请参阅本文.

使用浏览器支持的当前状态,您甚至不必在文档中添加favicon的HTML标记.浏览器将自动搜索文件列表,请参阅iOS的此示例:

如果HTML中未指定图标,iOS Safari将在网站的根目录中搜索带有apple-touch-icon或apple-touch-icon-precomposed前缀的图标.例如,如果设备的相应图标大小为57×57像素,iOS将按以下顺序搜索文件名:

苹果触摸图标-57x57-precomposed.png

苹果触摸图标57x57.png

苹果触摸图标precomposed.png

苹果触摸的icon.png

我的建议是不在文档中包含favicon,但在根网站上准备好文件列表:

苹果触摸图标114x114,precomposed.png

苹果触摸图标144x144,precomposed.png

苹果触摸图标-57x57-precomposed.png

苹果触摸图标最高72x72,precomposed.png

苹果触摸图标precomposed.png

苹果触摸的icon.png (57px*57px)

favicon.ico的 HiDPI (32x32px)

当您从html5boilerplate.com下载模板时,这些都包含在内,您只需用自己的图标替换它们即可.

4> Paul Tomblin..：

---

维基百科来救援