開發工具 · FREE ONLINE TOOL

Favicon 網站圖示產生器

本機上傳PNG、JPEG、WebP或輸入文字,等比例製作多尺寸PNG與含16/32/48px的真正ICO,預覽透明圖示並複製網站安裝程式碼。

圖片在本機處理,不上傳、不修改本站圖示

使用系統字型,不載入外部字型;太寬的文字會自動縮小以避免裁切。Emoji與中文字外觀可能因作業系統而異,16px不適合太多細節。

先看小尺寸,再下載

預覽只是瀏覽器分頁模擬,不會更換 ToolPiyo 自己的 favicon。

我的網站 — 分頁模擬

淺色背景 · 192px

深色背景 · 192px

實際16×16  32×32

下載本機產生的檔案

每個PNG是實際像素尺寸。ICO使用三尺寸32-bit BGRA DIB、透明Alpha與AND遮罩,不是將PNG改副檔名。沒有ZIP或PWA manifest下載。

安裝至你的網站

下載後將圖示放在你的網站根目錄,例如Astro的public目錄;將上面的link標籤放進網站head。若放其他目錄,請一起調整href。icon-512.png供其他需要512px的情境使用,不會自動產生可安裝PWA。

從長方形圖片製作正方形favicon

例如400×200圖片放到192×192畫布,等比例置中會是192×96、上下各48px留白;填滿模式會裁掉左右內容,兩者都不拉伸。小於512px的來源放大到icon-512.png可能模糊,下載前請特別檢查16px細節。

為什麼更換圖示後沒有立即出現?

先直接開啟你網站上的/favicon.ico與PNG確認回應、檔名與路徑,再用無痕視窗或清除該網站快取測試。網站與CDN也可能保留舊檔。Google搜尋會自行重新抓取與判斷,不能保證立即顯示;圖示應可抓取且維持穩定網址。可參考Google官方搜尋圖示說明。

HOW TO USE

簡單幾步,就完成。

  1. 選文字或本機圖片,調整等比置中、裁切、背景與文字大小。
  2. 產生圖示後檢查16px及淺深色預覽,修改設定會使舊下載失效。
  3. 逐一下載需要的PNG與ICO,放到你的網站根目錄並複製head標籤。

生活裡的這些時刻,都用得到

替自己的網站準備分頁、Apple觸控與一般應用圖示,不更動ToolPiyo自己的favicon、不需要圖片上傳服務。

GOOD TO KNOW

你可能還想知道

ICO只是PNG改副檔名嗎?

不是。實作ICO header、三個ICONDIRENTRY及16/32/48px的32-bit DIB圖像、Alpha與AND遮罩,PNG另外以Canvas實際輸出各像素尺寸。

長方形圖片會變形嗎?

不會。等比置中保留留白,填滿會置中裁切,透明留白會強制使用透明背景。小來源放大可能模糊。

文字和Emoji在每台裝置都一樣嗎?

不一定。使用系統字型,不下載外部字型,Emoji與中文字依作業系統外觀可能不同。建議少量簡單文字並核對16px預覽。

Google會立刻顯示新圖示嗎?

不保證。先核對檔案路徑、網站與瀏覽器快取,再等待搜尋引擎重新抓取及判斷。沒有PWA manifest或ZIP功能,不影響ToolPiyo本身的圖示。