iPhone 收藏網址[添加到書簽] 和 [添加到主屏幕] 顯示自定義圖標,而不是網頁截圖：

<!-- Safari瀏覽器[添加到書簽] -->

<link rel="shortcut icon" href="static/my/img/favicon.ico">

<!-- Safari瀏覽器[添加到主屏幕] -->

<link rel="apple-touch-icon" href="static/my/img/favicon.ico"/>

https://www.zhihu.com/question/19572446

在網站根目錄放一張命名為 apple-touch-icon.png 的 57 × 57 像素圖片即可達到基本目的。

如果需要更精確的控制：

1. 在網站 head 部分添加以下語句，其中 href 屬性值是圖片的路徑。

<link rel="apple-touch-icon" href="/custom_icon.png"/>

2. 為滿足不同分辨率設備的顯示效果，可以添加三個不同分辨率的圖片：57 × 57 像素用於前三代 iPhone 和 iPod touch ，72 × 72 像素用於 iPad ，114 × 114 像素用於采用 Retina display 的 iPhone 4 和 iPod touch 等後續產品。通過 sizes 屬性控制：

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

3. 還可以把 rel 屬性修改為“apple-touch-icon-precomposed”來避免 iOS 向你的圖標添加高光效果。

iPhone 收藏網址[添加到書簽] 和 [添加到主屏幕] 顯示自定義圖標,而不是網頁截圖