在HTML5文档中,你推荐哪种favicon格式,为什么?我希望它能被IE7和所有现代浏览器支持。
另外,当使用.png时,我需要指定类型(type="image/png")吗?
在HTML5文档中,你推荐哪种favicon格式,为什么?我希望它能被IE7和所有现代浏览器支持。
另外,当使用.png时,我需要指定类型(type="image/png")吗?
当前回答
看这里:跨浏览器图标
这才是正确的方法:
<link rel="icon" type="image/png" href="http://www.example.com/image.png"><!-- Major Browsers -->
<!--[if IE]><link rel="SHORTCUT ICON" href="http://www.example.com/alternateimage.ico"/><![endif]--><!-- Internet Explorer-->
其他回答
看这里:跨浏览器图标
这才是正确的方法:
<link rel="icon" type="image/png" href="http://www.example.com/image.png"><!-- Major Browsers -->
<!--[if IE]><link rel="SHORTCUT ICON" href="http://www.example.com/alternateimage.ico"/><![endif]--><!-- Internet Explorer-->
我知道这是一个老问题。
这里有另一种选择-关注不同的平台需求-源代码
<link rel='shortcut icon' type='image/vnd.microsoft.icon' href='/favicon.ico'> <!-- IE -->
<link rel='apple-touch-icon' type='image/png' href='/icon.57.png'> <!-- iPhone -->
<link rel='apple-touch-icon' type='image/png' sizes='72x72' href='/icon.72.png'> <!-- iPad -->
<link rel='apple-touch-icon' type='image/png' sizes='114x114' href='/icon.114.png'> <!-- iPhone4 -->
<link rel='icon' type='image/png' href='/icon.114.png'> <!-- Opera Speed Dial, at least 144×114 px -->
这是迄今为止我发现的最广泛的方法。
最终决定取决于你自己的需要。问问你自己,谁是你的目标受众?
2018年5月27日更新:正如预期的那样,时间在流逝,事情在变化。但也有好消息。我发现了一个名为Real Favicon Generator的工具,它可以生成图标在所有现代浏览器和平台上运行所需的所有行。但是它不能处理向后兼容性。
为了兼容所有浏览器,请使用.ico。
.png得到越来越多的支持,因为使用多个程序更容易创建。
对于ico
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
对于.png,您需要指定类型
<link rel="icon" type="image/png" href="http://example.com/image.png" />