apple-touch-icon.png应该为iPad和iPhone 4设置多大的尺寸？

苹果是否支持大于60×60的图标？如果是，我应该使用什么尺寸的iPad和iPhone 4？

Answer 1

使用这些尺寸57×57,72×72,114×114,144×144然后在您的文档的头部这样做：

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" /> 

这将在所有苹果设备上看起来不错。 ;）

Answer 2

随着iPad（第三代），现在有四个图标大小57×57,72×72,114×114,144×144。

由于视网膜图标的大小正好是标准图标的两倍，因此我们只需要制作两个图标 ：114 x 114和144 x 144.通过将视网膜大小的图标设置为相应的标准图标，iOS会相应地缩放它们。

 <!-- Standard iPhone --> <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" /> <!-- Retina iPhone --> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" /> <!-- Standard iPad --> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" /> <!-- Retina iPad --> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" /> 

Answer 3

更新列表2017年10月，iOS11

列出iPhone和iPad有和没有视网膜

 <!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS --> <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png"> <!-- iPad and iPad mini @1x --> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 --> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <!-- iPad and iPad mini @2x --> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> <!-- iPad Pro --> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png"> <!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus --> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> <!-- Android Devices High Resolution --> <link rel="icon" sizes="192x192" href="icon-hd.png"> <!-- Android Devices Normal Resolution --> <link rel="icon" sizes="128x128" href="icon.png"> 

2017年10月更新iOS 11：选中iOS 11，引入iPhone X和iPhone 8

更新date：2016年11月iOS 10：新iOS版iPhone 7和iPhone 7plus推出，它们具有与iPhone 6s和iPhone 7plus相同的显示分辨率，dpi等，直到现在没有更改发现尊重更新2015

2016年中更新Android：将Android设备添加到列表中，因为苹果触摸链接被Google标记为不推荐使用，并且不会随时为其设备提供支持

 <!-- Android Devices High Resolution --> <link rel="icon" sizes="192x192" href="icon-hd.png"> <!-- Android Devices High Resolution --> <link rel="icon" sizes="128x128" href="icon.png"> 

2015年更新iOS 9：适用于iOS 9和iPad Pro

 <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png"> 

新的iPhone（6s和6s Plus）使用与iPhone（6和6 Plus）相同的尺寸，新iPad Pro使用尺寸为167×167像素的图像，其他分辨率仍然相同。

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相同

2013年更新iOS7：

对于iOS 7，build议的分辨率已更改：

• iPhone视网膜从114×114像素到120×120像素
• iPad视网膜从144×144像素到152×152像素

另一个决议仍然是一样的

• 57 x 57像素默认
• 76 x 76像素为iPad没有视网膜

来源： https ： //developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Answer 4

苹果网站上的图标是152×152像素。
apple-touch-icon.png

希望这能回答你的问题。

Answer 5

我一直在开发和deviseiOS应用程序， 这是最好的iOSdevise备忘单！

玩的开心 ：）！

更新：对于iOS 8+和新设备（iPhone 6，6 Plus，iPad Air），请参阅此更新的链接 。

Meta更新： Iphone 6s / 6s Plus的分辨率与iPhone 6/6 Plus相同

这是来自文章新版本的图片：

Answer 6

Apple网站上的相关文档， 指定Web Clip的网页图标 。

没有必要把任何东西放在你的文档头上。 如果没有使用链接元素指定图标，则会使用apple-touch-icon或apple-touch-icon-precomposed前缀search网站根目录中的图标。

例如，如果设备的适当图标大小为57 x 57，系统将按以下顺序search文件名：

• 苹果触摸图标-57×57-precomposed.png
• 苹果触摸图标57×57.png
• 苹果触摸图标precomposed.png
• 苹果触摸的icon.png

Answer 7

是。 如果大小不匹配，系统将重新调整它的大小 。 但是最好制作2个版本的图标。

• iPad – 72×72。
• iPhone（≥4） – 114×114。
• iPhone≤3GS – 57×57 – 如果可能的话。

您可以通过服务器上的用户代理区分iPad和iPhone 。 如果您不想在服务器上编写脚本，也可以使用Javascript更改图标

 <link ref="apple-touch-icon" href="iPhone_version.png" /> ... if (... iPad test ...) { $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery } 

这是因为只有在添加Web剪辑时才会查询图标。

（目前还没有公开的方法可以将iPhone从iOS iPhone4中区分为不超过3GB的JavaScript）。

Answer 8

TL; DR： 在180 x 180 px @ 150 ppi下使用一个PNG图标，然后像这样链接到它：

 <link rel="apple-touch-icon" href="path/to/apple-touch-icon.png"> 

详细的方法

截至2017年10月30日，苹果的规范反应反映在iOS上的文档中 。

规范正式说：

• iPhone 180px×180px（60pt×60pt @ 3x）
• iPhone 120px×120px（60pt×60pt @ 2x）
• iPad Pro 167px×167px（83.5pt×83.5pt @ 2x）
• iPad，iPad mini 152px×152px（76pt×76pt @ 2x）

实际上，这些尺寸差异很小，所以节省的性能只能在非常高的stream量站点上才有效。

对于stream量较低的站点，我通常使用一个180 x 180像素@ 150 ppi的PNG图标，并且在所有设备上都能获得非常好的效果，即使是加号的设备也是如此。

Answer 9

是的，支持大于60×60。 为了简单起见，创build这4种尺寸的图标：

 1) 60x60 <= default 2) 76x76 3) 120x120 4) 152x152 

现在，最好将它们添加为HTML中的链接：

 <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"> 

你可以select不声明上面的4个链接，而只是声明一个链接，在这种情况下，最大的尺寸是152x152 ，甚至比196x196 。 它总是会缩小重新使用的大小。 确保你提到的size 。

你也可以select不声明一个单一的链接。 苹果提到，在这种情况下，它会首先查找服务器根目录的大小（命名格式： apple-touch-icon-<size>.png ），如果没有find，那么它将接下来寻找default file: apple-touch-icon.png 。 您最好定义链接，这样可以最大限度地减less浏览器查询您的服务器。

图标必需品：

 - use PNG, avoid interlaced - use 24-bit PNG - not necessary to use web-safe colors 

在iOS 7之前的版本中，如果您不希望将效果添加到图标，则只需将后缀-precomposed.png添加到文件名中即可。 （即使没有它，iOS 7也不会添加效果）。

Answer 10

我想这个问题是关于网页图标的。 我已经尝试在512×512的图标，并在iPhone 4模拟器，它看起来不错（预览），但是，当添加到主屏幕它是非常像素化。

好的一面是，如果您在iPad上使用更大的图标（仍然使用我的512x512testing），iPad上的质量似乎更高。 希望iPhone 4渲染是一个错误。

我已经在雷达上打开了一个错误。

编辑：

我目前正在使用一个114×114的图标，希望在iPhone 4发布时看起来不错。 如果iPhone 4出现问题时仍然存在问题，我将优化iPad的图标（清晰，无需调整72×72），然后让它缩小以适应旧的iPhone。

Answer 11

对于iPhone和iPod touch ，创build可以衡量的图标：

  57 X 57 pixels 114 X 114 pixels (high resolution @2X) 

对于iPad ，创build一个图标来衡量：

  72 x 72 pixels 144 X 144 pixels (high resolution @2X)