Skip to content

Instantly share code, notes, and snippets.

@tillsanders
Last active January 13, 2016 16:43
Show Gist options
  • Save tillsanders/cb46be1be138430126ee to your computer and use it in GitHub Desktop.
Save tillsanders/cb46be1be138430126ee to your computer and use it in GitHub Desktop.
Favicons, Tiles, etc.

Favicons, Tiles, etc.

  • favicon.ico - 32x32
  • favicon.png - 32x32
  • apple-touch-icon.png - 180x180 (iPhone 6 Plus, others resize it automagically)
  • tile.png - 558x558
  • tile-wide.png - 558x270
  • tile-150x150.png - 150x150
  • tile-310x310.png - 310x310
  • tile-70x70.png - 70x70
  • tile-310x150.png - 310x150
  • launch6.png - 750×1294
  • launch6plus.png - 1242×2148
  • pinned.svg - 16x16 - transparent background, solid black foreground color, transparent background, one path only
  • favicon-196x196.png - 196x196 – for Android; there is little information about this, but this worked on Android 5.0

In head:

<link rel="icon" href="favicon.png" />

<meta name="application-name" content="Website-Name" />

<meta name="msapplication-TileImage" content="tile.png" />
<meta name="msapplication-square150x150logo" content="tile-150x150.png" />
<meta name="msapplication-square310x310logo" content="tile-310x310.png" />
<meta name="msapplication-square70x70logo" content="tile-70x70.png" />
<meta name="msapplication-wide310x150logo" content="tile-310x150.png" />
<meta name="msapplication-TileColor" content="#FF0000" />

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)" />
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)" />

<link rel="mask-icon" href="pinned.svg" color="#F00" />
<meta name="theme-color" content="#F00" />

<link rel="icon" sizes="196×196" href="favicon-196x196.png" />

When testing the Safari Pinned Tab Icons, you may have to delete -> Library -> Safari -> Templates Icon Folder and restart Safari, then pin your page, and wait a moment.

Source: http://www.jonathantneal.com/blog/understand-the-favicon/ Also: http://msdn.microsoft.com/en-us/library/ie/dn255024%28v=vs.85%29.aspx#msapplication-square150x150logo And for iPhone 6-Updates: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers And for Safari 9 Pinned Page Icons: https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html#//apple_ref/doc/uid/TP40002051-CH18-DontLinkElementID_7 and https://forums.developer.apple.com/thread/4615

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