from: http://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16 more info: http://www.970px.com/ios-mobile-icon/

• ps. 在自己本機的虛擬伺服器似乎無法看到設定完成的 favicon，要放到網路上才能顯示。
• ps. head 屬性 profile 在 html5 已經建議棄置

realfavicongenerator.net

• Microsoft IE 建議 16x16, 32x32 和 48x48 打包在 favicon.ico 文件中。
  • ps： .ico 是一個集合圖檔格式，一個圖示檔案可以同包含多個格式，因此在不同的檔案視圖下可能顯示完全不同的圖案。

• iOS, Apple 有建議的具體的擋名和做法, 最多 180x180，適用於運行 iOS 8 的最新設備。

• Android Chrome 主要使用一個清單，也依賴 Apple touch icon。

• 在 Windows 8.0 的 IE 10 要求 PNG 圖片和一個背景色； Windows 8.1 和 10 的 IE 11 接受一些 PNG 圖片，被聲明在一個叫做 "browserconfig.xml" 的 XML 專用文件中。 https://msdn.microsoft.com/library/dn455106(v=vs.85).aspx

• Mac OS X El Capitan 的 Safari 引入 SVG 圖標為 pinned tabs 固定標籤。

• 有些平台則會依據各種方案搜尋 PNG 文件，例如 Google TV 的 96x96 圖片或 Opera Coast 的 228x228 圖片。

參照此 favicon 圖片列表，以獲得完整的參考。

favicon generator 可以一次生成所有這些文件，並附帶相應的 HTML 代碼。 該生成器也被實現為一個 WordPress 插件。Full disclosure: I am the author of this site.

為什麼建議將圖標圖片放在根目錄下

當使用 RealFaviconGenerator 生成圖標時，說明會要求您將所有文件放在您網站的根目錄下。

您可能希望將它們放在子目錄中，例如 http://mywebsite.com/icons/ ，只是為了使事情更清晰。然而，這種方法有三個缺點：

• Internet Explorer 會在網站的根目錄下查找 favicon.ico。 誠然：這是為什麼我們希望你不要“聲明” favicon.ico。
• iOS 設備會在網頁根目錄查找像 apple-touch-icon-144x144.png 這樣的檔案，如 Apple 所聲明的。通過 HTML “聲明圖標”可以減輕這個問題（這對 Android 來說是必需的），但遵循 Apple 的約定可能是最好的選擇。
• Internet Explorer 11 默認情況下，會在網站的根目錄下查找 browserconfig.xml。
• 幾個服務，如 Yandex，也是在根目錄中查找 favicon.ico。

https://www.quora.com/How-do-you-add-a-Favicon-with-HTML5

<!-- For IE 9 以下 (and below) . ICO 應為 should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. --> 
<link rel="icon" href="path/to/favicon.png">