Safari iOS Favorite/Bookmark icon not updating apple-touch-icon.png

Question

So based on my searches this has been a long-standing bug on iOS/Apple’s end. As of yet I haven’t been able to confirm a workaround so would like to see if I’m up to speed on this.

I incorporated a new favicon on my site with the help of realfavicongenerator, and it’s showing up everywhere except Safari iOS where a faulty cache seems to force the old image to show when the site is favorited or bookmarked. Adding to homescreen works fine, MacOS favoriting/bookmarking works fine, Safari iOS doesn’t.

I remember having a similar issue when incorporating the first apple-touch-icon a few years ago, also using realfavicongenerator: when favoriting/bookmarking in Safari iOS the icon was empty instead of showing the image. Eventually it showed up but I don’t recall how or exacty when, but it definitely took a lot longer than it should have.

I’ve obviously tried clearing cache and website data/history through Safari settings, restarting my phone, appending a variable to the apple-touch-icon URL, using both absolute and relative paths, and tinkering with different image size specifications, none of which worked.

I saw a suggestion somewhere that resetting the phone may work, but my question in that scenario is what exactly to reset and whether this would compromise other data.

Are there any workarounds/fixes I’m not aware of?

I’m using an iPhone 7 with iOS 12.2. The code being used is straight from what realfavicongenerator provides.

Answer 1

RealFaviconGenerator's author speaking.

As you noticed, iOS Safari is quite lazy regarding favicon reloading. It is not the only one.

The trick is to force it to reload the icon by providing a URL it never encountered before. A simple way of doing this is to suffix the existing icon URL with a dummy parameter. For example, change /the_icon.png to /the_icon.png?v=2.

To do so with RealFaviconGenerator, generate your icons again. This time, make sure to open the Version/Refresh tab in the Favicon Generator Options panel, and select the second option, as below:

Note: You might want to edit manually the code already created by RealFaviconGenerator and append the version yourself. This might be a bad idea. For example, if you put your icons in your root folder, some HTML lines were not generated (because of conventions RFG is taking advantage of). But suddenly, these lines must be added to specify a version. This is definitely not something you can guess at first sight.