Favicon – 關於我的最愛圖示的二三事

前端文章｜2016.4.5.0217

我的最愛圖示 (Favicon) 應該是每位曾經嘗試網頁設計網友的有趣回憶，在當年 IE 宰制網路瀏覽器市場的年代，這個 16×16 像素的ICO檔案可是要了不少人的命！雖為 Windows 系統 UI 介面御用的 ICO 圖示檔案，卻是連小畫家都不支援的格式，設計人員還得為了它，下載其他影像軟體一個像素一個像素地編輯，搞得昏天暗地！

隨著 Web 2.0 的概念興起後，許多應用程式逐漸轉為線上版本，各種影像處理比起以往要方便得多，就連編輯 ICO 格式的軟體，也出現了線上版，如 X-icon Editor、Favicon & App Icon Editor⋯⋯等。若是使用 Photoshop 之類的大型影像處理軟體，也有相關的外掛（plugin、插件⋯⋯whatever）可進行編輯。

不過，該如何編輯 ICO 檔案，並非本文所探討的重點！本文的重點在於「釐清僅使用 ico 格式作為我的最愛圖示」的想法。

CSS-Tricks 提供了一篇詳盡的問答指引，筆者在此摘譯問答如下，若需要詳解請見第八題：

 

正文：關於 favicon 的二三事

  1. favicon 檔案到底是什麼？
    最原始最原始的是微軟系統所使用的圖示 (ico) 檔，名為 favicon.ico，這個檔案並非由 png 檔直接修改副檔名而來（雖然有些瀏覽器可以讀取直接修改 png 副檔名成 ico 的檔案），但實際上兩者還是有所差異的，ico檔是允許檔案內存在不同畫布尺寸 (canvas size) 的檔案。
  2. favicon.ico 的尺寸該多大呢？
    微軟建議 favicon.ico 的尺寸應為包含 16×16、32×32與48×48 不同畫布尺寸的檔案。若使用單一尺寸（如 16×16 ），僅能確保網站的最愛圖示在瀏覽器上顯示正常，卻無法保證網站在 Windwos Vista 後的工作列 (Taskbar) 與桌面正常顯示。
    windows_chrome_16x16_32x32_48x48_tab
    16×16畫布尺寸可正常顯示在瀏覽器標籤頁面。
    windows_chrome_16x16_32x32_48x48_taskbar
    16×16畫布尺寸在工具列上強制放大導致失真。
    windows_chrome_16x16_desktop
    16×16畫布尺寸設為桌面捷徑時畫面失真。
    windows_chrome_16x16_taskbar
    若包含32×32畫布尺寸，則在工具列顯示正常。
    windows_chrome_16x16_32x32_48x48_desktop
    若包含48×48畫布尺寸，則在桌面顯示正常
  3. 如果 .ico 不夠用，那 favicon.png 又是做啥用的？
    從 HTML5 之後，其實 favicon.ico 已不敷使用，為了指定更多不同裝置使用的畫布尺寸，PNG格式英印而生，如：

    <ink rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

    換言之，雖然預設的「我的最愛圖示」是使用 ico 格式，然而此格式是為舊版 IE 瀏覽器所設計，因此對於較新的瀏覽器（如：Mozilla Firefox、Google Chrome），應使用 png 格式較為適切。

  4. 行動裝置平台該使用何種格式呢？
    實際上，行動裝置百花爭鳴，格式上亦無統一標準！較新的瀏覽器使用 png 格式，蘋果 iOS 有其支援的畫布尺寸，而 Windows 8 的平板系統也有不同的 size ，您還得另外建立 browserconfig.xml 檔案宣告使用方式。
  5. favicon.png 的尺寸又該多大呢？
    每個裝置對於 png 格式的大小定義不一，Google TV (chromecast) 的尺寸是 96×96、Android 系統的 Google Chrome 瀏覽器是 196×196、Opera 的 Coast 瀏覽器事 228×228⋯⋯實際上，我的最愛圖示的尺寸多如鴻毛！
  6. 特立獨行的蘋果行動裝置？
    蘋果公司自 2007 年推出史上第一支觸控式智慧型手機後，其裝置所支援的我的最愛圖示尺寸均不一致，詳見附表：

    裝置 螢幕解析度 iOS 版本 我的最愛圖示尺寸
    iPhone 4s(含)以前 6 與之前 57×57
    7 60×60
    5 之後 6 與之前 114×114
    7 120×120
    6 Plus 8 與之後 180×180
    iPad iPad 2 (含) 以前 6 與之前 72×72
    7 76×76
    Retina 6 and prior 144×144
    7 152×152

    Retina_iPad_57x57
    在 Retina 裝置上使用過低解析度的我的最愛圖示，導致失真。
    Retina_iPad_152x152
    在 Retina 裝置上使用正確解析度的我的最愛圖示，影像正常。
    在蘋果裝置上，特別是當前幾乎所有蘋果手機均為 Retina 螢幕下，至少需確保您的「我的最愛圖示」影像使寸在 152×152，使之正常顯示。

  7. 需要在html內宣告蘋果裝置的 favicon 嗎？
    為了確保所有蘋果裝置顯示的一致性，針對舊版本（非 Retina 螢幕）的宣告或多或少是有必要的，如：

    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  8. 好複雜啊！我聽不懂！！！
    其實筆者寫到這邊，也感到非常徬徨且無助！關於這個 favicon 的議題，就像當年為了 NetScape 瀏覽器與 IE 瀏覽器相容性所做的測試一般無奈。然而，現在已經有網頁工具可以幫助我們克服我的最愛圖示的問題了，這個網站就是 RealFaviconGenerator.net！
    透過這個網站，你可以上傳一個至少 70×70 的影像檔（格式為 jpg, png 或 svg），它會自動幫您轉換為主流瀏覽器（Google Chrome, Safari, Mozilla Firefox, MS Internet Explorer 與 MS Edge），並支援當前主要作業系統（iOS, Android, Windows 與 OSX）的圖像檔與代碼！

補充資料

（取自 RealFaviconGenerator 的問與答）
媽的也太多格式了吧？其實大多時候， favicon 僅有一種格式 (favicon.ico)，有時兩種 (favicon.ico 與 favicon.png).
但實際上，是「跟山一樣高」：

favicon.ico
由 IE 瀏覽器使用，其他多數瀏覽器也能讀取，但並非當前主流格式。
favicon-16x16.png
傳統的 favicon 尺寸，會透過瀏覽器轉換 ico 檔顯示在標籤頁。
favicon-32x32.png
Mac OSX 的 Safari 瀏覽器使用的格式.
favicon-96x96.png
Google TV 所使用的格式。
android-chrome-36x36.png
Android Chrome M39+ 版本以上，使用螢幕解析密度 0.75 的尺寸。
android-chrome-48x48.png
Android Chrome M39+ 版本以上，使用螢幕解析目的 1 的尺寸。
android-chrome-72x72.png
Android Chrome M39+ 版本以上，使用螢幕解析目的 1.5 的尺寸。
android-chrome-96x96.png
Android Chrome M39+ 版本以上，使用螢幕解析目的 2.0 的尺寸。
android-chrome-144x144.png
Android Chrome M39+ 版本以上，使用螢幕解析目的 3.0 的尺寸。
android-chrome-192x192.png
Android Chrome M39+ 版本以上，使用螢幕解析目的 4.0 的尺寸。
mstile-70x70.png
Windows 8 的 IE11.
mstile-144x144.png
Windows 8 的 IE10.
mstile-150x150.png
Windows 8 的 IE11.
mstile-310x310.png
Windows 8 的 IE11.
mstile-310x150.png
Windows 8 的 IE11.
apple-touch-icon-57x57.png
iPhone 與 iPad 使用者可以透過 Safari 瀏覽器，將網頁設為桌面應用程式。若使用者欲進行此動作時，iOS 會自動搜尋對應尺寸的我的最愛圖示。57×57尺寸對應的是 iOS6 以前，非 Retina 螢幕的裝置。可從 蘋果官方文件 獲得更多資訊。
apple-touch-icon-60x60.png
如上，提供非 Retina 螢幕，iOS7 的 iPhone 尺寸。
apple-touch-icon-72x72.png
如上，提供非 Retina 螢幕，iOS6 或更早版本的 iPad 尺寸。
apple-touch-icon-76x76.png
如上，提供非 Retina 螢幕，iOS7 的 iPad 尺寸。
apple-touch-icon-114x114.png
如上，提供 Retina 螢幕，iOS6 或更早版版本的 iPhone 尺寸。
apple-touch-icon-120x120.png
如上，提供 Retina 螢幕，iOS7 含以上的 iPad 尺寸。
apple-touch-icon-144x144.png
如上，提供 Retina 螢幕，iOS6 或更早版本的 iPad 尺寸。
apple-touch-icon-152x152.png
如上，提供 Retina 螢幕，iOS7 的 iPad 尺寸。
apple-touch-icon-180x180.png
如上，提供 iOS8 的 Phone 6 Plus。
apple-touch-icon.png
如上，提供特定蘋果裝置的「預設」選項，但此設定可能會導致伺服器產生 HTTP 404 錯誤，見 蘋果官方文件。
apple-touch-icon-precomposed.png
如上，但圖示本身有圓角設定（但非陰影或光暈設定）。

標籤:

說些什麼吧

XHTML: 你可以使用以下標籤: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

沒有迴響

♥