如何透過 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> 標記中加入以下內容
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/android-chrome-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/favicon/manifest.json">
到這裡就算完成了，如果重新整理瀏覽器就可以順利看到圖標正確顯示在視窗中。
最後附上透過 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],
$match[1],
$faviconDir,
$filename
);
exec($command);
}
}
?>
Good Luck...