Last active
August 29, 2015 13:58
-
-
Save awesome/9947977 to your computer and use it in GitHub Desktop.
This is the answer to my stackoverflow question posted here : http://stackoverflow.com/questions/22824947/what-are-all-the-favicon-html-implementations-as-of-2014-cross-browser-inclusi (I could not get this posted before it got down-voted and closed)
This file contains 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
<!-- | |
# This is the answer to my stackoverflow question posted here: | |
# http://stackoverflow.com/questions/22824947/what-are-all-the-favicon-html-implementations-as-of-2014-cross-browser-inclusi | |
# (I could not get this posted before it got down-voted and closed) | |
--> | |
<!-- Favicon (standard)--> | |
<!-- | |
# https://github.com/audreyr/favicon-cheat-sheet#ico-file | |
# http://mathiasbynens.be/notes/rel-shortcut-icon | |
--> | |
<!-- sizes: 64x64,48x48,32x32,24x24,16x16 --> | |
<link rel="shortcut icon" href="/favicon.ico" > | |
<!-- Favicon (general) --> | |
<!-- | |
# https://github.com/audreyr/favicon-cheat-sheet#the-images | |
--> | |
<!-- Certain old but not too old Chrome versions mishandle ico --> | |
<link rel="icon" href="/favicon-32x32.png" sizes="32x32"> | |
<!-- Standard iOS home screen (iPod Touch, iPhone first generation to 3G) --> | |
<link rel="icon" href="/favicon-57x57.png" sizes="57x57"> | |
<!-- iPad home screen icon --> | |
<link rel="icon" href="/favicon-72x72.png" sizes="72x72"> | |
<!-- GoogleTV icon --> | |
<link rel="icon" href="/favicon-96x96.png" sizes="96x96"> | |
<!-- iPhone retina touch icon (Change for iOS 7: up from 114x114) --> | |
<link rel="icon" href="/favicon-120x120.png" sizes="120x120"> | |
<!-- Chrome Web Store icon --> | |
<link rel="icon" href="/favicon-128x128.png" sizes="128x128"> | |
<!-- IE10 Metro tile for pinned site --> | |
<link rel="icon" href="/favicon-144x144.png" sizes="144x144"> | |
<!-- iPad retina touch icon (Change for iOS 7: up from 144x144) --> | |
<link rel="icon" href="/favicon-152x152.png" sizes="152x152"> | |
<!-- Opera Speed Dial icon --> | |
<link rel="icon" href="/favicon-195x195.png" sizes="195x195"> | |
<!-- Opera Coast icon --> | |
<link rel="icon" href="/favicon-228x228.png" sizes="228x228"> | |
<!-- Favicon SVG (unsupported) --> | |
<!-- | |
# https://bugzilla.mozilla.org/show_bug.cgi?id=366324 | |
--> | |
<!-- http://dahlström.net/svg/favicon/favicon.html --> | |
<link rel="icon" type="image/svg+xml" href="happyface.svg"/> | |
<!-- http://jsfiddle.net/YawSn/13/ --> | |
<link rel="icon" type="image/svg+xml" href="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg"> | |
<!-- iOS --> | |
<!-- | |
# https://gist.github.com/kevinSuttle/9835773 | |
# http://mathiasbynens.be/notes/touch-icons | |
# https://github.com/h5bp/html5-boilerplate/issues/1367 | |
# https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/WebClipIcons.html#//apple_ref/doc/uid/TP40006556-CH29-SW1 | |
# https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html | |
--> | |
<!-- For iPad with high-resolution Retina display running iOS >= 7: --> | |
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png"> | |
<!-- For iPad with high-resolution Retina display running iOS <= 6: --> | |
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> | |
<!-- For iPhone with high-resolution Retina display running iOS >= 7: --> | |
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png"> | |
<!-- For iPhone with high-resolution Retina display running iOS <= 6: --> | |
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> | |
<!-- For the iPad mini and the first- and second-generation iPad on iOS >= 7: --> | |
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png"> | |
<!-- For the iPad mini and the first- and second-generation iPad on iOS <= 6: --> | |
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> | |
<!-- | |
# don't know if this is valid, but included in many libs/frameworks | |
# https://www.google.com/search?q=%22apple-touch-icon-60x60-precomposed.png%22&num=100 | |
# https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html | |
--> | |
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60-precomposed.png"> | |
<!-- non-retina iPhone pre iOS 7 --> | |
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57-precomposed.png"> | |
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> | |
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> | |
<!-- | |
# (not sure if this issue is still valid) | |
# http://stackoverflow.com/questions/16423152/what-size-is-apple-touch-icon-when-no-size-specified | |
# https://github.com/opengovernment/askthem/issues/346 | |
# http://stackoverflow.com/a/15543670/1076207 | |
# http://stackoverflow.com/a/18304009/1076207 | |
# | |
# in root dir: | |
apple-touch-icon-57x57-precomposed.png | |
apple-touch-icon-57x57.png | |
apple-touch-icon-precomposed.png | |
apple-touch-icon.png | |
--> | |
<!-- Android --> | |
<!-- | |
# http://davidensinger.com/2014/02/current-favicon-icon-stack/ | |
# https://developers.google.com/chrome/mobile/docs/installtohomescreen | |
--> | |
<link rel="shortcut icon" sizes="196x196" href="/favicon-196x196.png"> | |
<!-- Windows 8 Tiles --> | |
<!-- | |
# http://davidensinger.com/2014/02/current-favicon-icon-stack/ | |
# http://msdn.microsoft.com/en-us/library/ie/dn255024%28v=vs.85%29.aspx | |
--> | |
<!-- IE10 --> | |
<meta name="msapplication-TileColor" content="#FFFFFF"> | |
<meta name="msapplication-TileImage" content="/favicon-144x144"> | |
<!-- IE11 --> | |
<meta name="msapplication-square70x70logo" content="/favicon-128x128-ie11.png"/> | |
<meta name="msapplication-square150x150logo" content="/favicon-270x270-ie11.png"/> | |
<meta name="msapplication-wide310x150logo" content="/favicon-558x270-ie11.png"/> | |
<meta name="msapplication-square310x310logo" content="/favicon-558x558-ie11.png"/> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment