I have encountered a weird thing (bug?) on Android Stock Browser and Mobile Chrome, both installed on Android ICS 4.0.3/4 (I’ve tested both). From reliable sources I have heard the same issue appears on Android 2.3.
What I want to achieve:
I recently added the apple-touch-icon-precomposed icon link, which can be used to make my mobile website look like an app if saved to the Home screen. I also added a bookmark bubble to inform users that they can now save my mobile website as an “app”. Of course, I don’t want to show the bubble to anyone who opened up my website from their app-like bookmark on their Home screen, so I add a special hash on load for anyone who doesn’t already have the hash. That way, when they save my website, they’ll save it with the hash and thus I can check whether they opened up my website through the normal link my.website.com/ or through their bookmark my.website.com/#specialhash. I simplified this whole process by using an awesome library for it: https://github.com/okamototk/jqm-mobile-bookmark-bubble
The issue:
However, on Android, whenever I through JS change the hash, the browser/the OS won’t recognize the apple-touch-icon-precomposed icon links and only save the regular favicon.ico (which looks horrible and not at all like an app).
Is their anything I can do?
PS. In Mobile Chrome the proper apple-touch-icon-precomposed gets saved into the bookmark library, but not whenever I try to save it to the Home screen.
This is an issue with Mobile Chrome. See this bug. Experimenting, it appears that using
apple-touch-iconsaves it in the bookmarks library and renders it as a small icon on a page when added to the homescreen, but usingapple-touch-icon-precomposeddoesn’t render it on the homescreen at all – I get a globe on a page icon. There’s not really anything you can do right now, except to add the bookmark through the stock browser, and use the stock bookmark widget to add it to the homescreen. The Chrome bookmark and widget is broken for these icons.