Skip to content

Instantly share code, notes, and snippets.

@jamesmrobinson
Last active December 26, 2015 02:19
Show Gist options
  • Save jamesmrobinson/7077505 to your computer and use it in GitHub Desktop.
Save jamesmrobinson/7077505 to your computer and use it in GitHub Desktop.
Notes on favicons

Favicon Sizes

  • 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

Markup

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment