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

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

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

convert '$SOURCE_PATH/favicon.png' -background transparent -define icon:auto-resize=16,24,32,48,64,72,96,128,256 'favicon/favicon.ico'

convert '$SOURCE_PATH/favicon.png' -resize 16x16 -gravity center -extent 16x16 'favicon/favicon-16x16.png'

convert '$SOURCE_PATH/favicon.png' -resize 32x32 -gravity center -extent 32x32 'favicon/favicon-32x32.png'

convert '$SOURCE_PATH/favicon.png' -resize 96x96 -gravity center -extent 96x96 'favicon/favicon-96x96.png'

convert '$SOURCE_PATH/favicon.png' -resize 70x70 -gravity center -extent 70x70 'favicon/mstile-70x70.png'

convert '$SOURCE_PATH/favicon.png' -resize 144x144 -gravity center -extent 144x144 'favicon/mstile-144x144.png'

convert '$SOURCE_PATH/favicon.png' -resize 150x150 -gravity center -extent 150x150 'favicon/mstile-150x150.png'

convert '$SOURCE_PATH/favicon.png' -resize 310x310 -gravity center -extent 310x310 'favicon/mstile-310x310.png'

convert '$SOURCE_PATH/favicon.png' -resize 310x150 -gravity center -extent 310x150 'favicon/mstile-310x150.png'

convert '$SOURCE_PATH/favicon.png' -resize 36x36 -gravity center -extent 36x36 'favicon/android-chrome-36x36.png'

convert '$SOURCE_PATH/favicon.png' -resize 48x48 -gravity center -extent 48x48 'favicon/android-chrome-48x48.png'

convert '$SOURCE_PATH/favicon.png' -resize 72x72 -gravity center -extent 72x72 'favicon/android-chrome-72x72.png'

convert '$SOURCE_PATH/favicon.png' -resize 96x96 -gravity center -extent 96x96 'favicon/android-chrome-96x96.png'

convert '$SOURCE_PATH/favicon.png' -resize 144x144 -gravity center -extent 144x144 'favicon/android-chrome-144x144.png'

convert '$SOURCE_PATH/favicon.png' -resize 192x192 -gravity center -extent 192x192 'favicon/android-chrome-192x192.png'

convert '$SOURCE_PATH/favicon.png' -resize 57x57 -gravity center -extent 57x57 'favicon/apple-touch-icon-57x57.png'

convert '$SOURCE_PATH/favicon.png' -resize 60x60 -gravity center -extent 60x60 'favicon/apple-touch-icon-60x60.png'

convert '$SOURCE_PATH/favicon.png' -resize 72x72 -gravity center -extent 72x72 'favicon/apple-touch-icon-72x72.png'

convert '$SOURCE_PATH/favicon.png' -resize 76x76 -gravity center -extent 76x76 'favicon/apple-touch-icon-76x76.png'

convert '$SOURCE_PATH/favicon.png' -resize 114x114 -gravity center -extent 114x114 'favicon/apple-touch-icon-114x114.png'

convert '$SOURCE_PATH/favicon.png' -resize 120x120 -gravity center -extent 120x120 'favicon/apple-touch-icon-120x120.png'

convert '$SOURCE_PATH/favicon.png' -resize 152x152 -gravity center -extent 152x152 'favicon/apple-touch-icon-152x152.png'

convert '$SOURCE_PATH/favicon.png' -resize 180x180 -gravity center -extent 180x180 'favicon/apple-touch-icon-180x180.png'

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

{

"name": "app",

"icons": [

{

"src": "\/android-chrome-36x36.png",

"sizes": "36x36",

"type": "image\/png",

"density": 0.75

{

"src": "\/android-chrome-48x48.png",

"sizes": "48x48",

"type": "image\/png",

"density": 1

{

"src": "\/android-chrome-72x72.png",

"sizes": "72x72",

"type": "image\/png",

"density": 1.5

{

"src": "\/android-chrome-96x96.png",

"sizes": "96x96",

"type": "image\/png",

"density": 2

{

"src": "\/android-chrome-144x144.png",

"sizes": "144x144",

"type": "image\/png",

"density": 3

{

"src": "\/android-chrome-192x192.png",

"sizes": "192x192",

"type": "image\/png",

"density": 4

}

]

}

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

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

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

<?php

$binFilePath = 'convert';

$sourcePNGFile = 'favicon.png';

$faviconDir = '/var/www/html/favicon';

$command = sprintf(

'%s \'%s\' -background transparent -define icon:auto-resize=16,24,32,48,64,72,96,128,256 \'%s/favicon.ico\'',

$binFilePath,

$sourcePNGFile . '/favicon.png',

$faviconDir

);

exec($command);

// 正方形

$allPngFiles = [

'favicon-16x16',

'favicon-32x32',

'favicon-96x96',

'mstile-70x70',

'mstile-144x144',

'mstile-150x150',

'mstile-310x310',

'mstile-310x150',

'android-chrome-36x36',

'android-chrome-48x48',

'android-chrome-72x72',

'android-chrome-96x96',

'android-chrome-144x144',

'android-chrome-192x192',

'apple-touch-icon-57x57',

'apple-touch-icon-60x60',

'apple-touch-icon-72x72',

'apple-touch-icon-76x76',

'apple-touch-icon-114x114',

'apple-touch-icon-120x120',

'apple-touch-icon-152x152',

'apple-touch-icon-180x180',

];

foreach ($allPngFiles as $filename) {

if (preg_match('/.+?(\d+x\d+)/', $filename, $match)) {

$command = sprintf(

'%s \'%s\' -background transparent -resize %s -gravity center -extent %s \'%s/%s.png\'',

$binFilePath,

$sourcePNGFile,

$match[1],

$faviconDir,

$filename

);

exec($command);

}

Good Luck...

Soul & Shell Blog

假文青的幽默不好笑

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

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

更多文章

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

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

更多文章

分享此文

Post navigation