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

隨著 Web 2.0 的概念興起後,許多應用程式逐漸轉為線上版本,各種影像處理比起以往要方便得多,就連編輯 ICO 格式的軟體,也出現了線上版,如 X-icon EditorFavicon & 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.icofavicon.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
如上,但圖示本身有圓角設定(但非陰影或光暈設定)。

標籤:

Leave a Reply

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of