image-resizing - 一个大尺寸的图标可以为所有设备和浏览器提供服务吗？

Question

所有关于收藏夹图标的讨论都建议创建不同大小的收藏夹图标以针对不同的客户。例如，请参阅此答案:Does a favicon have to be 32x32 or 16x16?

我的问题:真的有必要生成这么多不同大小的图标吗？如果我创建了一个大小为 200x200 的大图标怎么办？我看到 Chrome 和 Firefox 等各种浏览器会自动将其缩小以在浏览器选项卡中显示缩小的图标。

那么，选择一个 200x200 大小的大型图标有什么问题呢？

注意:我希望 favicon 可以在符合标准的任何设备浏览器上运行(如果有一个用于 favicon)。例如，如果 iOS Safari 违反了标准，那么我不会太费心去支持它。

Answer 1

使用一个大的高分辨率图标没有问题(2017年)。 过去 4 年制造的具有较小屏幕的浏览器和移动设备将根据需要自动缩小它们的吸引力(如果不是完美的话)。

我发现使用一个大图标的唯一缺点——这是一种延伸——是具有较低分辨率屏幕的移动设备将下载比绝对必要的稍大的文件。我们在这里谈论千字节。

文件大小/加载时间:

即使在 3G 连接上，下载单个 5kb favicon 与 100kb favicon 所需的时间也可以忽略不计。除非您的 200x200 图标有 多比低分辨率版本更大的文件大小，创建一个高分辨率图标文件并将其用于所有浏览器/设备是完全可以的。

这甚至不是加载时间问题 ，因为在大多数情况下，收藏夹图标只会在带有书签的移动浏览器上下载，而不是随页面的其余部分一起加载。

iOS Safari/Android Chrome:

我个人从未遇到过使用单个大型
图标图像在 PNG 格式。你仍然想要 include theApple Touch Icon code ( <link rel="apple-touch-icon"
href="/custom_icon.png"> ) 除了正常的网站图标代码，
但您可以使用相同的网站图标图像文件。

This look at how iOS Safari scales down icons seems to agree如果不需要 100.0% 像素完美，那么删除较小的图标文件大小是完全没问题的。

我已经看到它在许多网站上指出(警告:在线程中
几年前)Apple 自己使用的 one large152x152 favicon为apple.com。文件大小为 4.5kb。

尽管 Apple 的 Apple Touch Icon 使用 152x152，但我建议使用 192x192 的图标图像，因为此分辨率 is used by Android Chrome .

TL;博士:

据我所知， 是的，一个大尺寸的图标可以在所有符合标准的现代设备和浏览器上工作 .几千字节的 favicon 文件大小的差异在今天几乎无关紧要，因此我找不到这种方法的任何问题。