Apple Touch icon for websites

Question

Up to now, I\'ve been including the line for the Apple Touch icon in my head like this:

Answer 1

Minimalist solution - Recommended

A common practice is to create a single 180x180 icon, which is the highest expected resolution, and let the iOS devices scale it down as needed. It is declared with:

Exhaustive solution - Not recommended

Apple specs specify new sizes for iOS7:

• 60x60
• 76x76
• 120x120
• 152x152

And also for iOS8:

• 180x180

In addition, precomposed icons are deprecated.

As a consequence, to support both new devices (running iOS7) and older (iOS6 and prior), the generic code is:

In addition, you should create a 180x180 picture named apple-touch-icon.png.

Note that iOS looks for URL like /apple-touch-icon-76x76.png, if it does not find interesting stuff in the HTML code (a bit like what IE is doing with /favicon.ico). So it is important to keep the file names are they are above. It is also important to consider that Android/Chrome is also using these pictures.

You might want to know that this favicon generator can create all these pictures at once. Full disclosure: I'm the author of this site.