Create-react-app苹果触摸图标不工作

Question

我正在尝试添加一个苹果触摸图标

我尝试了几种方法，但似乎都不起作用。当我将网站添加到我的收藏夹时，我只看到一个默认的触摸图标，而不是im指定的图标。

//index.html

 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />    
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

//manifest.json

{
  "short_name": "ICAD",
  "name": "ICAD | Vinyl Banners, Graphics, Vehicle Wraps | Boston MA",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "apple-touch-icon.png",
      "type": "image/png" 
    }
  ],
  "start_url": ".",
  "display": "standalone"
}

当我将网站保存为safari浏览器上的收藏时，我希望看到此图标

Answer 1

我试着发表评论，但我做不到，所以我写了这篇文章作为回复。

我将它与大小值一起使用。

​

<link href="img/favicon.144x144.png" rel="apple-touch-icon" type="image/png" sizes="144x144">

​

{
    "src": "apple-touch-icon.png",
    "size" : "144x144",
    "type": "image/png" 
}

Answer 2

使用头盔

      <Helmet>
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="%PUBLIC_URL%/apple-touch-icon.png"
        />
      </Helmet>

Answer 3

我的问题是我在我的本地开发环境中使用了一个无效的证书，Safari不会从一个带有无效证书的网站下载"apple-touch-icon“。