iPhone、iPad的Safari「加入主畫面」圖示(icon)
這幾天有人問我了這個問題，就是在iPad裡，將網站放到桌面上時的圖示，有沒有辦法改？
老實說，我從來沒將網址放在桌面上的習慣，可能是因為我都是用Google Chrome的關係，很少在用iPhone裡的Safari瀏覽器，所以也沒什麼機會去用「加入主畫面」這個功能。
實際去把我的「電癮院」網站加入主畫面中，可以看到預設是以網站的截圖為其圖示(icon)，如下圖：
所以這問題，我就被問倒了，因此就把這個需求，當成家庭作業，好好來研究一下。
修改圖示的解決辦法
經過研究，原則上，除非你有JB，要不然這圖示是沒有辦法修改的，而AppStore裡雖然有像「LINE DECO」這類可以改APP圖示的軟體，但也只限於「APP」，對於我們加上去主畫面的「網站」圖示，還是沒辦法修改。
後來找到這兩篇文章，如下：
- iPhone、iPad Safari 的 ICON 尺寸 與 主畫面連結增加方式(Tsung’s Blog)
- iPhone及iPad的加入主畫面，及瀏覽器的shortcut icon(Carlos-Studio)
看過這兩篇文章之後，我才發現加入主畫面的icon，是可以由網站擁有人來自訂的，並非只能用「網站截圖」而已。
所以我先開了一個新的Blogger部落格，然後依樣畫葫蘆，把製作好的圖片，上傳到Blogger上面，製作在head裡，放入指定的html程式碼，結果，好像沒什麼用…
後來試到有點累，就放棄再嘗試了。
休息完的隔天，我又想要再來試看看了，不過這次我改搜尋國外的網站，後來找到「stackoverflow」的這個問題，裡面有解答如下：
I guess apple devices make those requests if the device owner adds the site to it. This is the equivalent of the favicon. To resolve, add 2 100×100 png files, save it as apple-touch-icon-precomposed.png and apple-touch-icon.png and upload it to the root directory of the server. After that, the error should be gone.
因此，我就照著要求，製作了兩張相同尺寸100×100的圖示，分別命名為「apple-touch-icon-precomposed.png」及「apple-touch-icon.png」，並且上傳到網站的「根目錄」之下。
沒想到，居然有作用了…
原來根本也不用修改HTML，只要擺兩張圖片到根目錄就好了，此外，我在猜，之前在Blogger弄不成功，說不定是圖片沒放在「根目錄」的關係，如果有朋友有試過的話，可以把結果留言一下，非常感謝，因為我目前也沒有打算要試了…