一个大尺寸的图标可以服务于所有设备和浏览器吗?
Can one large size favicon serve all devices and browsers?
所有关于网站图标的讨论都建议创建不同大小的网站图标以针对不同的客户。例如,请参阅此答案:Does a favicon have to be 32x32 or 16x16?
我的问题:真的有必要生成这么多不同大小的网站图标吗?如果我创建一个大小为 200x200 的大型网站图标会怎样?我看到各种浏览器,如 Chrome 和 Firefox 自动缩小它以在浏览器选项卡中显示一个相当缩小的图标。
那么选择一个 200x200 大小的大型网站图标有什么问题?
注意:我希望网站图标可以在任何符合标准的设备浏览器上运行(如果有用于网站图标的浏览器)。例如,如果 iOS Safari 违反了标准,那么我就不会太介意支持它。
你提到的问题已经有 3 年历史了,现在我(我通常是)创建一个高分辨率的图标,假设 浏览器会(根据我的经验)将) 在需要时缩小它。
一些浏览器可以缩小它;然而,IOS目前不支持favicons,所以为它制作一个是完全没有用的。除非你想在 Apple 构建对它的支持时将它添加到你的文本文件中。
我建议使用 16x16px 大小,因为它附加的内存较少。
使用一个大的高分辨率图标没有问题(2017 年)。 最近 4 年制造的屏幕较小的浏览器和移动设备会自动缩小它们根据需要吸引人(如果不是完美的话)。
我发现使用一个大的网站图标的唯一缺点——这是一种延伸——是屏幕分辨率较低的移动设备下载的文件 稍微 比 绝对 必要。我们这里说的是千字节。
文件Size/Loading时间:
即使在 3G 连接上,下载单个 5kb favicon 与 100kb favicon 相比,下载时间也可以忽略不计。除非你的 200x200 favicon 的文件大小比低分辨率版本大很多,否则完全可以只创建一个高分辨率的 favicon 文件并将其用于所有 browsers/devices。
这甚至不是加载时间问题,因为在大多数情况下,只有在移动浏览器上添加了书签时才会下载 favicon,而不是加载页面的其余部分。
iOS Safari/Android Chrome:
我个人从未遇到过使用单个大型
PNG 格式的网站图标图像。您仍然希望 包括
Apple Touch 图标代码 (<link rel="apple-touch-icon"
href="/custom_icon.png">
) 除了正常的图标代码外,
但您可以使用相同的网站图标图像文件。
This look at how iOS Safari scales down icons seems to agree 如果不需要 100.0% 像素完美,则删除较小的图标文件大小完全没问题。
我在很多网站上看到它被指出(警告:在线程中
几年前)苹果自己使用 一个大
apple.com 的 152x152 图标 。文件大小为4.5kb.
虽然 Apple 使用 152x152 作为其 Apple Touch Icon,但我建议使用 192x192 的网站图标图像,因为此分辨率 is used by Android Chrome。
TL;DR:
据我所知,是的,一个大尺寸的网站图标可以在所有符合标准的现代设备和浏览器上运行。几千字节的网站图标文件大小差异在今天几乎无关紧要,因此我找不到这种方法的任何问题。
所有关于网站图标的讨论都建议创建不同大小的网站图标以针对不同的客户。例如,请参阅此答案:Does a favicon have to be 32x32 or 16x16?
我的问题:真的有必要生成这么多不同大小的网站图标吗?如果我创建一个大小为 200x200 的大型网站图标会怎样?我看到各种浏览器,如 Chrome 和 Firefox 自动缩小它以在浏览器选项卡中显示一个相当缩小的图标。
那么选择一个 200x200 大小的大型网站图标有什么问题?
注意:我希望网站图标可以在任何符合标准的设备浏览器上运行(如果有用于网站图标的浏览器)。例如,如果 iOS Safari 违反了标准,那么我就不会太介意支持它。
你提到的问题已经有 3 年历史了,现在我(我通常是)创建一个高分辨率的图标,假设 浏览器会(根据我的经验)将) 在需要时缩小它。
一些浏览器可以缩小它;然而,IOS目前不支持favicons,所以为它制作一个是完全没有用的。除非你想在 Apple 构建对它的支持时将它添加到你的文本文件中。
我建议使用 16x16px 大小,因为它附加的内存较少。
使用一个大的高分辨率图标没有问题(2017 年)。 最近 4 年制造的屏幕较小的浏览器和移动设备会自动缩小它们根据需要吸引人(如果不是完美的话)。
我发现使用一个大的网站图标的唯一缺点——这是一种延伸——是屏幕分辨率较低的移动设备下载的文件 稍微 比 绝对 必要。我们这里说的是千字节。
文件Size/Loading时间:
即使在 3G 连接上,下载单个 5kb favicon 与 100kb favicon 相比,下载时间也可以忽略不计。除非你的 200x200 favicon 的文件大小比低分辨率版本大很多,否则完全可以只创建一个高分辨率的 favicon 文件并将其用于所有 browsers/devices。
这甚至不是加载时间问题,因为在大多数情况下,只有在移动浏览器上添加了书签时才会下载 favicon,而不是加载页面的其余部分。
iOS Safari/Android Chrome:
我个人从未遇到过使用单个大型 PNG 格式的网站图标图像。您仍然希望 包括 Apple Touch 图标代码 (
<link rel="apple-touch-icon" href="/custom_icon.png">
) 除了正常的图标代码外, 但您可以使用相同的网站图标图像文件。This look at how iOS Safari scales down icons seems to agree 如果不需要 100.0% 像素完美,则删除较小的图标文件大小完全没问题。
我在很多网站上看到它被指出(警告:在线程中 几年前)苹果自己使用 一个大 apple.com 的 152x152 图标 。文件大小为4.5kb.
虽然 Apple 使用 152x152 作为其 Apple Touch Icon,但我建议使用 192x192 的网站图标图像,因为此分辨率 is used by Android Chrome。
TL;DR:
据我所知,是的,一个大尺寸的网站图标可以在所有符合标准的现代设备和浏览器上运行。几千字节的网站图标文件大小差异在今天几乎无关紧要,因此我找不到这种方法的任何问题。