當把連接保存到手機桌面。設置圖標 只在safari瀏覽器中有用

<link rel="apple-touch-icon" sizes="114x114" href="images/logo.png" />

這個屬性是當用戶把鏈接保存到手機桌面時使用的圖標，若是不設置，則會用網頁的截圖。有了這，就能夠讓你的網頁像APP同樣存在手機裏了

在iPhone,iPad,iTouch的safari上能夠使用添加到主屏按鈕將網站添加到主屏幕上。

apple-touch-icon是IOS設備的私有標籤，若是設置了相應apple-touch-icon標籤，則添加到主屏上的圖標會使用指定的圖片。

區域加入下面代碼便可。 

apple-touch-icon 標籤支持sizes屬性，能夠用來放置對應不一樣的設備。

分別放置57×57（默認值）的圖標對應320×640的老設備，72×72對應ipad，114×114對應retina屏的iPhone及iTouch

 

圖片無需作圓角處理，同Native App同樣，系統會自動爲圖標添加圓角及高光。若是不想系統對圖標添加效果，能夠用apple-touch-icon-precomposed代替apple-touch-icon。

圖標搜索的優先級以下：

• 若是沒有跟相應設備推薦尺寸一致的圖標，那個會優先使用比推薦尺寸大，但最接近推薦尺寸的圖標。

• 若是沒有比推薦尺寸大的圖標，會優先選擇最接近推薦尺寸的圖標。

• 如些有多個圖標符合推薦尺寸，會優先選擇包含關鍵字precomposed的圖標。

若是未在區域指定用link標籤指定圖標，會自動搜索網站根目錄下有apple-touch-icon...或者 apple-touch-icon-precomposed…前綴的圖標。 如設備推薦尺寸爲57x57,優先級以下：

1. apple-touch-icon-57×57-precomposed.png

2. apple-touch-icon-57×57.png

3. apple-touch-icon-precomposed.png

4. apple-touch-icon.png

 

各尺寸自適應代碼：

默認：57x57，iPad：72x72，iPhone 4,Retina屏：114x114（原尺寸的2倍）

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />