对于iPad和iPhone,apple-touch-icon.png的尺寸应该是多大？

Question

是否支持大于60x60的Apple触控图标,如果支持,我应该在iPad和iPhone上使用哪些尺寸？

Answer 1

更新列表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已推出

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

更新2016年中期Android: 将Android设备添加到列表中,因为Apple-touch链接被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专业版

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

新的iPhone(6s和6s Plus)使用与iPhone(6和6 Plus)相同的尺寸,新的iPad pro使用尺寸为167x167像素的图像,其他分辨率仍然相同.

更新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默认值
• 76 x 76像素适用于没有视网膜的iPad

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

Answer 2

使用这些尺寸57x57,72x72,114x114,144x144然后在文档的头部执行此操作:

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

随着iPad(第3代),现在有四个图标尺寸57x57,72x72,114x114,144x144.

因为视网膜图标正好是标准图标的两倍,我们实际上只需要制作2个图标: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 4

Apple网站上的图标为152x152像素.
http://www.apple.com/apple-touch-icon.png

希望这能回答你的问题.

Answer 5

我一直在开发和设计iOS应用程序,这是最好的iOS设计备忘单!

玩得开心 :)!

更新: 对于iOS 8+和新设备(iPhone 6,6 Plus,iPad Air),请参阅此更新的链接.

元更新: Iphone 6s/6s Plus分别具有与iPhone 6/6 Plus相同的分辨率

这是该文章新版本的图片:

Answer 6

TL; DR:使用一个180 x 180 px @ 150 ppi的PNG图标,然后像这样链接到它:

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

方法细节

截至2018年10月2日,Apple的规范回应反映在他们关于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)

实际上,这些尺寸差异很小,因此性能节省实际上只对非常高流量的站点有用.

对于流量较低的站点,我通常使用一个180 x 180 px @ 150 ppi的PNG图标,并在所有设备上获得非常好的结果,即使是加大尺寸的设备.

Answer 7

Apple网站上的相关文档,为Web Clip指定网页图标.

没有必要在文档的头部放置任何内容.如果未使用link元素指定图标,则会在网站根目录中搜索带有apple-touch-icon或apple-touch-icon-precomposed前缀的图标.

例如,如果设备的相应图标大小为57 x 57,系统将按以下顺序搜索文件名:

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

Answer 8

是.如果大小不匹配,系统将重新调整它.但是制作2个版本的图标会更好.

• iPad - 72x72.
• iPhone(？4) - 114x114.
• iPhone？3GS - 57x57 - 如果可能的话.

您可以通过服务器上的用户代理区分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？4与iPhone？3GS在Javascript中区分开来.)