iOS Mobile web app add to home screen icon

iOS開發WebApp是常見的事，尤其iOS內建的Safari有個特殊功能是"Add to Home Screen"，加入後的icon其實就跟常見的App沒兩樣，可以參考下圖說明：

1.打開Safari，會發現下方的按鈕列正中將有個Export的icon


2.按下去後會談出一堆按鈕，其中由上數下來第三個即為"Add to Home Screen"


3.點擊後會讓你輸入名稱，也就是之後的App名稱


4.加入完成，在畫面中就會多出個App icon，點下去後就是直接開啟這頁面的快速鍵。



當然到這裡有人會想問幹嘛不寫個App就好了，幹嘛這麼麻煩？Web App與Native app的優缺點在這就不作說明，隨便Google一下應該就會有很多大師給您開示，會想用這的一大原因是iOS的Safari有Nitro加速，比起Native的WebView快上很多很多，也是facebook一直被幹焦效能不好的原因，其實用Mobile Web版本的Facebook速度整個快超多的，就是因為Nitro，不過本篇重點是該如何設定icon，這邊就趕快進入主題。


你的html的head加入以下這一段再記得把icon放到路徑中，在加入時就會出現，但是會有光澤反射

<link rel="apple-touch-icon" sizes="57x57" href="ICONNAME.png">

拿掉光澤反射方法如下在"rel"改為apple-touch-icon-precomposed

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="ICONNAME.png" />

sizes就是使用ios預設尺寸，記得依照不同Device作設置

iPhone = 57x57(pixels)
iPhone Retina = 114x114(pixels)
iPad = 72x72(pixels)
iPad Retina = 144x144(pixels)

只要都放對就會有漂亮的icon出現啦，再依照需求看是否需要反光的光澤。