• iPhone icon without the “Gloss Effect”

  Date: Jun 25, 2010  |  Categories: Apple  |  Written By: Mike Ballan  

So I’m sure by now your all using the code below just after your favicon code in your header, but did you know that you can turn off the “Gloss Effect” that your iPhone creates when saving a website to its home screen..?

Now the normal code to have a custom icon would be:

<link rel="apple-touch-icon" href="/iphone_icon.png"/>

But if you look at the WTFDWK icon in the image below you can see that compared to the Amazium icon it doesnt have a gloss effect on it.

And what do you need to do to get rid of the gloss well thats easy as all you need to do is change the rel id to include the word precomposed and now you can have gloss free icons on your iPhone which in my book looks much better..!

<link rel="apple-touch-icon-precomposed"  href="/iphone_icon.png"/>

Easy or what.