How to keep mobile Safari from adding gloss to home screen bookmark icons

glossy default vs. precomposed iphone home screen icons

  • If you ARE specifying the URL of the home screen icon in your HTML,
    change: <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    to: <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
    Note that you don’t need to update or touch the image.
  • If you’re NOT specifying the icon’s URL in your HTML, then rename the apple-touch-icon.png image file to apple-touch-icon-precomposed.png.

There won’t be many “how to” posts on UX Hero, but this technique is not well known and searches for it don’t yield good results unless you already know to look for “apple-touch-icon-precomposed.png”.

I’m also a favicon fetishist because favicons are how users find you in a sea of browser tabs and bookmarks.

  • I totally agree with you. In fact I think it's an issue not really discussed. How to make nice "accessible" favicons no to drown the user on the sea of tabs, history tabs, and so so of modern browsers...
  • dan
    thanks for the tip, man!
blog comments powered by Disqus