<!-- 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"/> |
This comment has been minimized.
This comment has been minimized.
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 So as long as you specify If you're basing your code off my gist and want to use a consistent nomenclature, I'd probably use something like |
This comment has been minimized.
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!