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

StackOverflow https://stackoverflow.com/questions/1598

题

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

许多网站似乎都重复说 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。

...每个像素...渲染完美。

您不必再为正确的尺寸而烦恼。如果您有 itune 图稿文件（即1024*1024 大小的文件）的图标，那么我创建了这个应用程序，它将根据提供的信息为您提供所有图标 这里. 。获取 从这里申请, ，并按照自述文件中的说明创建 iOS 应用程序所需的所有图标。

更新列表 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 像素
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top