Lon*_*ner 6 favicon image-resizing
关于网站图标的所有讨论都建议创建不同大小的网站图标以针对不同的客户。例如,请参见以下答案:favicon是否必须为32x32或16x16?
我的问题:真的有必要生成这么多不同大小的图标吗?如果我创建了一个大小为200x200的大型图标,该怎么办?我看到各种浏览器(例如Chrome和Firefox)会自动将其缩小以在浏览器选项卡中显示缩小的图标。
那么,如果要选择一个大小为200x200的大型网站图标,会有什么问题?
注意:我希望网站图标可以在符合标准的任何设备浏览器上运行(如果网站图标适用于该图标)。例如,如果iOS Safari违反了标准,那么我对支持它就不会太烦。
使用一个大的高分辨率图标没有问题(在2017年)。最近4年内制造的具有较小屏幕的浏览器和移动设备将根据需要自动缩小比例(如果不够完美)。
唯一的缺点我能找到使用一个大图标,这是一个拉伸是分辨率较低的屏幕的移动设备会下载一个稍微更大的文件比是绝对必要的。我们在这里谈论千字节。
文件大小/加载时间:
即使在3G连接上,下载单个5kb图标和100kb图标所需的时间也可以忽略不计。除非你的200x200的图标有很多比低分辨率版本更大的文件大小,这是完全没关系只创建一个高分辨率图标文件和使用,对所有的浏览器/设备。
实际上,这甚至不是加载时间的问题,因为在大多数情况下,仅在收藏了收藏夹图标的情况下才将其图标下载到移动浏览器中,而不会将其与页面的其余部分一起加载。
iOS Safari / Android Chrome:
使用PNG格式的单个大型收藏夹图像,我个人从未遇到过任何问题。除了常规图标图标代码之外,您仍然希望包括Apple Touch图标代码(<link rel="apple-touch-icon"
href="/custom_icon.png">),但是您可以使用相同的图标图标文件。
观察iOS Safari如何按比例缩小图标似乎同意,如果不需要100.0%像素完美,则删除较小的图标文件大小是完全可以的。
我已经看到它在许多站点(caveat:在已有数年历史的线程中)指出,Apple本身对apple.com 使用了一个152x152大图标。文件大小为4.5kb。
尽管Apple将152x152用于其Apple Touch图标,但我还是建议使用192x192的图标图标,因为Android Chrome使用了该分辨率。
TL; DR:
据我所知,是的,一个大型网站图标可以在所有符合标准的现代设备和浏览器上运行。今天,几个图标的favicon文件大小的差异几乎没有关系,因此,我找不到这种方法的任何问题。