2008-08-04 87 views
68

我不确定正确的尺寸应该是多少。苹果触摸图标的正确像素尺寸是多少?

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

Hanselman's和playgroundblues的评论暗示不同尺寸,包括163x163和60x60。

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

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

+0

相关:[为什么我会得到苹果touch-icon-precomposed.png错误](http://stackoverflow.com/q/12480497/367456)和另一个好的在线资源似乎是:[*你一直想知道触摸图标*(2011年3月; Mathias Bynens)](http://mathiasbynens.be/notes/touch-icons) – hakre 2013-09-02 08:48:46

+0

现在Apple.com的图标是152x152 ... – Wick 2013-10-18 21:01:14

+0

https:// developer .apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html – Blazemonger 2013-10-22 14:50:07

回答

0

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

3

取决于你有多少细节希望它有,它需要有1宽高比:1(基本上是 - 它需要平方米)

我会去与苹果公司自己的129 * 129

1

官方尺寸为57x57。我会建议使用确切的大小,因为它加载时占用的内存更少(除非Apple缓存缩放表示)。这就是说,Rex is right任何正方形大小将工作

+0

除了它可能看起来在iPad和iPhone 4上模糊... – 2011-07-14 02:14:37

5

苹果开发的谷歌的缓存 - Web应用程序开发中心 - 设计内容 ...

创建Web收藏夹图标

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

要指定一个书签图标为所有 页面的网站,请将名为“苹果触摸的icon.png” PNG图像 在你的web服务器的 根目录 - 类似于“图标。 ico“为网站 图标。

要覆盖站点书签图标上 特定的网页,插入类似<链接 相对=“苹果触摸图标” HREF一个<链接> 元素=“/ customIcon.png”/>内该页面的head>元素的 <。

书签图标尺寸应为57x57像素。如果该图标是 不同的大小,则会缩放并且 被裁剪以适合。

Safari浏览器会自动复合 与标准图标“玻璃态” 叠加,所以它看起来像一个内置 iPhone或iPod应用程序。

0

NilObject的链接导致我伟大的博客文章Catchup on your Iconmakentosh.com

......当然,这一切矛盾 不得不最终被处理, 吧?那么2.0好处理它在时尚的 !最后57x57实际上意味着 57x57。

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

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加

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

iPhone 6使用相同的120×120像素的图像作为iphone 4和5的其余部分是相同的为iOS 7

更新2013 iOS7:

对于iOS 7的推荐的分辨率改变:

  • 用于iPhone视网膜从114 X 114像素吨ø120×120像素
  • 为iPad视网膜从144×144像素到152 X 152像素

其他分辨率仍然是相同的

  • 57 X 57 PX默认
  • 76 X 76像素的ipad公司没有视网膜
1

Apple specs为iOS7指定新的大小:

  • 60X60
  • 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"> 

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

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

0

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