Favicon issues

[The Raven]

I tried my best to implement favicon that will work as best as it can for phone browsers, pc browsers and different OS. So, here is it:

  <link rel="icon" type="image/png" href="/AlmarsImages/Website/faviconnew.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/AlmarsImages/Website/faviconnew.png">
  <link rel="manifest" href="manifest.json" />

My manifest:

{
    "icons": [
      { "src": "/AlmarsImages/Website/faviconnew.png", "type": "image/png", "sizes": "180x180" }
    ]
  }

Now, code works fine on PC versions. Google chrome is making an issue on the phone. Also, it seems that Safari doesn't stretch the favicon to it's full width and height but rather have some kind of transparent border.

And favicon not showing:

By the way, in case you think favicon is too small, it is not. It's actually 1300x1000