Home 智慧手機與平板 如何自訂iPhone、iPad的Safari「加入主畫面」的圖示(icon)?

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

by 唐先生
Published: Updated:

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

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

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

iphone_safari_icon-01.jpg

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

iphone_safari_icon-02.jpg

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

修改圖示的解決辦法

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

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

看過這兩篇文章之後,我才發現加入主畫面的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」,並且上傳到網站的「根目錄」之下。

沒想到,居然有作用了…

iphone_safari_icon-03.jpg

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

也許您會喜歡

7 comments

雷夢 2022-10-31 - 08:35:47

真的可以唷,只要放在根目錄就能變成icon

Reply
cindy 2021-03-04 - 11:54:29

抱歉…弱弱的問一句 根目錄在哪?…

Reply
changyang319 2021-03-04 - 12:08:51

這邊說的「根目錄」是網站的根目錄,並不是手機的根目錄喔。

因此,如果想要有那個圖示,網站就必需要是自己的,這樣才有辦法上傳檔案到該網站的根目錄底下。

Reply
changyang319 2017-02-18 - 19:31:00

抱歉,沒有喔,因為我沒有用過繪圖板喔。

Reply
changyang319 2017-02-07 - 05:05:36

抱歉,因為我都自己開車,沒有在叫車,所以沒辦法寫這類的開箱文,Sorry。

Reply
Mushongㄟ練功窩 2017-01-27 - 13:06:42

請問有沒有關於"繪圖板"的文章? 謝謝

Reply
Chevantin 2017-01-13 - 12:17:55

哈囉 您好 如果有篇叫車APP改版 想請你寫開箱文
不知道您是否願意呢? 如果可以還麻煩提供電話 方便討論

Reply

Leave a Comment

這個網站使用cookies來改善您的瀏覽體驗。我們預設您同意此設定,但如果您不希望使用cookies,您有權選擇退出。 接受 詳細內容