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

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

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

Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.

苹果自己的 apple.com icon 为129x129!

See my related question: How do I give my web sites an icon for iPhone?

0
额外 编辑
意见: 1
现在Apple.com的图标是152x152 ...
额外 作者 Wick,

11 答案

来自 Apple Developer Connection的Google缓存 - Web Apps开发人员中心 - 设计内容 ...

Create a Web Clip Bookmark Icon

iPhone and iPod touch allow a user to save a Web Clip bookmark to your site on their Home Screen.

To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.

To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit.

Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.

0
额外
你的回答已过时。请参阅 stackoverflow.com/questions/1598/…
额外 作者 Georg Schölly,

NilObject's link led me to the great blog post Catchup on your Icon at makentosh.com

当然,所有这些不一致   必须最终处理,   对? 2.0井处理好了   时尚!最后57x57实际上意味着   57x57。     

...每一个像素......呈现   完美。

0
额外

我不认为有一个“正确的大小”。由于iPhone确实在运行OSX,所以图标渲染系统非常强大。只要您以正确的宽高比为其提供高质量图像并且分辨率至少与实际输出一样高,OS就会非常干净地缩小比例。我的网站使用158x158,并且该图标在iPhone屏幕上看起来像素完美。

0
额外

官方尺寸是57x57。我会建议使用确切的大小,因为它在加载时占用较少的内存(除非Apple缓存缩放表示)。这就是说,雷克斯是正确的任何方形尺寸都可以工作

0
额外
除此之外,它可能会在iPad和iPhone 4上看起来模糊不清...
额外 作者 Simon East,

我不能引用这些尺寸的来源,因为官方的参考资料处于ADC的锁和钥匙之下。

但是,许多非NDA网站都有关于如何创建图标的教程。例如这里:

0
额外

作为Safari网页内容指南的一部分,Apple实际上有一个公开可用的页面,名为“指定Web Clip的网页图标”(需要使用Javascript),其中涵盖了所有的解决方案及其实施。

0
额外

你不必再为正确尺寸而烦恼。如果您有图标的itune图形文件(即1024 * 1024大小的文件),则我创建了此应用程序,它将根据所提供的信息为您提供所有图标这里。从这里获取应用程序,并按照自述文件中的说明为iOS应用程序创建所有必需的图标。

0
额外

更新列表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相同

Update 2013 iOS7:

对于iOS 7,建议的分辨率已更改:

  • 适用于iPhone Retina,从114 x 114 px到120 x 120 px
  • iPad视网膜从144 x 144 px到152 x 152 px

其他决议仍然是一样的

  • 57 x 57 px默认
  • 76 x 76像素,适用于没有视网膜的iPad
0
额外

取决于你想要它有多少细节,它需要有1:1的宽高比(基本上 - 它需要是方形的)

我会与苹果自己的129 * 129一起去

0
额外

看来,截至2010年8月3日的Apple指南现在包含“高分辨率”图像(适用于iPhone 4)的“必需”图标大小。

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

参见自定义图标和图像创建指南(需要Javascript)作为整个文档的一部分:

0
额外
让标题图片起作用时遇到了一些麻烦。在这里找到一个工作示例: gist.github.com/472519<�! - STARTUP图像 - > 部分)
额外 作者 Blaise,
额外 作者 thelem,
请注意,iPad使用以下尺寸的图标:72x72第一代和第二代;第三代“Retina”为144x144。
额外 作者 donut,

Apple specs specify new sizes for iOS7:

  • 60×60
  • 76x76
  • 120×120
  • 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">

此外,您应该创建一个名为 apple-touch-icon.png

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

0
额外