Recently I made the web page for The Drop Shadow Talks. Because the page is quite optimized for mobile viewing, I added an iPhone icon as well. I was startled seeing a shiny gloss effect overlaying my nice minimalistic Helvetica design!
Of course, the Drop Shadow Talks should not have an icon showing a gloss effect. (I like the idea of “The Gloss Talks” though, but it just does not sound so nice.)
I thought creating icons without gloss is only possible for applications and not for web pages. I found out that it is very easy. Simply add “precomposed” to the attribute “rel” in the “link” tag, no gloss is applied and you are free to do with the icon whatever you want:
<link rel="apple-touch-icon-precomposed" href="iphone-icon-precomposed.png" />
So I then created an icon with a drop shadow only.