怎麼樣讓網站在 iPhone「添加到主屏幕」時顯示自定義圖標，而不是網頁截圖？

12-25

參見官方文檔：
Specifying a Webpage Icon for Web Clip
http://bit.ly/9bzLYZ

簡單地說，你需要像添加 favicon 一樣在根目錄提供用於 iOS 的圖片 apple-touch-icon.png（或者在 & 中利用 & 標籤來精確控制）。
根據不同的設備，有三種尺寸可選（57 px 見方用於原來的 iPhone 和 iPod touch，72 px 見方用於 iPad，而 114 px 見方用於擁有 Retina display 的 iPhone 和 iPod touch）。

如果直接在根目錄提供了文件，在文件名中附加「-precomposed」來避免 iOS 向你的圖標添加高光效果，如 apple-touch-icon-precomposed.png。
如果使用了 & 標籤來進行精確控制，則將 rel 屬性值改為 apple-touch-icon-precomposed。

建議親自閱讀官方文檔。這段文檔並不長，也不複雜。

把名為 apple-touch-icon.png 的 PNG 圖片傳到根目錄

就像favicon一樣把名字命名為apple-touch-icon.png 放在該目錄下，那麼該目錄下所有網頁的圖標都是這個了,注意你的文件不要添加高光效果，系統會自己給你加上。圖片文件大小是57x57

圖標添加到主屏幕上後，下面的文字說明如何自定義

在頁面head中加入如下語句
meta name="apple-mobile-web-app-capable" content="yes"
link rel="apple-touch-icon" href="icon_file_src"
用間括弧括起
圖標像素大小如梁海所說即可

上網搜索一下apple的圖標像素標準，做好圖標以後按照上面說的命名方式放到網站根目錄！就可以了！