如何簡化網站的Favicon製作

每個專案開始時，一定都會要製作Favicon，過去我在處理Favicon的方式都是把設計提供的Favicon丟到線上的轉換器¹，產出之後再丟進專案內。

線上轉換器產生的結果

或者有些公司使用像是favicons-webpack-plugin之類的Plugin，讓專案於編譯時自動產出favicon以及metadata。

然後你就會看到類似下面這種，又多又不知道到底有沒有真的用到的html code:

index.html


_32<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png">
_32<link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png">
_32<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
_32<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png">
_32<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png">
_32<link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png">
_32<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png">
_32<link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png">
_32<link rel="apple-touch-icon" sizes="167x167" href="/assets/apple-touch-icon-167x167.png">
_32<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png">
_32<link rel="apple-touch-icon" sizes="1024x1024" href="/assets/apple-touch-icon-1024x1024.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-750x1294.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1182x2208.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1242x2148.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-748x1024.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1496x2048.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.png">
_32<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1536x2008.png">
_32<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
_32<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
_32<link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png">
_32<link rel="manifest" href="/assets/manifest.webmanifest">
_32<link rel="shortcut icon" href="/assets/favicon.ico">
_32<link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json">
_32<meta name="apple-mobile-web-app-capable" content="yes">
_32<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
_32<meta name="mobile-web-app-capable" content="yes">
_32<meta name="msapplication-TileImage" content="/assets/mstile-144x144.png">
_32<meta name="msapplication-config" content="/assets/browserconfig.xml">

簡化後的MetaData#

簡化後的Favicon MetaData 符合多數主流瀏覽器的規範

只需要以下四行程式碼即可

index.html


_10<link rel="icon" href="/assets/favicon.ico" sizes="any">
_10<link rel="icon" href="/assets/favicon/favicon.svg" type="image/svg+xml">
_10<link rel="apple-touch-icon" href="/assets/favicon/apple-icon-180x180.png">
_10<link rel="manifest" href="/assets/favicon/manifest.json">

favicon可以支援svg檔案，前提是我們必須要在<link rel="icon" href="/assets/favicon.ico">那行另外宣告一個 sizes="any" 給他，這是一個Chrome的bug，另外web.dev也是這樣建議

另外包含一隻manifest.json:

manifest.json


_14{
_14 "icons": [
_14  {
_14   "src": "/favicon-192x192.png",
_14   "sizes": "192x192",
_14   "type": "image/png"
_14  },
_14  {
_14   "src": "/favicon-512x512.png",
_14   "sizes": "512x512",
_14   "type": "image/png"
_14  }
_14 ]
_14}

建議做法#

算一算，之後每個專案都只會有以下6個跟Favicon相關的檔案

favicon.png
favicon.svg
favicon.ico
favicon-192x192.png
favicon-512x512.png
manifest.json

其中favicon.ico, favicon-192x192.png, favicon-512x512.png這三隻檔案，我們可以直接靠shell腳本來生成，稍微減少設計師的困擾(?)，至於 manifest.json 每個專案都一模一樣，不需要另外製作

Favicon Generator#

工作沒有不見，只是別人處理掉了

減少了設計師出圖的困擾後，工程師也不想增加工作量的吧，所以出圖的事情就交給腳本來做吧

安裝#

首次使用的話，需要先在系統安裝 imagemagick，專門用來裁切圖片以及轉檔用的小工具


_10brew install imagemagick

前置步驟#

準備好favicon.png以及favicon.svg，兩張的尺寸建議都是正方形，大小隨意。

favicon-generator.command


_10#!/bin/bash
_10ABSPATH=$(cd "$(dirname "$0")"; pwd -P)
_10RootPath="$(dirname "$ABSPATH")"
_10    magick "${RootPath}/images/favicon/favicon.png" -resize 48x48 "${RootPath}/images/favicon/favicon.ico"
_10    magick "${RootPath}/images/favicon/favicon.png" -resize 48x48 "${RootPath}/favicon.ico"
_10    magick "${RootPath}/images/favicon/favicon.png" -resize 180x180 "${RootPath}/images/favicon/apple-icon-180x180.png"
_10    magick "${RootPath}/images/favicon/favicon.png" -resize 192x192 "${RootPath}/images/favicon/favicon-192x192.png"
_10    magick "${RootPath}/images/favicon/favicon.png" -resize 512x512 "${RootPath}/images/favicon/favicon-512x512.png"
_10echo "完成！"

抓資料夾內已經準備好的favicon.png來轉出 favicon.ico, apple-icon-180x180.png, favicon-192x192.png, favicon-512x512.png，路徑的部分可以調整成專案路徑。

每當有新的專案要開始時，只需要在準備好前置檔案後點一下腳本就完成了。

Done!

本篇文章參考自：Andrey Sitnik 所寫的 How to Favicon in 2023: Six files that fit most needs。

題外話#

針對Favicon的玩法其實真的很多，像是依照系統顏色改變favicon顏色的設定方式²，也是蠻簡單就可以製作出來的效果，對於網站要求很細緻的人可以去看看。

參考資料：

¹ favicon.io以及favicon-generator.org

² web.dev