Created
January 7, 2012 17:53
-
-
Save ravasthi/1575454 to your computer and use it in GitHub Desktop.
Favicon code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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"/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 calledapple-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 calledfavicon.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 useapple-touch-icon
—andsizes="144x144"
in yourlink
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!