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

Question

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

Fre*_*red 82 html favicon standards

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

请包括:

哪些浏览器支持哪些图像格式.
在各种浏览器的哪些位置需要哪些行.

Answer 1

Bri*_*ews 105

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

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

放置favicon.ico在您的站点根目录以支持旧浏览器(可选且仅与旧版浏览器相关.
将favicon.png放在我的图像子目录中(只是为了保持整洁).
在<head>元素中添加以下HTML .

<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

请注意:

.ico文件的MIME类型由IANA注册为image/vnd.microsoft.icon .
Internet Explorer将忽略type快捷图标关系的属性,这是唯一支持此关系的浏览器,不需要提供它.

参考

32×32？16x16不是常态吗？ (9认同)
好吧,我有一个'微软正在紧张的一天'.我无法在Internet Explorer中使用它,尽管它显示了stackoverflow站点的favicon.是否有其他影响此设置的设置,例如doctype？ (2认同)
更新 - 该行为是由浏览器缓存图标引起的.如果您对丢失缓存感到高兴,清除临时Internet文件将解决此问题. (2认同)
将IE版本的链接放在IE条件注释中会更简洁吗？ (2认同)

Answer 2

Joh*_*ley 10

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

Wil*_*Wit 6

为了支持平板电脑和智能手机的触摸图标,我更喜欢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下载模板时,这些都包含在内,您只需用自己的图标替换它们即可.

Answer 4

Pau*_*lin 5

维基百科来救援

归档时间：	17 年，5 月前
查看次数：	35014 次
最近记录：	6 年，3 月前