使用方式

選擇「字母」並輸入一或兩個字元，再設定顏色；或選擇「圖片」並挑選標誌（建議使用正方形圖片，至少 512 px）。
檢查各種尺寸的預覽，尤其是會顯示在瀏覽器分頁中的 16 和 32 px 圖示。
下載 ZIP，並將裡面的檔案上傳至網站根目錄。
將 HTML 標籤貼到網頁的 head 區段；如有需要，也請修改 site.webmanifest 中的名稱。

運作方式

瀏覽器和裝置會在不同位置尋找圖示。此工具產生的圖示組涵蓋常見情況：favicon.ico 內含 16、32 和 48 px 圖片，適用於瀏覽器分頁、書籤，以及會自動要求 /favicon.ico 的舊版軟體；由 link 標籤引用的 16 和 32 px PNG 檔案；使用者將網站加入 iPhone 或 iPad 主畫面時會用到的 180 × 180 apple-touch-icon；以及由 site.webmanifest 引用、適用於 Android 主畫面和可安裝網頁應用程式的 192 和 512 px 圖示。

favicon.ico 檔案會在 ICO 容器中儲存 PNG 圖片，目前所有瀏覽器及 Windows Vista 或更新版本都能讀取。ICO 和 ZIP 檔案皆由此頁面的程式碼組成，不會傳送至伺服器。

小尺寸圖示需要簡單的設計：在 16 × 16 像素下，細線和小字會消失，因此粗體字母或簡化的標誌圖案會比帶有文字的完整標誌更清晰。圖片會經過多次高品質縮小處理。apple-touch-icon 一律會加上不透明的背景色，因為 iOS 會將透明區域填成黑色；iOS 也會自行將圖示裁切成圓角。

上傳新圖示後，瀏覽器可能會因為積極快取而繼續顯示舊的 favicon 一段時間。強制重新整理，或直接開啟 /favicon.ico，通常就能解決。

範例

新專案的字母圖示

在深綠色圓角方形底上輸入白色字母「TG」，就能製作出簡潔的圖示，即使在瀏覽器分頁的 16 × 16 px 尺寸下也清晰易讀，無須設計標誌。

使用現有標誌製作圖示

上傳一張背景透明的 1024 × 1024 PNG 標誌，並選擇「完整顯示圖片」，即可產生透明的分頁圖示，以及以品牌色為背景的 apple-touch-icon。

寬版標誌

對於 1200 × 300 的文字標誌，選擇「裁切中央」只會保留中間的文字。選擇「完整顯示圖片」則能保留全部內容，但圖案會變得很小；通常使用獨立的方形標誌圖案會更好看。

常見問題

我還需要 favicon.ico 嗎？

仍然有用。有些瀏覽器、Feed 閱讀器和工具會直接向網站根目錄要求 /favicon.ico，即使沒有 link 標籤也一樣。現代瀏覽器也會使用 HTML 中引用的 PNG 圖示。

檔案要放在哪裡？

請將檔案上傳到網站根目錄，也就是與首頁相同的資料夾，這樣 /favicon.ico 和 HTML 中的其他路徑才能正常運作。如果使用子資料夾，請修改 link 標籤和 site.webmanifest 中的路徑。

為什麼還是顯示舊的 favicon？

瀏覽器會分開快取 favicon，而且快取時間很長。請嘗試強制重新整理、在新分頁開啟 /favicon.ico，或使用無痕視窗查看。重新命名檔案（例如 favicon-v2.ico）也能強制重新載入。

這會建立 SVG favicon 嗎？

不會。此工具會建立 PNG 和 ICO 檔案，適用於各種環境。如果您已有 SVG 標誌，也可以另外使用 type 為 image/svg+xml 的 link 標籤自行加入。

隱私權

圖示、ICO 檔案和 ZIP 都會在您的瀏覽器中產生。您的圖片和文字不會上傳、儲存或納入分析資料。