現在除了`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是32×32的PNG文件。

我應該爲我的新網站提供哪些其他圖標？我想有Android，OSX，Facebook（當你分享你的網站？）等人的圖標。

Answer 1

favicon的多種尺寸：

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

注1：這些都是also used by Android。

注2：使用rel="apple-touch-icon-precomposed"如果您不希望iOS應用「玻璃效果」並僅按原樣顯示圖像。

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

注：這些也被用來在Windows手機。

頁面的縮略圖（used by Facebook例如）

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

---

又見this great article.