【 Code 分享 】網頁 建立 iPhone 加入主畫面 Icon 方法

　　

       想讓自己的網頁讓使用者下載在手機端快速觀看時，常常會遇到 Icon 是直接顯示網頁縮圖的困擾，我今天研究了一下，看到一個非常有趣的方法，能讓你的網頁假裝成一般App的Icon放在手機及平板中，我使用Blogger測試了一下，效果相當好。

以下是建立方法：

１. 首先要準備四張不同畫素的png圖檔：144×144、114×114、72×72、57×57。

２. 在裡設定以下代碼(更改href屬性確定有指到您所設定的圖檔)：

       Blogger只要跟著以下步驟，代碼貼上並指定正確的圖檔(紅字部份)即可

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlTCMbWjL8wF_ERM44EHZEfmMxjNo_MUbNs3yCswwZMky1ezs5PZpKVUsMx4chngG3W7v3Mq-VszKgG2K9i8JKoa73wUHrEKpudhNWV3ufCg7kwEx8bDILomDJB25WvnfI_j8hVfaORM/s1600/144.png' rel='apple-touch-icon-p recomposed' sizes='144x144'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2sRzqxCDkQ46wRAgzMcUNeLJr9ue71S4ksj0LsWLzyqhF-6-Wf-hO5mWjtONdcRL8_UAP8sQ0l82B3qNtkbrB4VXvmTQzmqDEPKV9SmaDjIpCQCy1P6adh0ejCyc8bQsWBdzet_Isic/s1600/114.png' rel='apple-touch-icon-precomposed' sizes='114x114'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia4hFyvcIsC0C1rrm1UZOVcojCV2zSAmUcdUkPP2x08PZE-6QVDdW-xT-oUxq6QvphKWPQSiRHXEwy8Hu-0i5MsE3cEhex9P5dKDRnklnjXHBXL29pjV7Kw6EEetxqb7oXkx6fn7srZbw/s1600/72.png' rel='apple-touch-icon-precomposed' sizes='72x72'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-OcyOnvpYnKd0T-S0GK_TxFqmKOJBFCx9T9OYh4nheisMh_v3chrAebkvSGFD1m7pbZ-KLHT0_BZ65l7hcR_ndiL8ByeOnn_H74l_TOHdP7KaneSi5cVjw-kol0-TPt7cDnyTd1T0kY/s1600/57.png' rel='apple-touch-icon-precomposed'/>

３.完成效果圖：

P.S. 不同的網頁圖檔大小及方法可能略有異動，不過基本上都大同小異。

快來製作自己喜歡的 HTML 手機版 Icon 吧^_^

．參考網頁： carlos411 - iPhone及iPad的加入主畫面