如何正确设置iPhone的favicon？

Question

I have generated favicon on realfavicongenerator.net , but the favicon is not displayed in Safari on iPhone 6S. I have cleared history and website data, but it doesn't help. Here is my HTML code:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

<link rel="icon" type="image/x-icon" href='/favicon.ico' />
<link rel="shortcut icon" type="image/x-icon" href='/favicon.ico' />

As you see, I added rel="icon" and rel"shortcut icon" and also precomposed favicon, but nothing helps. I have looked on the Internet and couldn't find a solution. Is there anything else I can do?

Answer 1

Full disclosure: RealFaviconGenerator's author speaking.

First, you should run the favicon checker against your site, to spot errors such as invalid URLs.

If the test is positive, you can be confident that your touch icon is configured correctly. You probably have a caching issue, even if you have cleared your browser cache. As a workaround, you can try with another device or wait for a few hours and retry.