如何自訂iPhone、iPad的Safari「加入主畫面」的圖示(icon)?

iPhone、iPad的Safari「加入主畫面」圖示(icon)

這幾天有人問我了這個問題,就是在iPad裡,將網站放到桌面上時的圖示,有沒有辦法改?

老實說,我從來沒將網址放在桌面上的習慣,可能是因為我都是用Google Chrome的關係,很少在用iPhone裡的Safari瀏覽器,所以也沒什麼機會去用「加入主畫面」這個功能。

5605-01

實際去把我的「電癮院」網站加入主畫面中,可以看到預設是以網站的截圖為其圖示(icon),如下圖:

5605-02

所以這問題,我就被問倒了,因此就把這個需求,當成家庭作業,好好來研究一下。

修改圖示的解決辦法

經過研究,原則上,除非你有JB,要不然這圖示是沒有辦法修改的,而AppStore裡雖然有像「LINE DECO」這類可以改APP圖示的軟體,但也只限於「APP」,對於我們加上去主畫面的「網站」圖示,還是沒辦法修改。

後來找到這兩篇文章,如下:

看過這兩篇文章之後,我才發現加入主畫面的icon,是可以由網站擁有人來自訂的,並非只能用「網站截圖」而已。

Advertisement

所以我先開了一個新的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」,並且上傳到網站的「根目錄」之下。

沒想到,居然有作用了…

5605-03

原來根本也不用修改HTML,只要擺兩張圖片到根目錄就好了,此外,我在猜,之前在Blogger弄不成功,說不定是圖片沒放在「根目錄」的關係,如果有朋友有試過的話,可以把結果留言一下,非常感謝,因為我目前也沒有打算要試了…

發表迴響

以經常會遇到的問題及「初學者」的角度,來看待「電腦教學」這回事。