Favicon code

favicon.html

<!-- Favicons and touch icons -->
<!-- For retina-display iPads -->
<link href="/assets/images/apple-touch-icon-xlarge.png" rel="apple-touch-icon-precomposed" sizes="144x144" type="image/png"/>
<!-- For retina-display iPhones -->
<link href="/assets/images/apple-touch-icon-large.png" rel="apple-touch-icon-precomposed" sizes="114x114" type="image/png"/>
<!-- For iPad 1 -->
<link href="/assets/images/apple-touch-icon-medium.png" rel="apple-touch-icon-precomposed" sizes="72x72" type="image/png"/>
<!-- For iPhone 3G, iPod Touch and Android -->
<link href="/assets/images/apple-touch-icon-small.png" rel="apple-touch-icon-precomposed" type="image/png"/>
<!-- For Nokia -->
<link href="/assets/images/apple-touch-icon-small.png" rel="shortcut icon"/>
<!-- For everything else -->
<link href="/assets/images/favicon.png" rel="shortcut icon" type="image/png"/>
<link href="/assets/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>

Under iOS Dev Center > iOS Developer Library > Topics > User Experience > iOS Human Interface Guidelines > Custom Icon and Image Creation Guidelines four sizes are mentioned: 57x57, 72x72,114x114 and 144x144. If I want to link the 144x144 file in the head as you have, what file name do I use?

I can of course change the size attribute to 144 x144 but I can't have two "apple-touch-icon-large.png" files. My work around has been to place all the files in the root directory, unlinked using the apple-touch-icon... or apple-touch-icon-precomposed... prefix according to Safari Dev Center > Safari Developer Librarey > Topic > User Experience > Safari Web Content Guide. Or I can link as you have and only place the 144x144 file in the root directory with the correct prefix. Thanks!

I wonder if using the rel attribute in thew link tag allows you to use your own file name? The Safari Web Content Guide uses:

link rel="apple-touch-icon" href="touch-icon-iphone.png"
link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png"
link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png"

Open and close tags.

Thanks!

You beat me to the punch; I was going to direct you to the same article. As I understand it, the filename only matters if you don't have a link tag in the head specifying the path to the image. Back in the days of the iPhone 2G, if you didn't have any filename specified in your markup, but had a file in the root of your site called apple-touch-icon.png, MobileSafari would find it and use it as the icon when adding your site to the home screen. This is much like how older browsers would find favicons—if you had a file called favicon.ico in the root of your site, it would automatically be detected and served.

So as long as you specify rel="apple-touch-icon-precomposed"—the "precomposed" bit tells Apple not to add any effects to the image when it's on the home screen, so if you want to get that glass overlay, just use apple-touch-icon—and sizes="144x144" in your link tag, you should theoretically be able to use any filename you like.

If you're basing your code off my gist and want to use a consistent nomenclature, I'd probably use something like apple-touch-icon-xlarge.png, but practically speaking, I think the name is irrelevant when these other pieces of information are specified. Hope this helps!