Create-react-app apple touch icon not working

Im trying to add an apple touch icon

ive tried several things and nothing seems to work. when I add the website to my favorites I only see a default touch icon not the one im specifyin.

//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"
}

im expecting to see this icon when i save the website as a favorite on my safari browser

1 answer

  • answered 2019-05-15 11:59 Murat Umutlu

    I tried to post comment but I couldn't. So I'm writing this as an answer.

    I use it with size values.

    <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" 
    }