在手機上如何建立網址到手機桌面中並且使用圖示
Temperature: 0 °C
上回做專案時，客戶說了手機桌面上的網站捷徑太醜，想要美化。
這回索性也幫Innstory美化一下，順便寫下美化的方式。
首先，我們都知道，當使用手機開啟網站時，右上角會出現直立的(...)按鈕，如上方左邊圖示。
點擊後則會出現一個隱藏選單，其中有一個選項叫做(加到主畫面)，如上面右邊圖示。
這時只要點選後，便可將網站連結建立捷徑於手機桌面上。
只是，尚未指定圖示的情況，手機桌面上都會出現手機自訂的icon，例如Innstory的圖示就會出現藍色底一個字母Ｉ的字樣。
但要怎麼做，才能建立像手機上的APP一樣特色又專業的圖示?
首先，並須先準備好三張圖，分別是57×57px、72×72px、114×114px。
檔名的部分可以自行命名或依據APP切圖的檔案命名格式，就是「圖片類型_分類_用途_狀態.png」這種方式命名。
如下圖~
接著，請服用以下語法，並包在head之間。
<link rel="apple-touch-icon" href="images/icon-innstory-web.png">
<link rel="apple-touch-icon" sizes="72×72" href="images/icon-innstory-web-72.png">
<link rel="apple-touch-icon" sizes="114×114" href="images/icon-innstory-web-@2.png">完成之後，再把網址加到桌面時，就會變成剛所設定的圖示，如下圖。
左方圖是服用前，右方圖為服用後。
另外，有時瀏覽器的暫存檔清不掉時會無法顯示剛剛設計好的圖示。
這時可以使用無痕視窗瀏覽。
又或者將引入的圖示後方加上參數。
例如~
images/icon-innstory-web.png?2018037
以上紀錄。
台北市內湖區江南街71巷75弄 Go
https://innstory.com/story-在手機上如何建立網址到手機桌面中並且使用圖示-1514
