在iOS上的網站快捷方式圖標

Question

我注意到網站圖標有透明背景，當在iOS上創建快捷方式時，圖標變成快捷圖像，背景變黑。所以如果favicon是透明背景上的黑色標誌，它看起來有點奇怪。

有誰知道這種情況發生的原因？

感謝

Answer 1

這是一個known behavior of iOS。雖然這沒有記錄在任何地方，但這可能會強制執行iOS UI準則，其中所有主屏幕圖標都是帶圓角的正方形。

哦，你不是唯一一個試圖在iOS上使用透明度的人。檢查StackOverflow's Touch icon並將其添加到您的主屏幕！

注：我是上述文章的作者。

Answer 2

的iOS不允許主屏幕上的圖標有透明背景

Answer 3

主屏幕圖標不支持透明度。你爲什麼使用favicon？您應該在head標籤中使用以下內容。

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">  
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> 

如答案描述：https://stackoverflow.com/a/21144916/468724