如今，除了“ favicon.ico”以外，还有哪些其他图标？

Question

I'm not following all the latest webdev trends so I've a question about what other icons besides favicon.ico a modern website should provide?

My current HTML looks like this:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon"          href="/favicon.ico" type="image/x-icon">

My favicon.ico is 32x32 PNG file.

What other icons should I be providing for my new website? I guess there are icons for Android, OSX, Facebook (when you share your website?) and others.

Answer 1

Favicons in multiple sizes:

<link rel="icon" sizes="16x16" href="favicon.png">
<link rel="icon" sizes="32x32" href="favicon-l.png">
<link rel="icon" sizes="64x64" href="favicon-xl.png">

Note: 16x16 and 32x32 are the most common ones; other sizes are unlikely to be used by major browsers.

iOS icons :

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Note 1: these are also used by Android .

Note 2: use rel="apple-touch-icon-precomposed" if you don't want iOS to apply the "glass-effect" and just show your image as-is.

Microsoft Windows 8.1 Tiles

<meta name="application-name" content="My Site"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-square70x70logo" content="/ms-tiny.png"/>
<meta name="msapplication-square150x150logo" content="/ms-square.png"/>
<meta name="msapplication-wide310x150logo" content="/ms-wide.png"/>
<meta name="msapplication-square310x310logo" content="/ms-large.png"/>

Note: these are also used on Windows phones.

Webpage thumbnail ( used by Facebook for example)

<meta property="og:image" content="http://example.com/preview-100x100.png" />

---

See also this great article.