使用步驟
- 選擇「文字 / emoji」輸入 1 到 3 個字元，或選擇「圖片」上傳 Logo（SVG 或至少 512 畫素的正方形 PNG 效果最好）。
- 選擇顏色和形狀：方形、圓角或圓形。
- 檢視 16、32、64、128 畫素下的預覽，小尺寸下是否還清楚可辨。
- 下載 ZIP，把檔案上傳到網站根目錄，把 HTML 貼上到 head 中。
引數說明
- favicon.ico
- 內含 16、32、48 畫素三個尺寸，用於瀏覽器標籤、收藏夾和 Windows 快捷方式。
- apple-touch-icon.png
- 180 × 180 畫素、不透明背景，使用者把網站新增到 iPhone、iPad 主螢幕時使用。
- icon-192.png / icon-512.png
- 由 site.webmanifest 引用，用於安卓主螢幕和可安裝的網頁應用。
- icon.svg
- 供新版瀏覽器使用的向量圖示，來源是文字或 SVG 檔案時才會生成。
需要新增的 HTML
把檔案上傳到網站根目錄後，在每個頁面的 head 中加入：
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">常見問題
這些檔案都必須要嗎？
根目錄放一個 favicon.ico 就能覆蓋所有瀏覽器。想在 iOS 主螢幕上顯示好看的圖示，加上 apple-touch-icon.png；需要安卓安裝、固定到主螢幕時，再加上 manifest 和 192/512 圖示。
為什麼 16 畫素的圖示很糊？
16 × 16 畫素放不下細節。請使用粗體字母或簡化後的 Logo 圖形，而不是帶文字的完整 Logo。
換了圖示但瀏覽器還是顯示舊的？
瀏覽器會長時間快取 favicon。強制重新整理頁面，或在連結後面加版本號，例如 /favicon.ico?v=2。
百度搜索結果裡的網站圖示怎麼設定？
百度會抓取網站的 favicon，要求一般是正方形、清晰、放在根目錄。上傳後可以在百度搜索資源平臺提交站點資訊，更新可能需要一段時間。
隱私說明
本工具完全在瀏覽器中執行，檔案和文字都在你的裝置上處理，不會上傳到我們的伺服器。