- 16px: For general use in all browsers, could be displayed in the address bar, tabs or bookmarks views!
- 24px: Pinned Site in Internet Explorer 9
- 32px: New tab page in Internet Explorer, taskbar button in Windows 7+ and Safari’s ‘Read Later’ sidebar
- 57px: non-Retina iPhone, iPod Touch, and Android 2.1+ devices
- 72px: iPad mini and the first- and second-generation iPad on iOS ≤ 6
- 76px: iPad mini and the first- and second-generation iPad on iOS ≥ 7
- 96px: Favicon used by the GoogleTV platform
- 114px: iPhone with high-resolution Retina display running iOS ≤ 6
- 120px: iPhone with high-resolution Retina display running iOS ≥ 7
- 128px: Chrome Web Store
- 144px: iPad with high-resolution Retina display running iOS ≤ 6 & Windows Metro UI Icon
- 152px: iPad with high-resolution Retina display running iOS ≥ 7
- 195px: Opera Speed Dial
This is based on the main icons required for most projects.
<link rel="apple-touch-icon-precomposed" sizes="195x195" href="icon-195.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="icon-152.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="icon-120.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="icon-76.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="icon-144-metro.png">
IE 10 Metro icon. Note that unlike iOS the metro icon can be transparent for web apps/clips.
##Resources
- https://github.com/audreyr/favicon-cheat-sheet
- http://www.creativebloq.com/design/create-perfect-favicon-12112760
- http://mathiasbynens.be/notes/touch-icons
- https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconMatrix.html
- https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/WebClipIcons.html