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



GitHub:

https://github.com/magiclen/favicon-generator

安裝Favicon Generator

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

cargo install favicon-generator

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

https://github.com/magiclen/favicon-generator/releases

Favicon Generator程式需要額外的Portrace執行檔才能正常運行,Potrace是一款可以用來將點陣圖轉成向量圖的工具。其官方網站網址如下:

http://potrace.sourceforge.net/

可以直接在官方網站上下載到提供給不同作業系統使用的執行檔。不過如果是使用基於Debian的Linux發行版,可以直接使用以下指令來安裝Potrace:

sudo apt install potrace

使用Favicon Generator

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

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

執行Favicon Generator指令前記得把Portrace執行檔所在的目錄加進系統的PATH環境變數中,否則在使用Favicon Generator時就要再用--potrace-path參數來手動指定Portrace執行檔的路徑。--path-prefix參數可以不必設定,預設會使用/,也就是網站根目錄。

favicon-generator

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

favicon-generator

favicon-generator

關於單色(Monochrome)的圖示

Favicon Generator會利用Potrace來產生Monochrome的向量圖檔,如果覺得預設產生出來的單色圖檔的效果並不好,可以嘗試加上-t參數來手動指定0 ~ 1.0的數值(預設為0.5),數值愈低表示要過濾掉的愈多的顏色。

強制覆蓋現有的檔案

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

不自動銳化

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

其它設定

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

favicon-generator --help