以前我們用過favicon在瀏覽器給網(wǎng)站進行身份標(biāo)識尾膊，用法如下：
[html]view plaincopy
現(xiàn)今移動設(shè)備越來越多翅阵，蘋果為iOS設(shè)備配備了apple-touch-icon私有屬性皆尔，添加該屬性双藕，在iPhone,iPad,iTouch的safari瀏覽器上可以使用添加到主屏按鈕將網(wǎng)站添加到主屏幕上，方便用戶以后訪問烹棉。實現(xiàn)方法是在HTML文檔的標(biāo)簽加入下面代碼即可攒霹。
[html]view plaincopy
apple-touch-icon 標(biāo)簽支持sizes屬性，可以用來放置對應(yīng)不同的設(shè)備浆洗。
57×57（默認(rèn)值）的圖標(biāo)對應(yīng)320×640的iphone老設(shè)備剔蹋，72×72對應(yīng)ipad，114×114對應(yīng)retina屏的iPhone及iTouch辅髓。ipad3對應(yīng)144×144的高分辨率泣崩。
這是官方開發(fā)社區(qū)的詳細(xì)介紹：
Create different sizes of your app icon for different devices.If you’re creating a universal app, you need to supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)
When iOS displays your app icon on the Home screen of a device, it automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:
Rounded corners
Drop shadow
Reflective shine (unless you prevent the shine effect)
Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later).
Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:
Has 90° corners
Does not have any shine or gloss
所以最完善的寫法應(yīng)該是：
[html]view plaincopy
雖然官方都用的png圖片做說明，但實際測試jpg格式也可用（不推薦）洛口，圖片無需做圓角和高光效果矫付，同Native App一樣，系統(tǒng)會自動為圖標(biāo)添加圓角及高光第焰。如果不想系統(tǒng)對圖標(biāo)添加效果买优，可以用apple-touch-icon-precomposed代替apple-touch-icon，這時我們提供的圖標(biāo)就要自己做圓角和高亮效果了。
圖標(biāo)搜索的優(yōu)先級如下：
如果沒有跟相應(yīng)設(shè)備推薦尺寸一致的圖標(biāo)杀赢，那個會優(yōu)先使用比推薦尺寸大烘跺，但最接近推薦尺寸的圖標(biāo)。
如果沒有比推薦尺寸大的圖標(biāo)脂崔，會優(yōu)先選擇最接近推薦尺寸的圖標(biāo)滤淳。
如些有多個圖標(biāo)符合推薦尺寸，會優(yōu)先選擇包含關(guān)鍵字precomposed的圖標(biāo)砌左。
如果未在區(qū)域指定用link標(biāo)簽指定圖標(biāo)脖咐，會自動搜索網(wǎng)站根目錄下有apple-touch-icon...或者 apple-touch-icon-precomposed…前綴的圖標(biāo)。 如設(shè)備推薦尺寸為57x57,優(yōu)先級如下：
apple-touch-icon-57×57-precomposed.png
apple-touch-icon-57×57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
在第三代 iPad 上有四種圖標(biāo)規(guī)格： 57x57, 72x72, 114x114, 144x144.
由于 retina 圖標(biāo)的尺寸是標(biāo)準(zhǔn)圖標(biāo)大小的2倍汇歹，因此實際上我們只需要只做2款圖標(biāo)即可：114 x 114 和 144 x 144 屁擅。 將retina 圖標(biāo)的大小設(shè)置成標(biāo)準(zhǔn)圖標(biāo)的尺寸，那么IOS就會根據(jù)情況自動進行縮放了产弹。
[html]view plaincopy
官方開發(fā)社區(qū)《iOS Human Interface Guidelines》地址http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.
