如今，除了“ favicon.ico”以外，還有哪些其他圖標？

Question

我沒有關注所有最新的webdev趨勢，所以我想了解現代網站除了favicon.ico之外還應提供哪些其他圖標？

我當前的HTML如下所示：

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

我的favicon.ico是32x32 PNG文件。

我應該為我的新網站提供哪些其他圖標？ 我猜想有用於Android，OSX，Facebook（共享網站時）和其他圖標。

Answer 1

多種尺寸的圖標：

<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">

注意：最常見的是16x16和32x32 ； 其他尺寸的瀏覽器不太可能使用。

iOS圖標 ：

<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">

注意1：這些也由Android使用 。

注意2：如果您不希望iOS應用“玻璃效果”，而僅按原樣顯示圖片， 請使用rel="apple-touch-icon-precomposed" 。

Microsoft Windows 8.1磁貼

<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"/>

注意：這些也用於Windows手機。

網頁縮略圖（例如，Facebook使用的 ）

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

---

另請參閱這篇出色的文章。