I've been testing the use of favicons for a mobile webapp. I think I've run into a cache refreshing problem on Android.
I have two favicon images for testing, big.png (114x114) and small.png (32x32). If I make a test page:
<html>
<head>
<link rel="apple-touch-icon" href="./small.png" />
</head>
<body>
Test icon page
</body>
</html>
I can now use the "Add bookmark to home screen" feature and a shortcut to the website is created on the home screen. However, if I change the image to big.png and try to add it to the home screen, small.png is used even though there is no reference to it on the page!
The reason I think it is a cache problem is that 1) rebooting my device seems to correct the problem and 2) I went home and when I came back the next morning, the correct icon was used. However, explicitly clearing the cache on my device does not refresh the icon, leading me to think that icons are not kept there, but in some other cache.
Is there a way to force the icon to update, whether through cache headers or a device operation?
I can't test it myself currently but I would assume that the answers of the following question solves your issue.
How do I force a favicon refresh
So just write it as this:
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />