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

时间:2008-08-04 21:17:51

标签: iphone favicon apple-touch-icon

我不确定应该是什么样的正确尺寸。

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

Hanselmanplaygroundblues的评论提出了不同的尺寸,包括163x163和60x60。

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

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

11 个答案:

答案 0 :(得分:41)

截至2010年8月3日的Apple指南现在似乎包含了“高分辨率”图片(适用于iPhone 4)的“必需”图标尺寸。

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

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

答案 1 :(得分:5)

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

  

创建网络剪辑书签图标

     

iPhone和iPod touch允许用户使用   将Web Clip书签保存到您的站点   在他们的主屏幕上。

     

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

     

要覆盖网站书签图标   特定网页,插入< link>   元素类似于< link   相对=“苹果触摸图标”   HREF = “/ customIcon.png”/>在...内   < HEAD>页面的元素。

     

书签图标尺寸应为57x57像素。如果图标是   不同的尺寸,它将缩放和   裁剪得很合身。

     

Safari会自动合成   带有标准“玻璃”的图标   覆盖所以它看起来像一个内置的   iPhone或iPod应用程序。

答案 2 :(得分:3)

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

我会选择Apple自己的129 * 129

答案 3 :(得分:2)

我不能引用这些尺寸的来源,因为官方参考是锁定和ADC的关键。

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

答案 4 :(得分:2)

作为其Safari Web内容指南的一部分,Apple实际上有一个名为“Specifying a Webpage Icon for Web Clip”的公开页面(需要Javascript),其中涵盖了所有解决方案及其实现。

答案 5 :(得分:1)

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

答案 6 :(得分:1)

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

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

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

答案 7 :(得分:0)

NilObject的链接引导我访问Catchup on your Icon

上的精彩博文makentosh.com
  

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

     

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

答案 8 :(得分:0)

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

答案 9 :(得分: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相同的120 x 120像素图像,其余5与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 px default
  • 76 x 76 px for iPads without retina

答案 10 :(得分:0)

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