Favic-o-Matic 快速裁切、製作各種尺寸大小的 Favicon 網站圖示

最近無意間發現免費資源網路社群在 Google 搜尋結果無法正確顯示網站圖示，也就是大家都知道的 Favicon（Favorites icon），這個小小圖示代表一個網站，經常會顯示於瀏覽器標籤列或書籤，有些時候當網網頁打開太多，標題無法全部顯示於標籤列，我們就會很習慣透過網站圖示來判斷是不是自己需要的網頁。前段時間 Google 搜尋調整結果呈現的樣式，在網站標題旁邊加上圖示，因此好好設定一下自己的網站圖示格外重要（雖然後來這個設計被很多網友抗議 Google 決定要重新研議）。

本文要介紹的「Favic-o-Matic」是一個協助網站製作出各種尺寸大小網站圖示的線上工具，如果你對 Favicon 稍有研究就會發現這個圖示在不同作業系統、瀏覽器或搜尋引擎的尺寸格式要求都不太一樣，為了滿足各種條件，也要準備不同尺寸的圖示。

有些工具可以快速解決類似問題，例如 WordPress 內建「網站識別」功能就可以直接將網站圖示裁切為常見尺寸，自動將相關程式碼插入網站，減少使用者必須手動處理網站圖示的麻煩。

Favic-o-Matic 主要功能是協助使用者建立各種尺寸的 Favicon，包括 .ico 和 .png 兩種格式（甚至是透明背景），同時產生需要的 HTML 程式碼，讓各種瀏覽器或各種裝置都能正常呈現出網站圖示。

如果你的網站目前還沒有網站圖示，請記得儘快加入，這對搜尋引擎最佳化（SEO）來說也有一些加分效果；若你不確定原有的圖示格式或尺寸是否符合現況，可以透過這項工具重新製作，過程非常簡單。

Favic-o-Matic
https://favicomatic.com/

使用教學

STEP 1

開啟 Favic-o-Matic 會看到類似下圖畫面，預設情況下會建立 16×16 + 32x32px 兩種最常見常用的 favicon.ico 尺寸，當然你也可以選擇另一個選項是包含所有尺寸，像是在行動裝置 iOS、Android 或是 Metro 會用到的網站圖示大小。

點選「Upload Your Image」上傳你要裁切、製作為網站圖示的圖片，建議最小大小必須要有 32x32px 以上，效果會比較理想。

STEP 2

點選 Advanced Settings 開啟進階設定選項，可單獨選擇圖示尺寸，依照 Google 網站小圖示說明建議，盡量使用 48x48px、96x96px、144x144px 等等 48px 倍數大小的正方形圖片。

在這裡可以選擇偏好的圖片尺寸，Favic-o-Matic 就會自動帶入一些常見尺寸，下方的網站網址、標題、背景顏色和 RSS feed 鏈結則會在稍候下載檔案時出現於 HTML 程式碼，建議先把資料填入等下就可直接取用程式碼。

STEP 3

建立後 Favic-o-Matic 會直接顯示檔案下載提示訊息，下載後解壓縮會取得檔案。

其中有一個 code.txt 可以讓使用者放進網站原始碼，利用這些宣告來告訴瀏覽器或裝置該網頁使用的網站圖示及相關尺寸大小，其中也有一段是應用程式名稱、應用程式圖格背景顏色（僅適用於 Windows 10），通知部分則是會帶入剛才填寫的 RSS feed 網址。不過其實也不用這麼複雜，只要抓幾個尺寸大小出來用就好。

STEP 4

Favic-o-Matic 會依照使用者選擇的尺寸大小產生各種對應的圖片，格式為 .png，其中也有一個 favicon.ico 檔案，可以一併放入網站根目錄。至於要怎麼放程式碼、要如何設定網站圖示我就不在本文多做說明，應該不會太複雜，如有需要搜尋一下網路上也會有不少教學可以參考。