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

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?"

Asked by: Guest | Views: 334

Total answers/comments: 5

Comments display order:

Guest [Entry]

"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)"

Guest [Entry]

"From the Google cache of Apple Developer Connection - Web Apps Dev Center - Designing Content...

Create a Web Clip Bookmark Icon

iPhone and iPod touch allow a user to
save a Web Clip bookmark to your site
on their Home Screen.

To specify a bookmark icon for all
pages of a web site, place a PNG image
named ""apple-touch-icon.png"" at the
root directory of your web server -
similar to the ""favicon.ico"" for site
icons.

To override the site bookmark icon on
a specific web page, insert a <link>
element similar to <link
rel=""apple-touch-icon""
href=""/customIcon.png""/> within the
<head> element of the page.

The bookmark icon dimensions should be 57x57 pixels. If the icon is a
different size it will be scaled and
cropped to fit.

Safari will automatically composite
the icon with the standard ""glassy""
overlay so it looks like a built-in
iPhone or iPod application."

Guest [Entry]

"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"

Guest [Entry]

I can not cite a source for those sizes because the official reference is under lock and key of ADC.

Guest [Entry]

"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."