Customizing your iOS webapp icon- per user

I threw together a little mobile subway-themed webapp hack last weekend, called Subwalkway. I had to make a quick icon for it, and my immediate thought was to make it look like an NYC subway route sign. Luckily for me, the W line was decommissioned a few years ago, so it’s free for me to steal. But what colour to use? Or should I make some hideous beach ball of all of them? No- that’ll just remind me how slow my Macbook is these days. But I got to thinking- maybe I don’t need to choose. The icon is specified with a <link/> tag after all, why don’t I just randomise it? So I did:

Gotta catch 'em all!

The logic is very simple/stupid. On page load, I run a Math.random(), and use that number to choose one of the items in an array of file names. Set the <link rel=”apple-touch-icon-precomposed” />¬†field, and we’re done.

Obviously my example is a little pointless, but it serves as a proof of concept- iOS will respect whatever icon metadata changes you make after page load. So, there are some more reasonable applications out there- if I expanded the app to Boston, say, I could modify my app icon to better fit the Boston T style. Or if your app works in numerous countries/cities, you could make an Apple Maps-style icon- only with local landmarks.