关于iPhone:Apple-Touch-icon的正确像素尺寸是多少?

关于iPhone:Apple-Touch-icon的正确像素尺寸是多少?

What are the correct pixel dimensions for an apple-touch-icon?

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

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

汉瑟曼(Hanselman)和游乐场蓝调(注释)建议使用163x163和60x60的不同尺寸。

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

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


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

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

请参阅自定义图标和图像创建准则(需要Javascript),该准则是整个文档的一部分:

  • iOS人机界面指南(2013; Apple Inc .; PDF; 26.3 MB)

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

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.webp" 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 element similar to within the
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.


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

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


作为Safari Web内容指南的一部分,Apple实际上有一个公开可用的页面,称为"为Web Clip指定网页图标"(需要Javascript),其中涵盖了所有解决方案及其实现。

  • Safari Web内容指南(2012; Apple Inc; PDF; 6.91 MB)

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

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

  • HOWTO:iPhone Webclip图标(2008年1月; Dan Dickinson撰写)

苹果规格为iOS7指定了新尺寸:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

而iOS6和更低版本的旧尺寸为:

  • 57x57
  • 72x72
  • 114x114
  • 144x144

顺便提一下,不建议使用预先组合的图标。

因此,要支持新设备(运行iOS7)和旧设备(iOS6及更低版本),必须提供这8张图片,并且通用代码为:

1
2
3
4
5
6
7
8
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.webp">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.webp">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.webp">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.webp">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.webp">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.webp">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.webp">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.webp">

此外,您应该创建一个名为apple-touch-icon.webp的152x152图片。

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


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


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


更新列表2014年10月,iOS8

适用于带和不带视网膜的iPhone和iPad的列表

1
2
3
4
5
<link rel="apple-touch-icon" href="touch-icon-iphone.webp">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.webp">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.webp">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.webp">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.webp">

更新2014 iOS 8:

对于iOS 8和Iphone 6 plus

1
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.webp">

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像素

NilObject的链接将我引到了makentosh.com上关于您的Icon的精彩博客文章Catchup

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


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


推荐阅读