iPhone、iPad Safari 的 ICON 尺寸 與 主畫面連結增加方式

iPhone、iPad 可以將網站的 ICON 快速加入主畫面(桌面), 點選圖示就跟開 App 一樣, 只是會用 瀏覽器(Safari) 開啟而已.

但是要快速加入 主畫面, 網站有提供相對應的圖示(ICON)的話, 加入 主畫面 後才會比較好辨認(沒 ICON 的話, Safari 會做網站縮圖).

iPhone、iPad Safari 的 ICON 尺寸 與 主畫面連結增加方式

網路很多文章都有寫 ICON 需要的圖示, 但是尺寸似乎都不太一樣, 建議參考官方說明, 以官方的為主吧~

官方(2013年, iPhone4S、iPhone5、iPad...)目前的 ICON 尺寸需要此四種尺寸: 60x60, 76x76, 120x120, 152x152, 於 HTML META Tag 寫法如下述:

  • 下述取自此篇: Safari Web Content Guide: Configuring Web Applications

    <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
    The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.
  1. iPhone: 60x60
  2. iPad: 76x76
  3. iPhone Retina: 120x120
  4. iPad Retina: 152x152

將 網站 加入 iPhone、iPad 主畫面 連結顯示的方式

製作完成後, 可以馬上於 iPhone 的 Safari 測試看看加入的效果, 下述以 "飛比價格手機版" 為例(iOS7), 步驟如下:

  1. 用 Safari 開啟網頁, 於下方選單中間按鈕為"分享"按鈕, 點此"分享"按鈕.
  2. 點選 "加入主畫面"
  3. 設定預設加入的圖示和內容
  4. 完成, 主畫面(桌面)上就有 ICON 囉~

圖片步驟可見下圖:

將 網站 加入 iPhone、iPad 桌面連結顯示的方式
將 網站 加入 iPhone、iPad 桌面連結顯示的方式

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈iPhone、iPad Safari 的 ICON 尺寸 與 主畫面連結增加方式〉中有 4 則留言

  1. 請問"主畫面連結增加方式",可以寫成自動執行語法, 包在QRCode中嗎??

    掃一下QRCode, 主畫面就自動產生含連結網頁的icon....

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料