瀏覽器和裝置真正需要的favicon尺寸

以前favicon只是一張16×16的小圖片。現在瀏覽器分頁、手機主畫面的捷徑、書籤列和Apple觸控圖示,各自都期待自己的尺寸,只提供一種尺寸,會讓其中某些情境要嘛顯得模糊,要嘛顯示一個通用的備用圖示而不是你的圖示。

為什麼一種尺寸不夠

一個16×16的圖示被放大去填滿180×180的主畫面圖示位置,看起來會和任何被放大拉伸的小圖片一樣有格狀感——沒辦法加上來源裡原本就沒有的細節。favicon出現的每種情境都有自己期望的解析度,現代做法是提供一整組尺寸,而不是靠瀏覽器把一個小檔案拙劣地放大。

值得涵蓋的尺寸

• 16×16和32×32——經典的favicon尺寸,用於大多數桌面瀏覽器的分頁和書籤列表。
• 180×180——當網頁被加入iPhone或iPad主畫面時,Apple所期望的主畫面圖示尺寸。
• 192×192和512×512——用於Android,以及可安裝網頁應用程式的主畫面圖示與啟動畫面所使用的網頁應用程式資訊清單。

讓設計在16px時仍然清楚可辨

Favicon產生器接收一張來源圖片,完全在瀏覽器中一次生成整套標準尺寸——但沒有任何產生器能修復一個一開始在小尺寸下就行不通的設計。細緻的細節、細線條和小字在16×16時會完全消失;一個簡單、粗壯、縮小後仍能辨識的形狀或字母,才是不論從中產生多少種尺寸,在瀏覽器分頁裡真正清晰可讀的東西。