關於Favicon 網站圖示生成
Favicon 網站圖示生成，把一個 Logo 變成整套網站圖示，而且按瀏覽器和手機的規矩來做。iPhone 會把主螢幕圖示的透明部分顯示成黑色，所以 apple-touch-icon 一律用背景色鋪底，Logo 四周留出空白；安卓會把圖示裁成圓形或圓角方形，所以另外生成 512 畫素的 maskable 圖示，Logo 放在安全區內，不會被切掉。小尺寸都做了銳化，16 畫素的圖示邊緣也清楚；ZIP 旁邊還有一張預覽圖，能看到圖示在淺色、深色瀏覽器標籤頁裡的樣子，以及做成 iPhone、安卓圖示的效果。網站用圖還要壓縮、改尺寸的話，工具都在圖片處理裡。
ZIP 裡有 favicon.ico（內含 16、32、48 畫素），16、32、48、96 畫素的 PNG（Google 搜尋結果裡的網站圖示按 48 畫素的倍數顯示），180 畫素的 apple-touch-icon，安卓用的 192 和 512 畫素圖示，以及 site.webmanifest 和 head.html。上傳的是 SVG 的話，還會附上 favicon.svg，給支援它的瀏覽器用。填寫的“網站名稱”會寫進清單檔案，“更多選項”裡的“主題色”會寫進清單檔案和 head.html；head.html 裡的程式碼貼上進網頁的 head 部分就行，所有檔案放在網站根目錄。長方形的 Logo 會居中放進正方形畫布，不會被裁掉，“圖示四周留白”可以在 0 到 30% 之間調。
Favicon 網站圖示生成怎麼用
- 1上傳 Logo
選擇或拖入正方形的 PNG、JPG、WebP 或 SVG，最好 512 畫素以上。
- 2設定背景和名稱
保持“透明背景”，或取消勾選後設“背景色（不透明時使用）”，再填上“網站名稱”。
- 3生成圖示
點“Favicon 網站圖示生成”按鈕，先看一眼預覽圖，再下載整套圖示。
- 4放到網站上
把 favicon-package.zip 解壓到網站根目錄，把 head.html 裡的程式碼貼上到每個頁面的 head 部分。
為什麼用熊仔工匠
- 手機上不出錯
蘋果圖示不透明、不發黑，安卓 maskable 圖示不被裁切，16 畫素也清楚。
- 整套圖示
ICO、16 到 96 畫素的 PNG、蘋果觸控圖示、安卓 192 和 512 圖示，上傳 SVG 還附 favicon.svg。
- 清單和程式碼已填好
網站名稱、主題色已寫進 site.webmanifest，head.html 裡的程式碼（含主題色）複製貼上即可。
- 先看預覽
一張圖看清圖示在淺色、深色標籤頁裡，以及做成 iPhone、安卓圖示的效果。