在手機瀏覽器上打開某個網站的時候，菜單中有這么一個選項"添加到主屏幕"，當然不同的手機改菜單選項的名字有所不同基本上叫"添加到桌面"、"添加到桌面導航" 之類的， 請自行理解其中意思。
這樣，主屏幕(桌面)上就會有一個該網站的快捷鍵圖標， 點擊該圖標，就會直接打開網站，類似於APP。
添加到主屏幕的默認圖標會根據你的網站自動生成，因而不同平台下（iOS、Android、WindowsMobile）會有所不同，我們能否統一設置主屏幕圖標呢？ 答案是肯定的。
圖標的格式建議選擇png
設置主屏幕圖標
在<head>中添加如下代碼 改代碼，在ios和安卓下都可以支持該設置。 測試時，ios平台下使用的是Safar瀏覽器， Android下使用的是Chrome瀏覽器。
<!--ios和Android都支持--> <link rel="apple-touch-icon-precomposed" href="/path/to/icon72x72@2x.png"> <!--僅Android支持--> <link rel="icon" href="/path/to/icon72x72@2x.png">
設置WebApp模式
從主屏圖標進入網站會隱藏地址欄和狀態欄, 全屏(content="yes")
<!--ios和Android都支持--> <meta name="apple-mobile-web-app-capable" content="yes"> <!--僅Android支持--> <meta name="mobile-web-app-capable" content="yes">
WindowsMobile中的設置
windows手機中也有類似於添加到主屏幕的功能，稱之為“磁貼”
<!-- win 8 磁貼圖標 --> <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> <!-- win 8 磁貼顏色 --> <meta name="msapplication-TileColor" content="#3372DF">
IOS中相關設置
<!-- 系統頂欄的顏色(content = black、white 和 black-translucent)選其一就可以 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 指定標題 --> <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
以上兩項可以設置app的名字和頂欄的顏色 有黑色、白色、半透明黑色，經測試只有ios下支持。
總結
綜上所述，考慮到兼容性，我們可以這么來寫
<!-- 安卓平台 chrome --> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"> <!-- ios平台 safari --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="佩佩的博客"/> <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> <!-- win8以上 平台 磁貼 --> <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"> <meta name="msapplication-TileColor" content="#0e90d2">
轉載自
http://www.unclealan.cn/index.php/front/73.html
另外還有個單獨參考的IOS
自定義iphone頁面添加到主屏幕圖標
<link rel="apple-touch-icon" sizes="57x57" href="icons/buck-57.png" /> <link rel="apple-touch-icon" sizes="60x60" href="icons/buck-60.png" /> <link rel="apple-touch-icon" sizes="72x72" href="icons/buck-72.png" /> <link rel="apple-touch-icon" sizes="76x76" href="icons/buck-76.png" /> <link rel="apple-touch-icon" sizes="120x120" href="icons/buck-120.png" /> <link rel="apple-touch-icon" sizes="144x144" href="icons/buck-144.png" /> <link rel="apple-touch-icon" sizes="152x152" href="icons/buck-152.png" />
轉載自
https://blog.csdn.net/huileiforever/article/details/46638227