一个大型网站图标可以为所有设备和浏览器提供服务吗? [英] Can one large size favicon serve all devices and browsers?

问题描述

所有有关网站图标的讨论都建议创建不同大小的网站图标以针对不同的客户.例如，请参见以下答案:网站图标必须是32x32还是16x16?

All discussion about favicons recommend creating favicons of different sizes to target different clients. See this answer for example: Does a favicon have to be 32x32 or 16x16?

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

My question: Is it really necessary to generate favicons with so many different size? What if I created one large favicon of size 200x200? I see various browsers like Chrome and Firefox automatically scaling it down to display a pretty scaled-down favicon in the browser tab.

然后选择一个大小为200x200的大型网站图标会有什么问题?

What's the problem in going for one large favicon of size 200x200 then?

注意:我希望网站图标能够在符合标准的任何设备浏览器上运行(如果有一个网站图标).例如，如果iOS Safari违反了标准，那么我对支持它就不会太烦.

Note: I want the favicon to work on any device browser that conforms to the standard (if there is one for favicon). For example, if iOS Safari violates the standard then I am not too bothered with supporting it.

推荐答案

使用一个大的高分辨率图标(在2017年)没有问题.最近4年将根据需要自动缩小比例(如果不是完美的话).

There is no problem with using one large high-resolution icon (in 2017). Browsers and mobile devices with smaller screens made in the last 4 years will automatically scale them down attractively (if not perfectly) as needed.

使用一个大型图标，我发现唯一的缺点-这是一个难题–屏幕分辨率较低的移动设备将下载一个 大于绝对 的文件>必要的.我们在这里谈论千字节.

The only downside I can find for using one large favicon—and it's a stretch—is that mobile devices with lower resolution screens will download a slightly larger file than is absolutely necessary. We're talking kilobytes here.

文件大小/加载时间:

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

• Even on a 3G connection, the time it takes to download a single 5kb favicon vs a 100kb favicon is negligible. Unless your 200x200 favicon has a much larger file size than the lower resolution versions, it's perfectly okay to just create one high-resolution favicon file and use that for all browsers/devices.

这实际上不是加载时间问题，因为在大多数情况下，仅将图标图标添加为书签时，才将其下载到移动浏览器中，而不会与页面的其余部分一起加载.

This isn't really even a load time issue, because in most cases the favicon would only be downloaded on a mobile browser when it's bookmarked rather than loading with the rest of the page.

iOS Safari/Android Chrome:

• 我从来没有亲身经历过任何一个大问题 PNG 格式的收藏图标图像.您仍然希望包括 Apple Touch图标代码(<link rel="apple-touch-icon" href="/custom_icon.png">)，除了普通的图标图标代码之外， 但您可以使用相同的收藏夹图像文件.

• I've never personally experienced any issues using a single large favicon image in PNG format. You'd still want to include the Apple Touch Icon code (<link rel="apple-touch-icon" href="/custom_icon.png">) in addition to the normal favicon code, but you can use the same favicon image file.

此示例着眼于iOS Safari的缩减方式图标似乎同意，如果不需要100.0％的像素完美度，则删除较小的图标文件大小是完全可以的.

This look at how iOS Safari scales down icons seems to agree that dropping the smaller icon file sizes is completely fine if 100.0% pixel perfection is not needed.

我已经在许多站点上指出了这一点(注意:在线程中 已有数年历史了)苹果自己使用一个大 适用于apple.com的152x152网站图标.文件大小为4.5kb.

I've seen it pointed out on a number of sites (caveat: in threads that are a few years old) that Apple themselves use one large 152x152 favicon for apple.com. The file size is 4.5kb.

尽管Apple使用152x152作为其Apple Touch图标，但我还是建议使用192x192图标图标，因为该分辨率

Although Apple uses 152x152 for their Apple Touch Icon, I'd recommend going with a 192x192 favicon image because this resolution is used by Android Chrome.

TL; DR:

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

As far as I can tell, yes, one large size favicon can work on all modern devices and browsers that conform to standards. The difference in favicon file size of a few kilobytes is mostly irrelevant today, thus I cannot find any problems with this approach.

这篇关于一个大型网站图标可以为所有设备和浏览器提供服务吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！