基于对stackoverflow的讨论,可以在单个文件中提供各种大小,而"操作系统将选择最好的来显示"。
这是如何工作的?当一个声明依赖于另一个声明时,我们是否分配了几个声明?
对于桌面浏览器,你应该有一个favicon.ico
文件和几个PNG图标。
favicon.ico
应包含三张图片:16x16, 32x32和48x48。可以有几个PNG图标,这取决于所支持的平台:桌面浏览器的16x16和32x32, Android Chrome的196x196等。每个图片都用类似<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
的东西声明。
浏览器对选择正确的图标有不同的态度:
- 在Windows 7之前,Internet Explorer使用
favicon.ico
,正如Microsoft所描述的。 - Internet Explorer 11在Windows 8上选择它能找到的最大的PNG图标。
- Chrome使用16x16 (Windows)或32x32 (Mac) PNG图标。
- Firefox使用最新声明的PNG图标(见bug 751712),尽管它显然并不总是这样表现。
- Safari使用它能找到的最大PNG图标。
这些结果来自RealFaviconGenerator的兼容性页面。全面披露:我是这个网站的作者。
根据Jonathan T. Neal在http://www.jonathantneal.com/blog/understand-the-favicon/上的优秀文章,这取决于您使用的是哪种浏览器:
Firefox和Safari将使用最后出现的图标。铬的Mac将使用ICO格式的图标,否则将使用32×32收藏夹图标。Chrome for Windows将使用最前面的图标是16×16,否则是ICO。如果没有上述选项,两款chrome都会使用先出现的图标,与Firefox和Safari完全相反。事实上,Mac版Chrome将忽略16×16图标并使用32×32版本,如果只是为了在非视网膜设备上将其缩小到16×16。歌剧,不想要要选边站,将在完成时从任何可用的图标中选择随机的。我喜欢Opera这样做。