Favicon 產生器
在瀏覽器裡產生完整的 favicon 組合：多尺寸 .ico、各種 PNG、manifest 與要貼的標記。
在你的瀏覽器中執行
Safari 會把 apple-touch-icon 疊在黑色上，所以透明的圖示周圍會出現一圈黑。
選擇一張正方形圖片，最好是 512px 以上。
把這段貼進你的 <head>
縮到 16px 是分段縮小的，不是一次到位，這樣小圖示才會清楚而不是糊成一團。
一個網站實際需要的東西
只回給你一張 PNG 的產生器並沒有把事情做完。一個網站需要的是這一整堆麻煩的東西：
favicon.ico，同一個檔案裡包含 16、32、48px。就算你從來沒有連結過它，瀏覽器仍然會照 那個路徑去要。favicon-96x96.png，給高解析度顯示器。apple-touch-icon.png，180px，給 iOS 主畫面。android-chrome-192x192.png和 512x512，由 manifest 引用。site.webmanifest，裡面填好那兩個圖示。<link>和<meta>區塊，這是最常寫錯的部分。
全部打包成一個 zip 輸出。
這裡做對的兩件事
**Apple 圖示會填上背景。**Safari 會把 apple-touch-icon 疊在黑色上，所以透明背景的標誌到了
別人的主畫面上會帶著一圈黑。填上背景就是解法，而且預設是開啟的。
**縮圖是分段做的。**從 512px 一次 drawImage 到 16px，取樣太稀疏，結果就是一團糊。反覆對半
縮小則會把整張圖平均下來，而在 16px 時，這個差別就是「看得懂的符號」和「一團髒污」的差別。
為 16 像素而設計
一個 16px 的 favicon 大約就是 40 個實體像素的空白。完整的標誌不可能撐得住。
挑出最強的那一個元素——一個字母、一個字標、一個形狀——其餘全部捨棄。細的筆畫會消失，所以要加粗。 精細的細節會變成雜訊。而且要同時在淺色和深色的瀏覽器主題下檢查，因為透明背景上的深色標誌在深色 模式下會直接不見。
請在分頁上以實際大小檢視，而不是在螢幕上放到 100% 看。
沒有任何上傳
整組檔案都在這個頁面裡產生，zip 也是在記憶體裡組出來的。