search

audreyfeldroy / favicon-cheat-sheet

Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)
MIT License
9.85k stars 413 forks source link

Add MS Tile icon and Facebook Open Graph image? #20

Open danleech opened 10 years ago

danleech commented 10 years ago

Going beyond favicons and apple-touch-icons, you could add icon support for Windows 8 and Facebook sharing using this code:

<meta name="msapplication-TileImage" content="images/tile-144.png">
<meta name="msapplication-TileColor" content="#000000">
<meta property="og:image" content="images/web-clip-512.png">

Facebook Open Graph meta tags: https://developers.facebook.com/docs/opengraph/using-objects/

Pinned Sites in Windows 8: http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx

danleech commented 10 years ago

Ignore the MS tile bit. Obviously I’m an idiot and didn’t read a whole section of your (well written) documentation. The Facebook Open Graph image point still stands. :)

lee101 commented 10 years ago

I agree add open graph images into this document. 512 seems a good size, i did a bit of reading and i heard the recommended size is 1500x1500 ??? That seems a bit crazy?

mprins commented 10 years ago

FB quote halfway down the page at: https://developers.facebook.com/docs/opengraph/creating-custom-stories/#objecttypes also note that if you use the same image for a Twitter card it should be =<1MB (https://dev.twitter.com/docs/cards/markup-reference)

The URL of an image which is used in stories published about this object. We suggest that you give us an image of at least 600x315 pixels. However, bigger is better, so if you have a 1200x630 or larger image that you can use, please give it to us. Also, we recommend that you keep images as close to a 1.91:1 aspect ratio as possible to avoid cropping. (Note: image sizes must be no more than 5MB in size.) Note that you can include more than that one og:image in your object if you have more than one resolution available.