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弄不成功,說不定是圖片沒放在「根目錄」的關係,如果有朋友有試過的話,可以把結果留言一下,非常感謝,因為我目前也沒有打算要試了…
7 comments
真的可以唷,只要放在根目錄就能變成icon
抱歉…弱弱的問一句 根目錄在哪?…
這邊說的「根目錄」是網站的根目錄,並不是手機的根目錄喔。
因此,如果想要有那個圖示,網站就必需要是自己的,這樣才有辦法上傳檔案到該網站的根目錄底下。
抱歉,沒有喔,因為我沒有用過繪圖板喔。
抱歉,因為我都自己開車,沒有在叫車,所以沒辦法寫這類的開箱文,Sorry。
請問有沒有關於"繪圖板"的文章? 謝謝
哈囉 您好 如果有篇叫車APP改版 想請你寫開箱文
不知道您是否願意呢? 如果可以還麻煩提供電話 方便討論