Apple Touch图标的正确像素尺寸是多少?

从2010年8月3日起,苹果公司的指导方针似乎将“高分辨率”图像(iPhone4)包含在其“所需”图标大小中。

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

见 Custom Icon and Image Creation Guidelines (需要javascript)是整个文档的一部分:

• iOS Human Interface Guidelines (2013; by Apple Inc; PDF; 26,3 MB)

从谷歌的缓存 Apple开发者连接-Web应用程序开发中心-设计内容 …

创建网页剪辑书签图标

iPhone和iPod touch允许用户 将网页剪辑书签保存到网站 在他们的主屏幕上。

为所有用户指定书签图标 网站页面,放置PNG图像 命名为“apple touch icon.png” Web服务器的根目录- 类似于现场的“favicon.ico” 图标。

覆盖网站书签图标 一个特定的网页,插入一个<链接> 与链接类似的元素 rel=“苹果触摸图标” href=“/customcon.png”/> &页面的lt;head>元素。

书签图标尺寸应为57x57像素。如果图标是 不同的尺寸将被缩放 裁剪以适应。

Safari将自动合成 带有标准“玻璃色”的图标 覆盖,使其看起来像内置的 iPhone或iPod应用程序。

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

我要苹果自己的129*129

我不能引用这些大小的源代码,因为官方引用处于ADC的锁和键下。

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

• HOWTO: iPhone Webclip Icons (Jan 2008; by Dan Dickinson)

作为其Safari Web内容指南的一部分,苹果实际上有一个公共页面,名为 Specifying a Webpage Icon for Web Clip “(需要javascript)包括所有决议及其实现。

• Safari Web Content Guide (2012; by Apple Inc; PDF; 6,91 MB)

官方尺寸是57x57。我建议使用精确的大小,因为加载时占用的内存较少(除非苹果缓存缩放的表示)。这样说, Rex is right 任何正方形都可以

Apple specs 为iOS7指定新尺寸:

• 60x60
• 76x76
• 120×120
• 152x152

而IO6及之前的旧尺寸为:

• 57×57
• 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 可以一次生成所有这些图片。完全公开:我是这个网站的作者。

我觉得没有“合适的尺寸”。由于iPhone确实在运行OSX,因此图标呈现系统非常强大。只要你给它一个高质量的图像,具有正确的纵横比和分辨率至少与实际输出一样高,操作系统将非常干净地缩小。我的网站使用158x158,图标在iPhone屏幕上看起来非常完美。

Nilobject的链接让我找到了伟大的博客帖子 Catchup on your Icon 在 makentosh.com

…当然,所有这些都不一致 最终不得不处理, 正确的?2.0井处理得很好 时尚!最后57x57实际上意味着 57×57。

…每个像素…提供 完美。

你不必再为正确的尺寸费心了。如果您有图标的iTune图片文件(即1024*1024大小的文件),那么我已经创建了这个应用程序,它将根据提供的信息为您提供所有图标。 here . 得到 application from here ,并按照自述文件中的说明创建iOS应用程序所需的所有图标。

更新清单2014年10月,IO8

带或不带视网膜的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"> 

iPhone6使用与iPhone4和iPhone5相同的120 x 120像素图像,其余与iOS 7相同

更新2013 iOS7:

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

• 对于从114 x 114 px到120 x 120 px的iPhone视网膜
• iPad视网膜从144 x 144 px到152 x 152 px

另一个决议仍然是相同的

• 57 x 57像素默认
• 无视网膜的iPad用76 x 76像素