fbpx

利用 Imagick 轉換 PNG 成為所有格式的 favicon.ico 網站圖標


如何透過 ImageMigick 命令製作網站圖標

當我們透過瀏覽器開啟網頁,在瀏覽器頁籤出現的小圖示就是「網站圖標」又稱為網站 Icon,今天的教學首先要先安裝 ImageMagick Library Tools,安裝完成以後會有 convert CLI 可以使用。由於目前標準的網站圖標需要很多種不同的格式,所以需要一系列的轉換工作。接下來準備好要製作圖標的透背 PNG 檔案,然後執行以下命令 ($SOURCE_PATH 請替換你的 PNG 圖片來源檔路徑)。

除了透過上述命令產生各裝置需要的 Icon 格式以外,Android 系統還需要一支 manifest.json 檔案,檔案內容如下:

完成以後把整個 favicon 放到你的網站 Document Root 目錄下,然後在首頁的網頁中 <HEAD> 標記中加入以下內容

到這裡就算完成了,如果重新整理瀏覽器就可以順利看到圖標正確顯示在視窗中。

最後附上透過 PHP 產生網站圖標的程式碼,如果需要實做 SaaS 服務的人或許用的上:

Good Luck...