分類
手機大未來

iphone safari的書籤icon如何設定?

iphone上的 safari 瀏覽器一直有著很不錯的使用者經驗的手機瀏覽器.

而且可以很方便的把常用的網站 bookmark 到桌面上, 但是那個 icon 若是沒有經過設定的話, 將會是一個小的預覽縮圖放在桌面上(應該說主畫面上).

那如何設定這個 icon 呢? 可以參考這篇資料: http://vjarmy.com/archives/2008/01/howto_iphone_webclip_icons.php , 其實就是建立一個 57*57 的 PNG 圖, 並且檔名命名為 apple-touch-icon.png 放在 web 目錄的根目錄下即可. 這個 57*57 的 PNG 圖就會是”加入主畫面螢幕”上的那個 icon 了.

若不方便放這個檔案到 web server 的網站根目錄, 也可以使用 meta tag 來指定, 如下:

<head>  
    ...  
    <link rel="apple-touch-icon" href="/images/my.png"/>  
    ...  
</head>

這樣的效果也是一樣的. 在 apple.com 開發者網站上也有詳細的說明:

[補充說明 2010/1/6 11:15]
在上面的關於 apple-touch-icon.png 這個檔名, 若是命名為 apple-touch-icon-precomposed.png 的話, 則加入主畫面螢幕時, 不會再對該圖做任何特效處理, 已知的特效應該是一個 3d 效果的圓弧及加上 4個角的圓角. 可以參考這篇上面有圖做比較: http://uxhero.com/how-to/how-to-keep-mobile-safari-from-adding-gloss-to-home-screen-bookmark-icons/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *