What are the correct pixel dimensions for an apple-touch-icon?

I'm not sure what the correct size should be.

Many sites seem to repeat that the apple-touch-icon should be 57x57 pixels but cite a broken link as their source.

Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.

Apple's own apple.com icon is 129x129!

See my related question: How do I give my web sites an icon for iPhone?

Solution 1:

It seems that Apple guidelines as of August 3, 2010 now include the "High resolution" images (for iPhone 4) in their "required" icon sizes.

Looks like we need to provide both a 57x57 and a 114x114 image now, as well as a 640x960 title image.

See Custom Icon and Image Creation Guidelines (Javascript required) which is part of a whole document:

• iOS Human Interface Guidelines (2013; by Apple Inc; PDF; 26,3 MB)

Solution 2:

Depends on how much detail you want it to have, it needs to have the aspect ratio of 1:1 (basically - it needs to be square)

I would go with the Apple's own 129*129

Solution 3:

Apple specs specify new sizes for iOS7:

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

Whereas old sizes for iOS6 and prior are:

• 57x57
• 72x72
• 114x114
• 144x144

By the way, precomposed icons are deprecated.

As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), these 8 pictures must be present and the generic code is:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

In addition, you should create a 152x152 picture named apple-touch-icon.png.

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