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 囉~

圖片步驟可見下圖:

相關網頁

• Safari on iOS 7 and HTML5: problems, changes and new APIs
• Safari Web Content Guide: Configuring the Viewport
• Safari Web Content Guide: Developing Web Content for Safari