协慌网

登录 贡献 社区

网站图标是否必须为 32x32 或 16x16?

我想将单个图像用作常规图标和 iPhone / iPad 友好图标。

这可能吗?如果将 iPad 友好的 72x72 PNG 缩放为常规浏览器的图标,是否会缩放?还是我必须使用单独的 16x16 或 32x32 图像?

答案

2020 年更新:坚持 16x16 与 32x32 图标的原始问题:当前建议应提供 32x32 图标,完全跳过 16x16。当前所有的浏览器和设备都支持 32x32 图标。根据环境的不同,该图标通常会放大到 192x192(假设没有更大的尺寸可用,或者系统无法识别它们)。从超低分辨率进行升级具有显着效果,因此最好将 32x32 保持为最小基准。


对于 IE, Microsoft 建议在 favicon.ico 文件中打包 16x16、32x32 和 48x48

对于 iOS, Apple 建议使用特定的文件名和分辨率,对于运行 iOS 8 的最新设备,最大为 180x180。

Android Chrome 主要使用清单,也依赖于 Apple touch 图标。

Windows 8.0 上的 IE 10 需要 PNG 图片和背景色,Windows 8.1 和 10 上的 IE 11 则需要在称为browserconfig.xml的专用 XML 文件中声明的几张 PNG 图片。

适用于 Mac OS X 的 Safari El Capitan 引入了用于固定选项卡的 SVG 图标

其他一些平台则在寻找具有各种分辨率的 PNG 文件,例如Google TV的 96x96 图片或Opera Coast的 228x228 图片。

参阅此收藏夹图片列表以获取完整参考。

TLDR:此网站图标生成器可以一次生成所有这些文件。该生成器还可以实现为WordPress 插件。完全披露:我是本网站的作者。

我没有在这里看到任何最新的信息,所以去了:

现在要回答这个问题,如果您希望图标在任何地方都看起来很棒,那么将不使用 2 个图标。请参阅以下尺寸:

16 x 16 –浏览器的标准尺寸
24 x 24 –用户界面的 IE9 固定站点大小
32 x 32 – IE 新页标签,Windows 7 + 任务栏按钮,Safari 阅读列表侧边栏
48 x 48 – Windows 网站
57 x 57 – iPod touch,iPhone 最高 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows 站点,HiDPI / Retina 中的 Safari Reader List 侧边栏
70 x 70 –赢得 8.1 Metro 磁贴
72 x 72 – iPad 触摸屏最高支持 iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone 视网膜触摸屏达到 iOS6
120 x 120 – iPhone 视网膜触摸 iOS7
128 x 128 – Chrome 网上应用店应用,Android
144 x 144 –用于固定站点的 IE10 Metro 磁贴,iPad 视网膜高达 iOS6
150 x 150 –赢得 8.1 Metro 磁贴
152 x 152 – iPad 视网膜触摸 iOS7
196 x 196 – Android Chrome
310 x 150 –赢得 8.1 宽的地铁图块
310 x 310 –赢得 8.1 Metro 磁贴

我不确定浏览器是否 / 如何缩放大图标,但是 W3C 建议以下1

您选择的图像格式必须为 16x16 像素或 32x32 像素,并使用 8 位或 24 位颜色。图像格式必须为 PNG(W3C 标准),GIF 或 ICO 之一。


1 w3c.org:如何将 Favicon 添加到您的站点(正在开发中)