Answers:
对于IE,Microsoft建议在favicon.ico文件中打包16x16、32x32和48x48。
对于iOS,Apple建议使用特定的文件名和分辨率,对于运行iOS 8的最新设备,最大为180x180。
Android Chrome主要使用清单,也依赖于Apple touch图标。
Windows 8.0上的IE 10需要PNG图片和背景色,而Windows 8.1和10上的IE 11可以接受在称为的专用XML文件中声明的几张PNG图片browserconfig.xml
。
适用于Mac OS X的Safari El Capitan为固定选项卡引入了SVG图标。
其他一些平台则在寻找具有各种分辨率的PNG文件,例如Google TV的96x96图片或Opera Coast的228x228图片。
请参阅此收藏夹图片列表以获取完整参考。
TLDR:此网站图标生成器可以一次生成所有这些文件。该生成器还可以实现为WordPress插件。完全披露:我是本网站的作者。
我在这里看不到任何最新信息,所以去了:
现在要回答这个问题,如果您希望图标在任何地方都看起来很棒,那么将不使用2个图标。请参阅以下尺寸:
16 x 16 –浏览器的标准尺寸
24 x 24 –用户界面的IE9固定站点大小
32 x 32 – IE新页选项卡,Windows 7+任务栏按钮,Safari阅读列表侧边栏
48 x 48 – Windows站点
57 x 57 – iPod touch ,iPhone最高可达3G
60 x 60 – iPhone最高可达iOS7
64 x 64 – Windows站点,Safari阅读器列表栏位于HiDPI / Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad最高可达iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone视网膜触摸屏最高可达iOS6
120 x 120 – iPhone视网膜触摸屏iOS7
128 x 128 – Chrome网上应用店应用程序,Android
144 x 144 – IE10 Metro瓷砖用于固定站点,iPad视网膜最高到iOS6
150 x 150 – Win 8.1 Metro方块
152 x 152 – iPad视网膜触摸iOS7
196 x 196 –安卓Chrome
310 x 150 – Win 8.1宽Metro平铺
310 x 310 – Win 8.1 Metro平铺
我不确定浏览器是否/如何缩放大图标,但是W3C建议以下1:
您选择的图像格式必须为16x16像素或32x32像素,并使用8位或24位颜色。图像格式必须为PNG(W3C标准),GIF或ICO之一。
[current year]
当仅靠CSS就能完成的工作令人惊奇时,为什么我仍然需要处理一些胡说八道的限制,而我几乎错过了您的答案。我将随便使用我想要的任何东西,如果某些东西不支持它,按照标准,这就是他们的问题。
实际上,要使您的收藏夹图标在所有浏览器中都能正常工作,您将必须添加10个以上大小正确的文件。
我和我的朋友为此创建了一个应用程序!你可以在faviconit.com找到它
我们这样做是为了让人们不必手工创建所有这些图像和正确的标签,而创建所有这些图像通常会使我非常烦恼!
你可以有图标的多种尺寸在同一个文件。我通常创建48、32 .ico
和16像素的网站图标(文件)。您可以添加任何尺寸的图像。问题是,iPhone会使用ico
文件吗?
ico
还支持透明度,但是我不确定它是否是像PNG这样的alpha通道;可能更像是打开还是关闭的GIF。
.ico
文件中包含此类图像。
根据Wikipedia上有关Favicon的文章, Internet Explorer仅支持ICO格式的Favicon。
我会坚持使用两个不同的图标。
网站图标不必是16x16或32x32。您可以创建一个80x80或100x100的图标,只需确保两个值的大小相同,并且显然不要将其设置得太大或太小即可,请选择一个合理的大小。
恐怕您需要为每种分辨率使用单独的文件。广告系列监控器上有一篇非常不错的文章,描述了它们如何为每个iOS设备创建和实现其图标:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
据我了解,这几种解决方案中没有一种是完美的。使用Favicon生成器确实是一个不错的解决方案,但是它们的数量非常庞大,很难选择。我想补充一点,如果您希望您的网站启用PWA,则还需要提供Google Devs所述的512x512图标:
图标,包括192px和512px版本
我没有遇到很多执行该标准的Favicon生成器(firebase可以,但很多事情它不执行)。因此,解决方案必须是许多其他解决方案的混合。
我不知道,今天是在2020年初,是否仍然提供16x16、32x32。我猜它在某些情况下仍然很重要,例如,如果您的用户由于某种原因仍在使用IE(这种情况仍然发生在某些出于某些原因而无法迁移到较新浏览器的私有公司中)