Custom WebSite icon on Home of Mobile

2010-06-03

昨天開會時候，Gipi問我，iPhone的瀏覽器可以像Google Chrome把網頁拉到桌面上當捷近，

不過icon好像都是snapshot目前瀏覽的畫面，有沒有辦法改變像一般iPhone上的icon，讓人比

較好操作，也可以直接連接到所要的站台。

我想了一下，想說要讓icon可以變換的方式，應該可以像在開發網頁程式的時候，開發人員會在

MasterPage中，加上一段指令：

   1: <head>   2:     <link rel="icon" href="images/favicon.ico" />   3: </head>

，讓瀏覽器上的網址列旁出現自訂的icon。如下：

這一篤清楚的說明了要加上那些特定的Tag，讓用戶可以把想要的網站加到自己的Home上，並且使用的是

網站本身自訂的icon，而不是snapshop下來的畫面。那麼話不多說，以下整理了一下支援iPhone與Android

的指令與顯示結果。

* for iPhone

   1: <head>   2:     <link rel="apple-touch-icon" href="images/Windows.png" />   3: </head>

關鍵值在於：apple-touch-icon。這是iPhone瀏覽器(Safari)幫你在Add on Home Screen時，可以辨識出來

的icon圖示。那麼，我們看一下結果。

* for Android

   1: <head>   2:     <link rel="apple-touch-icon-precomposed" href="http://www.siy6.cn/img/png-1429.png"/>   3: </head>

關鍵值在於：apple-touch-icon-precomposed。這樣便可以支援上述的效果，但是…經過我的測試結果，

在Android 1.6雖然可以把icon顯示在Home上，但效果不像iPhone是完整的一個icon，並且在Android 1.6

使用的icon卻是 <link rel="icon" href="" />中的圖示，這是比較奇怪的。但是在Android 2.1就完成如同iPhone

的效果了。如下二張圖示：

至於Windows Mobile跟Symbian，目前都還沒有看到相似的功能。希望之後會有。

稍微整理一下，當作記錄也分享給大家。

【備註】

*iPhone的圖示，可用45x45 pixel的圖示。

*Android的圖示，可用45x45 或 57x57的圖示。

References:

‧說明Android的設定

‧說明iPhone的設定

Pou's IT Life