ChatGPT解决这个技术问题 Extra ChatGPT

苹果触摸图标的正确像素尺寸是多少?

我不确定正确的尺寸应该是多少。

许多网站似乎重复说苹果触摸图标应该是 57x57 像素,但引用了一个断开的链接作为它们的来源。

Hanselmanplaygroundblues 的评论建议使用不同的尺寸,包括 163x163 和 60x60。

Apple 自己的 apple.com icon 是 129x129!

请参阅我的相关问题:How do I give my web sites an icon for iPhone?


h
hakre

自 2010 年 8 月 3 日起,Apple 指南似乎现在在其“必需”图标大小中包含“高分辨率”图像(适用于 iPhone 4)。

看起来我们现在需要同时提供 57x57 和 114x114 的图像,以及 640x960 的标题图像。

请参阅作为整个文档一部分的 Custom Icon and Image Creation Guidelines(需要 Javascript):

iOS 人机界面指南(2013;Apple Inc;PDF;26.3 MB)


我在让标题图像工作时遇到了一些麻烦。在这里找到了一个工作示例:gist.github.com/472519<!-- STARTUP IMAGES --> 部分)
请注意,iPad 使用以下图标尺寸:72x72 第一代和第二代;第 3 代“视网膜”分辨率为 144x144。
由于 OP 谈论的是 apple-touch-icon(即 iOS 从网站上提取的图像以在主屏幕上显示为图标),而不是原生应用程序自己的图标,因此 640 x 940 标题图像在这里不相关. (也就是说,有一个 320 x 480 的“启动”图像,如 here 所述
s
saniul

取决于您希望它拥有多少细节,它需要具有 1:1 的纵横比(基本上 - 它需要是方形的)

我会选择苹果自己的 129*129


p
philippe_b

Apple specs 为 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">

此外,you should create a 152x152 picture named apple-touch-icon.png

您可能想知道这个 favicon generator 可以一次生成所有这些图片。完全披露:我是本网站的作者。


C
Community

官方尺寸为 57x57。我建议使用确切的大小,因为它在加载时占用的内存更少(除非 Apple 缓存缩放的表示形式)。话虽如此,Rex is right 任何正方形都可以


R
Rex M

我认为没有“正确的尺寸”。由于 iPhone 确实运行的是 OSX,因此图标渲染系统非常强大。只要您为其提供具有正确纵横比和至少与实际输出一样高的分辨率的高质量图像,操作系统就会非常干净地缩小比例。我的网站使用 158x158,图标在 iPhone 屏幕上看起来像素完美。


R
Rizwan

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 视网膜从 144 x 144 像素到 152 x 152 像素

其他分辨率还是一样

57 x 57 像素默认

76 x 76 px 适用于不带视网膜的 iPad


R
Rizwan

您不必再为正确的尺寸而烦恼。如果您有图标的 iTunes 图稿文件(即 1024*1024 大小的文件),那么我创建了这个应用程序,它将根据所提供的信息为您提供所有图标 here。获取 application from here,然后按照自述文件中的说明创建 iOS 应用程序所需的所有图标。


关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅