可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
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.
Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.
Apple's own apple.com icon is 129x129!
See my related question:
How do I give my web sites an icon for iPhone?
回答1:
It seems that Apple guidelines as of August 3, 2010 now include the "High resolution" images (for iPhone 4) in their "required" icon sizes.
Looks like we need to provide both a 57x57 and a 114x114 image now, as well as a 640x960 title image.
See Custom Icon and Image Creation Guidelines (Javascript required) which is part of a whole document:
- iOS Human Interface Guidelines (2013; by Apple Inc; PDF; 26,3 MB)
回答2:
From the Google cache of Apple Developer Connection - Web Apps Dev Center - Designing Content...
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.
回答3:
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)
I would go with the Apple's own 129*129
回答4:
I can not cite a source for those sizes because the official reference is under lock and key of ADC.
However, many of the non-NDA sites have the tutorials on how to create the icons. For example here:
- HOWTO: iPhone Webclip Icons (Jan 2008; by Dan Dickinson)
回答5:
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 Content Guide (2012; by Apple Inc; PDF; 6,91 MB)
回答6:
The official size is 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). With that said, Rex is right that any square size will work
回答7:
Apple specs specify new sizes for iOS7:
- 60x60
- 76x76
- 120x120
- 152x152
Whereas old sizes for iOS6 and prior are:
- 57x57
- 72x72
- 114x114
- 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:
<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
.
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.
回答8:
I don't think there is a "correct size". Since the iPhone really is running OSX, the icon rendering system is pretty robust. 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.
回答9:
NilObject's link led me to the great blog post Catchup on your Icon at makentosh.com
... 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.
回答10:
You don't have to bother for correct size any more. If you have itune artwork file (i.e. 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. Get the application from here, and follow the instructions in readme file to create all the required icons for iOS application.
回答11:
Updated list October 2014, iOS8
List for iPhone and iPad with and without retina
<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:
For iOS 8 and 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
Update 2013 iOS7:
For iOS 7 the recommended resolutions changed:
- for iPhone Retina from 114 x 114 px to 120 x 120 px
- for iPad Retina from 144 x 144 px to 152 x 152 px
The other resolution are still the same
- 57 x 57 px default
- 76 x 76 px for iPads without retina