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

Translate

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

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

汉瑟曼蓝调乐园的评论建议使用不同的尺寸,包括163x163和60x60。

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

请参阅我的相关问题:如何为我的网站提供iPhone图标?

This question and all comments follow the "Attribution Required."

所有的回答

Translate

截至2010年8月3日,Apple准则现在似乎在“必需”图标尺寸中包括了“高分辨率”图像(适用于iPhone 4)。

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

看到自定义图标和图像创建准则(需要Javascript),它是整个文档的一部分:

来源
Translate

从Google缓存Apple开发人员连接-Web Apps开发中心-设计内容...

创建一个Web剪辑书签图标

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

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

要覆盖特定网页上的站点书签图标,请在页面的<head>元素中插入与<link rel =“ apple-touch-icon” href =“ / customIcon.png” />类似的<link>元素。

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

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

来源
Translate

取决于您要拥有多少细节,它的宽高比必须为1:1(基本上-必须为正方形)

我会选择苹果自己的129 * 129

来源
Translate

我无法提供这些尺寸的数据源,因为官方参考已由ADC锁定和密钥。

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

来源
Translate

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

来源
Translate

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

来源
Translate

苹果规格指定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.

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

来源
Translate

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

来源
Translate

NilObject的链接将我引向了精彩的博客文章赶上您的图标makentosh.com

...当然,所有这些不一致之处最终都必须得到解决,对吗?好吧2.0很好地处理了它!最后,57x57实际上就是57x57。

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

来源
Translate

您不必再为正确的尺寸而烦恼。如果您的图标具有iTunes艺术品文件(即1024 * 1024大小的文件),那么我已经创建了此应用程序,它将根据提供的信息为您提供所有图标这里。得到从这里申请,并按照自述文件中的说明创建iOS应用程序所需的所有图标。

来源
Translate

更新列表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和iPhone 5相同的120 x 120 px图像,其余与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像素
来源