苹果触摸图标的正确像素尺寸是多少?
-
08-06-2019 - |
题
我不确定正确的尺寸应该是多少。
许多网站似乎都重复说 apple-touch-icon 应该是 57x57 像素,但引用了一个损坏的链接作为其来源。
汉塞尔曼'沙 游乐场布鲁斯的评论建议使用不同的尺寸,包括 163x163 和 60x60。
苹果自己的 苹果网站图标 是 129x129!
请参阅我的相关问题:如何为我的网站提供 iPhone 图标?
解决方案
截至 2010 年 8 月 3 日,Apple 指南似乎已将“高分辨率”图像(适用于 iPhone 4)纳入其“必需”图标尺寸中。
看起来我们现在需要提供 57x57 和 114x114 图像,以及 640x960 标题图像。
看 自定义图标和图像创建指南 (需要 JavaScript)这是整个文档的一部分:
其他提示
来自 Google 缓存 Apple 开发者连接 - Web 应用开发中心 - 设计内容...
创建 Web Clip 书签图标
iPhone和iPod Touch允许用户在主屏幕上将网络剪辑书签保存到您的网站。
要为网站的所有页面指定书签图标,请将名为“ Apple-touch-icon.png”的PNG图像放在您的Web服务器的根目录上 - 类似于网站图标的“ Favicon.ico”。
要覆盖特定网页上的站点书签图标,请插入一个u003Clink>类似的元素u003Clinkn rel="apple-touch-icon"n href="/customIcon.png"/>在u003Chead>页面的元素。
书签图标尺寸应为 57x57 像素。如果图标是不同的尺寸,它将被缩放和裁剪以适合。
Safari将使用标准的“玻璃”覆盖层自动将图标复合,因此看起来像是内置的iPhone或iPod应用程序。
取决于你想要它有多少细节,它需要有 1:1 的纵横比(基本上 - 它需要是正方形的)
我会选择苹果自己的129*129
我无法引用这些尺寸的来源,因为官方参考资料已被 ADC 锁定。
但是,许多非 NDA 网站都有有关如何创建图标的教程。例如这里:
作为 Safari Web 内容指南的一部分,Apple 实际上有一个公开页面,名为“指定 Web Clip 的网页图标“(需要 JavaScript)涵盖所有决议及其实施。
官方尺寸为57x57。我建议使用精确的大小,因为加载时占用的内存更少(除非 Apple 缓存缩放后的表示)。照这样说, 雷克斯是对的 任何正方形尺寸都可以
苹果规格 指定 iOS7 的新尺寸:
- 60x60
- 76x76
- 120x120
- 152x152
iOS6 及更早版本的旧尺寸为:
- 57x57
- 72x72
- 114x114
- 144x144
顺便说一句,预先组合的图标已被弃用。
因此,为了支持新设备(运行 iOS7)和旧设备(iOS6 及更早版本),必须存在这 8 张图片,通用代码为:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
此外, 您应该创建一个名为的 152x152 图片 apple-touch-icon.png
.
您可能想知道这个 网站图标生成器 可以一次生成所有这些图片。全面披露:我是这个网站的作者。
我认为没有“正确的尺寸”。由于 iPhone 确实运行 OSX,因此图标渲染系统非常强大。只要你给它一个高质量的图像,具有正确的宽高比和至少与实际输出一样高的分辨率,操作系统就会非常干净地缩小尺寸。我的网站使用 158x158 的尺寸,图标在 iPhone 屏幕上看起来像素完美。
NilObject 的链接让我看到了这篇很棒的博客文章 追赶你的图标 在 makentosh.com
...当然,所有这些不一致都必须最终解决,对吗?井2.0以良好的方式处理它!最后,57x57实际上是指57x57。
...每个像素...渲染完美。
更新列表 2014 年 10 月,iOS8
带或不带视网膜的 iPhone 和 iPad 的列表
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
更新2014年iOS 8:
适用于 iOS 8 和 Iphone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
iPhone 6 使用与 iPhone 4 和 5 相同的 120 x 120 像素图像,其余部分与 iOS 7 相同
更新2013 iOS7:
对于 iOS 7,推荐的分辨率发生了变化:
- 对于 iPhone Retina,从 114 x 114 像素到 120 x 120 像素
- 适用于 iPad Retina,从 144 x 144 像素到 152 x 152 像素
其他分辨率还是一样
- 默认 57 x 57 像素
- 不带视网膜的 iPad 为 76 x 76 像素