標籤：
以前我們用過favicon在瀏覽器給網站進行身份標識，用法如下：
[html] view plain copy現今行動裝置越來越多，蘋果為iOS裝置配備了apple-touch-icon私人屬性，添加該屬性，在iPhone,iPad,iTouch的safari瀏覽器上可以使用添加到主屏按鈕將網站添加到主畫面上，方便使用者以後訪問。實現方法是在HTML文檔的<head>標籤加入下面代碼即可。
[html] view plain copyapple-touch-icon 標籤支援sizes屬性，可以用來放置對應不同的裝置。
57×57（預設值）的表徵圖對應320×640的iphone老裝置，72×72對應ipad，114×114對應retina屏的iPhone及iTouch。ipad3對應144×144的高解析度。
這是官方開發社區的詳細介紹：
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
所以最完善的寫法應該是：
[html] view plain copy
雖然官方都用的png圖片做說明，但實際測試jpg格式也可用（不推薦），圖片無需做圓角和高光效果，同Native App一樣，系統會自動為表徵圖添加圓角及高光。如果不想系統對表徵圖添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon，這時我們提供的表徵圖就要自己做圓角和高亮效果了。
表徵圖搜尋的優先順序如下：
如果沒有跟相應裝置推薦尺寸一致的表徵圖，那個會優先使用比推薦尺寸大，但最接近推薦尺寸的表徵圖。
如果沒有比推薦尺寸大的表徵圖，會優先選擇最接近推薦尺寸的表徵圖。
如些有多個表徵圖符合推薦尺寸，會優先選擇包含關鍵字precomposed的表徵圖。
如果未在地區指定用link標籤指定表徵圖，會自動搜尋網站根目錄下有apple-touch-icon...或者 apple-touch-icon-precomposed…首碼的表徵圖。 如裝置推薦尺寸為57x57,優先順序如下：
apple-touch-icon-57×57-precomposed.png
apple-touch-icon-57×57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
在第三代 iPad 上有四種表徵圖規格： 57x57, 72x72, 114x114, 144x144.
由於 retina 表徵圖的尺寸是標準表徵圖大小的2倍，因此實際上我們只需要只做2款表徵圖即可：114 x 114 和 144 x 144 。 將retina 表徵圖的大小設定成標準表徵圖的尺寸，那麼IOS就會根據情況自動進行縮放了。
官方開發社區《iOS Human Interface Guidelines》地址http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
關於Apple裝置私人的apple-touch-icon屬性詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
