favicon 產生器
從標誌、字型圖示或字母組合建立完整的 favicon 套件——favicon.ico、現代 PNG、Apple 觸控圖示、PWA 圖示、Web 資訊清單以及 HTML 程式碼。
拖入標誌、選擇一個字型圖示或輸入字母組合——我們會產生現代網站所需的全部 favicon，從經典的 favicon.ico 到 Apple 觸控圖示、PWA 圖示，以及一段可直接貼上的 HTML 程式碼。
你的素材
將 PNG 拖到此處，或點擊上傳
建議使用透明 PNG · 也支援 JPG / WebP
背景
背景顏色
瀏覽器與 PWA
供瀏覽器介面和 PWA 資訊清單使用。
預覽
example.com
你的 favicon 套件已就緒
ZIP 下載已開始。請將其解壓縮到網站根目錄，並把 HTML 程式碼貼到你的 <head> 中。
關於 favicon 產生器
網站圖示產生器能從單一來源建立現代網站所需的每一種圖示:上傳 PNG 標誌、選擇字型圖示,或輸入姓名縮寫。套件包含經典的 favicon.ico(16、32 和 48 px)、現代 PNG 圖示、180 px 的 Apple 觸控圖示、192 和 512 px 的 PWA 圖示、site.webmanifest 檔案,以及 HTML head 程式碼片段。
樣式設定都在工具內完成:選擇背景色或保持透明、裁切成正方形、圓角方形或圓形、調整內距和素材大小,並設定瀏覽器介面和 PWA 資訊清單所使用的主題色。即時預覽會在真實情境中呈現您的圖示——16 px 的瀏覽器分頁、書籤、Apple 觸控圖磚和 PWA 圖示。
一切都在瀏覽器的畫布上渲染,點擊「產生」即可將整套組合成含 README 的 ZIP 檔。安裝只需兩個步驟:解壓縮到您的網站根目錄,並將提供的程式碼片段貼到您的 <head> 中。
如何使用 favicon 產生器
- 選擇您的來源:上傳 PNG 標誌、選擇字型圖示,或輸入姓名縮寫。
- 設定樣式——背景色或透明、形狀、內距和素材大小。
- 填寫網站名稱、簡稱和 PWA 資訊清單所需的主題色。
- 查看預覽:瀏覽器分頁、書籤、Apple 觸控和 PWA 情境。
- 點擊「產生網站圖示」,並將套件解壓縮到您的網站根目錄。
- 將套件中的 HTML 程式碼片段貼到頁面的 <head> 中。
常見問題
是的——包含 .ico、所有 PNG 尺寸、資訊清單和 HTML 程式碼片段在內的完整套件,產生與下載都是免費的。
含 16、32 和 48 px 圖層的 favicon.ico、現代 PNG 圖示、180 px 的 apple-touch-icon、192 和 512 px 的 PWA 圖示、一份 site.webmanifest、可直接貼上的 HTML 程式碼片段,以及包含安裝步驟的 README。
需要。瀏覽器和爬蟲仍然會將 /favicon.ico 當作備用選項來請求,較舊的用戶端也仍然依賴它。套件會將它與現代的 PNG 連結一併提供,確保每位訪客都能看到清晰的圖示。
將壓縮檔解壓縮到您的網站根目錄,讓檔案位於網域根層級,然後將提供的 HTML 程式碼片段貼到頁面的 <head> 中。ZIP 檔中的 README 也重複說明了這些步驟。
它會寫入資訊清單和 meta 標籤中,為行動裝置上的瀏覽器介面,以及已安裝 PWA 的啟動畫面和標題列上色,使其與您的品牌一致。
可以。輸入一到兩個字母的姓名縮寫,並選擇字體和顏色,或從字型圖示庫中選一個圖案——產生器會像處理上傳的標誌一樣,以每種尺寸渲染它。
熱門搜尋
favicon 產生器
favicon.ico 製作
線上建立 favicon
apple touch icon
pwa 圖示產生器
從 logo 產生 favicon
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。