如何簡化網站的 Favicon 製作

每個專案開始時，一定都會要製作Favicon，過去我在處理Favicon的方式都是把設計提供的Favicon丟到線上的轉換器¹，產出之後再丟進專案內。

線上轉換器產生的結果

或者有些公司使用像是favicons-webpack-plugin之類的Plugin，讓專案於編譯時自動產出favicon以及metadata。

然後你就會看到類似下面這種，又多又不知道到底有沒有真的用到的html code:

簡化後的MetaData#

簡化後的Favicon MetaData 符合多數主流瀏覽器的規範

只需要以下四行程式碼即可

favicon可以支援svg檔案，前提是我們必須要在<link rel="icon" href="/assets/favicon.ico">那行另外宣告一個 sizes="any" 給他，這是一個Chrome的bug，另外web.dev也是這樣建議

另外包含一隻manifest.json:

建議做法#

算一算，之後每個專案都只會有以下6個跟Favicon相關的檔案

• favicon.png
• favicon.svg
• favicon.ico
• favicon-192x192.png
• favicon-512x512.png
• manifest.json

其中favicon.ico, favicon-192x192.png, favicon-512x512.png這三隻檔案，我們可以直接靠shell腳本來生成，稍微減少設計師的困擾(?)，至於 manifest.json 每個專案都一模一樣，不需要另外製作

Favicon Generator#

工作沒有不見，只是別人處理掉了

減少了設計師出圖的困擾後，工程師也不想增加工作量的吧，所以出圖的事情就交給腳本來做吧

安裝#

首次使用的話，需要先在系統安裝 imagemagick，專門用來裁切圖片以及轉檔用的小工具

前置步驟#

準備好favicon.png以及favicon.svg，兩張的尺寸建議都是正方形，大小隨意。

抓資料夾內已經準備好的favicon.png來轉出 favicon.ico, apple-icon-180x180.png, favicon-192x192.png, favicon-512x512.png，路徑的部分可以調整成專案路徑。

每當有新的專案要開始時，只需要在準備好前置檔案後點一下腳本就完成了。

Done!

本篇文章參考自：Andrey Sitnik 所寫的 How to Favicon in 2023: Six files that fit most needs。

題外話#

針對Favicon的玩法其實真的很多，像是依照系統顏色改變favicon顏色的設定方式²，也是蠻簡單就可以製作出來的效果，對於網站要求很細緻的人可以去看看。

參考資料：

¹ favicon.io以及favicon-generator.org

² web.dev