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

nodit 发布于 2018-02-07 favicon 最后更新 2018-02-07 01:08 819 浏览

我不确定正确的大小应该是什么。 许多网站似乎重复说苹果触摸图标应该是57x57像素,但引用一个断开的链接作为他们的来源。 Hanselmanplaygroundblues的评论建议使用不同的尺寸,包括163x163和60x60。 苹果自己的apple.com icon是129x129! 看到我的相关问题: How do I give my web sites an icon for iPhone?

已邀请:

vfugit

赞同来自:

我不认为有一个“正确的大小”。由于iPhone确实在运行OSX,图标渲染系统非常强大。只要你给它一个高分辨率的图像,并且分辨率至少和实际输出一样高,那么操作系统就会很干净地缩小比例。我的网站使用的是158x158的图标,在iPhone屏幕上看起来像素完美。

prerum

赞同来自:

取决于你想要它有多少细节,它需要有1:1的宽高比(基本上 - 它需要是方形的) 我会去苹果自己的129 * 129

oqui

赞同来自:

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

oqui

赞同来自:

我不能引用这些尺寸的来源,因为官方的参考资料是ADC的锁和钥匙。 但是,许多非NDA网站都有关于如何创建图标的教程。例如这里:

nodit

赞同来自:

Apple Developer Connection - Web Apps开发人员中心 - 设计内容的Google缓存中...

Create a Web Clip Bookmark Icon iPhone and iPod touch allow a user to save a Web Clip bookmark to your site on their Home Screen. To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons. To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page. The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit. Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.

nodit

赞同来自:

NilObject的链接将我带到makentosh.com上的博客文章Catchup on your Icon

... Of course all of this inconsistency had to be dealt with eventually, right? Well 2.0 dealt with it in fine fashion! Finally 57x57 actually meant 57x57. ...each and every pixel ... rendered perfectly.

xeos

赞同来自:

看来,截至2010年8月3日,苹果的指导方针现在包含“高分辨率”图像(用于iPhone 4)的“必需”图标大小。 看起来我们现在需要同时提供57x57和114x114图像,以及640x960标题图像。 请参阅作为整个文档一部分的Custom Icon and Image Creation Guidelines(需要Javascript):

gquia

赞同来自:

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

amagni

赞同来自:

更新列表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和5相同的120 x 120像素图像,其余与iOS 7相同 更新2013 iOS7: 对于iOS 7,建议的分辨率已更改:
  • iPhone视网膜从114 x 114像素到120 x 120像素
  • iPad视网膜从144 x 144像素到152 x 152像素
  • 另一个决议仍然是一样的
    • 57 x 57 px默认
    • 没有视网膜的iPad 76 x 76像素

xeos

赞同来自:

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可以一次生成所有这些图片。充分披露:我是这个网站的作者。

ueum

赞同来自:

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