為你的網站建立完整的 favicon 圖示組
這個工具會產生什麼
favicon 很少只是一個檔案。瀏覽器、手機與已安裝的 Web App 各自需要不同的解析度，所以網站需要的是一組小小的圖示，而非單一張圖片。這個工具從單一來源出發——上傳的圖片、一到兩個文字，或是一個表情符號——在 HTML canvas 上把它繪製成現代網站所需的每一種尺寸。
完成的圖示會以 PNG 檔回傳，並附上 site.webmanifest 以及一段把它們接進頁面的 HTML 片段，讓你不必猜哪個標籤對應哪個檔案。
三種起點
你可以上傳 PNG、JPG、SVG 或 WebP 圖片，讓工具縮放成每一種圖示尺寸。若要做文字標記，輸入一到兩個字元，再挑選字型與文字顏色即可——在標誌還沒做好時特別方便。表情符號這條路則可從精選清單挑選，或貼上任何你系統能顯示的表情符號。
無論選哪一種來源，套用的樣式設定都相同：背景顏色、透過 border-radius 滑桿調整的圓角，以及讓圖示不必落在實心方塊上的透明背景切換。
具體範例
假設你輸入字母 A、把背景設成藍色，再拉高 border-radius 讓邊角變柔和。預覽會同時更新所有尺寸，而下載會給你用於瀏覽器分頁與 Windows 磚的 favicon-16x16.png、favicon-32x32.png 與 favicon-48x48.png，用於 iOS 主畫面的 180×180 apple-touch-icon.png，以及用於 Android 與 PWA 安裝的 android-chrome-192x192.png 和 android-chrome-512x512.png——全都收在同一個 ZIP 裡。
尺寸、格式與 link 標籤
每一種尺寸都有用途：16×16 與 32×32 顯示在瀏覽器分頁，48×48 用於 Windows，180×180 是 Apple 的觸控圖示，192×192 與 512×512 則供 Android 與 Web App 的 manifest 使用。產生的片段會以 <link rel="icon">、<link rel="apple-touch-icon"> 與 <link rel="manifest"> 標籤，加上一個 theme-color meta 來宣告它們，可直接貼進你的 <head>。
輸出是 PNG，而不是舊式多解析度的 .ico 檔，現今的瀏覽器都能透過這些 link 標籤接受 PNG favicon。若想讓圓角圖示融入分頁列，開啟透明背景，邊角就會保持透明，而不是露出有顏色的方塊。