简体   繁体   中英

How to properly set favicon for iPhone?

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?

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM