在設計網頁的時候,總會需要替自己的網頁設計一個適合的Favicon來作為招攬客人的門牌,然而很多人並不知道設計好的Favicon圖片檔案要如何才能正確地套用在自己的網頁上。如果我們向Google搜尋查詢Favicon產生器相關的關鍵字,可以找到很多網頁工具,能夠直接透過網頁瀏覽器將自己做好的Favicon圖片檔案上傳到別人的伺服器上,產生出favicon.ico等Favicon相關的檔案格式。這些服務很方便沒錯,但會有原始圖檔外流的風險,而且不同的網頁工具產生出來的Favicon相關的檔案品質也都不一,產生速度也有點慢。於是筆者開發了Favicon Generator,可以在自己的電腦上產生Favicon,可以輸入一張圖檔,將其輸出成多種格式和尺寸,且相容於主流作業系統和網頁瀏覽器的Favicon相關檔案。



GitHub:

安裝Favicon Generator

如果系統環境中有安裝「Cargo」的話,可以直接使用以下指令來下載「Favicon Generator」的原始碼專案,並進行編譯安裝。

cargo install favicon-generator

如果是使用Linux作業系統的話,可以直接到以下頁面取得「Favicon Generator」的執行檔,手動放置到/usr/local/bin目錄中即可。網址如下:

使用Favicon Generator

Favicon Generator提供方便的命令列介面(CLI),只要在命令提示字元或是終端機中打幾個字就可以運作了。最基本的指令用法如下:

favicon-generator 輸入的圖片檔案路徑 Favicon相關檔案要輸出的目錄 [--path-prefix 產生出來的Favicon相關檔案預計要放在網頁伺服器的哪個路徑下]

--path-prefix參數可以不必設定,預設會使用/,也就是網站根目錄。

favicon-generator

在正確執行Favicon Generator之後,就會將Favicon相關檔案就會輸出到指定的目錄中,若目錄原先並不存在的話就會自動被建立出來。Favicon Generator還會把正確設定Favicon的HTML語法印在螢幕上。

favicon-generator

favicon-generator

強制覆蓋現有的檔案

Favicon Generator在輸出檔案時會檢查有沒有已存在的檔案路徑,如果有的話就會詢問是否要覆蓋已存在的檔案。在執行指令時加上-y參數,可以略過檔案覆寫的確認,強制覆寫檔案。

不自動銳化

為了使圖片縮放的品質更好,Favicon Generator會稍微對縮放後的圖片進行銳化的動作,如果要關閉這個功能,可以加上--no-sharpen參數。

其它設定

另外還有一些跟各個平台上的Web App有關的參數設定,這部份浮動性比較大,可以自行執行以下指令來參考Favicon Generator自帶的說明。

favicon-generator --help