我之前有篇文章介紹過如何將網站固定到Windows的開始菜單，並可以自定義圖標、顏色以及Windows推送通知，其實Apple也有類似的功能，通過在網頁的head部分添加link標記，在Safari瀏覽器中我們可以輕易地將網站添加到iPhone的主屏幕，使它看起來就像一個普通的app一樣。
要實現該功能很簡單，只需要在你網站的根目錄下放一張名為"apple-touch-icon.png"的圖片即可，像添加favicon一樣（將名為"favicon.ico"的圖標放在網站的根目錄下，瀏覽器會自動加載並顯示網站的圖標）。
如果需要精確控制，添加下面的代碼：
1. 在網頁的head部分添加以下代碼，其中href屬性值為圖片的路徑。
<link rel="apple-touch-icon" href="/custom_icon.png"/>
2. 為滿足不同分辨率設備的顯示效果，可以添加三個不同分辨率的圖片：57 x 57像素用於前三代iPhone和iPod Touch，72 x 72像素用於iPad，114 x 114像素用於采用Retina display的iPhone4和iPod Touch等后續產品。通過sizes屬性控制：
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
3. 另外，通過將rel屬性的值修改成"apple-touch-icon-precomposed"來避免iOS將圖標添加高光效果。