苹果触摸图标的正确像素尺寸是多少？
[英]What are the correct pixel dimensions for an apple-touch-icon?
问题描述
I'm not sure what the correct size should be.
我不确定正确的尺寸应该是多少。
Many sites seem to repeat that the apple-touch-icon should be 57x57 pixels but cite a broken link as their source.许多网站似乎重复苹果触摸图标应该是 57x57 像素，但引用断开的链接作为其来源。
Hanselman 's and playgroundblues 's comments suggest different sizes including 163x163 and 60x60. Hanselman和playgroundblues的评论建议使用不同的尺寸，包括 163x163 和 60x60。
Apple's own apple.com icon is 129x129! Apple 自己的apple.com 图标是 129x129！
See my related question: How do I give my web sites an icon for iPhone?请参阅我的相关问题： 如何为我的网站提供 iPhone 图标？
11 个解决方案
解决方案1
41 已采纳 2010-08-16 06:15:28
It seems that Apple guidelines as of August 3, 2010 now include the "High resolution" images (for iPhone 4) in their "required" icon sizes.似乎截至 2010 年 8 月 3 日的 Apple 指南现在将“高分辨率”图像（适用于 iPhone 4）包含在“必需”图标大小中。
Looks like we need to provide both a 57x57 and a 114x114 image now, as well as a 640x960 title image.看起来我们现在需要提供 57x57 和 114x114 的图像，以及 640x960 的标题图像。
See Custom Icon and Image Creation Guidelines (Javascript required) which is part of a whole document:请参阅作为整个文档的一部分的自定义图标和图像创建指南（需要 Javascript）：
解决方案2
5 2008-08-06 23:13:35
From the Google cache of Apple Developer Connection - Web Apps Dev Center - Designing Content ...来自Apple Developer Connection - Web Apps Dev Center - Designing Content的 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.
Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.
解决方案3
3 2008-08-04 21:36:58
Depends on how much detail you want it to have, it needs to have the aspect ratio of 1:1 (basically - it needs to be square)取决于你想要它有多少细节，它需要有 1:1 的纵横比（基本上 - 它需要是方形的）
I would go with the Apple's own 129*129我会用苹果自己的 129*129
解决方案4
2 2014-01-15 22:04:48
Apple specs specify new sizes for iOS7: Apple 规范为 iOS7 指定了新尺寸：
- 60x60 60x60
- 76x76 76x76
- 120x120 120x120
- 152x152 152x152
Whereas old sizes for iOS6 and prior are:而 iOS6 及更早版本的旧尺寸是：
- 57x57 57x57
- 72x72 72x72
- 114x114 114x114
- 144x144 144x144
By the way, precomposed icons are deprecated.顺便说一下，不推荐使用预先组合的图标。
As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), these 8 pictures must be present and the generic code is:因此，为了支持新设备（运行 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">
In addition, you should create a 152x152 picture named apple-touch-icon.png .此外，您应该创建一个名为apple-touch-icon.png的 152x152 图片。
You might want to know that this favicon generator can generate all these pictures at once.您可能想知道这个图标生成器可以一次生成所有这些图片。 Full disclosure: I'm the author of this site.完全披露：我是这个网站的作者。
解决方案5
2 2008-08-06 23:06:01
I can not cite a source for those sizes because the official reference is under lock and key of ADC.我无法引用这些尺寸的来源，因为官方参考已被 ADC 锁定。
However, many of the non-NDA sites have the tutorials on how to create the icons.但是，许多非保密协议站点都有关于如何创建图标的教程。 For example here:例如这里：
解决方案6
2 2011-01-22 12:53:55
As part of their Safari Web Content Guide, Apple actually has a publicly available page called " Specifying a Webpage Icon for Web Clip " (Javascript required) which covers all of the resolutions and their implementation.作为 Safari Web 内容指南的一部分，Apple 实际上有一个名为“ 为 Web Clip 指定网页图标”（需要 Javascript）的公开页面，其中涵盖了所有分辨率及其实现。
解决方案7
1 2008-08-06 04:10:52
The official size is 57x57.官方尺寸为 57x57。 I would recommend using the exact size simply due to the fact that it takes less memory when loaded (unless Apple caches the scaled representation).我建议使用确切的大小，因为它在加载时占用的内存更少（除非 Apple 缓存缩放的表示）。 With that said, Rex is right that any square size will work话虽如此， 雷克斯是正确的，任何正方形都可以使用
解决方案8
0 2008-08-04 21:22:50
I don't think there is a "correct size".我认为没有“正确的尺寸”。 Since the iPhone really is running OSX, the icon rendering system is pretty robust.由于 iPhone 确实运行的是 OSX，因此图标渲染系统非常强大。 As long as you give it a high-quality image with the right aspect ratio and a resolution at least as high as the actual output will be, the OS will downscale very cleanly.只要您为它提供具有正确纵横比和分辨率至少与实际输出一样高的高质量图像，操作系统就会非常干净地缩小比例。 My site uses a 158x158 and the icon looks pixel-perfect on the iPhone screen.我的网站使用 158x158 并且图标在 iPhone 屏幕上看起来像素完美。
解决方案9
0 2013-11-12 16:06:59
Updated list October 2014, iOS8更新列表 2014 年 10 月，iOS8
List for iPhone and iPad with and without retina带和不带视网膜的 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">
Update 2014 iOS 8:更新 2014 iOS 8：
For iOS 8 and Iphone 6 plus适用于 iOS 8 和 Iphone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
Iphone 6 uses the same 120 x 120 px image as iphone 4 and 5 the rest is the same as for iOS 7 Iphone 6 使用与 iphone 4 和 5 相同的 120 x 120 px 图像，其余与 iOS 7 相同
Update 2013 iOS7:更新 2013 iOS7：
For iOS 7 the recommended resolutions changed:对于 iOS 7，推荐的分辨率已更改：
- for iPhone Retina from 114 x 114 px to 120 x 120 px iPhone Retina 从 114 x 114 px 到 120 x 120 px
- for iPad Retina from 144 x 144 px to 152 x 152 px iPad Retina 从 144 x 144 px 到 152 x 152 px
The other resolution are still the same其他分辨率还是一样
- 57 x 57 px default默认 57 x 57 像素
- 76 x 76 px for iPads without retina 76 x 76 px 适用于没有视网膜的 iPad
解决方案10
0 2014-04-20 20:43:21
You don't have to bother for correct size any more.您不必再为正确的尺寸而烦恼了。 If you have itune artwork file (ie file of 1024*1024 size) of your icon, then I have created this application which will provide you all the icons based on information provided here .如果您有图标的 iTunes 图稿文件（即 1024*1024 大小的文件），那么我已经创建了此应用程序，它将根据 此处提供的信息为您提供所有图标。 Get the application from here , and follow the instructions in readme file to create all the required icons for iOS application.从这里获取应用程序，并按照自述文件中的说明为 iOS 应用程序创建所有必需的图标。
解决方案11
0 2008-08-06 23:36:35
NilObject's link led me to the great blog post Catchup on your Icon at makentosh.com NilObject的链接导致我伟大的博客帖子上的图标追赶在makentosh.com
... Of course all of this inconsistency had to be dealt with eventually, right?
...each and every pixel ... rendered perfectly.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.