網站圖示產生器：一句話產生全尺寸 Favicon
一枚網站圖示要過三場考試：瀏覽器分頁裡的 16 像素、Google 行動搜尋結果裡 48 像素的倍數、iPhone 主畫面上的 180 像素。描述你想要的標誌，網站圖示產生器會把它變成每一個 favicon 尺寸，全部由一張 1024px 母版匯出。
網站圖示與 Favicon 範例
為真實網站與 Web 應用產生的標誌：扁平、線性、玻璃與極簡風格，從 512px 到 16px 瀏覽器分頁始終清晰。
在無限畫布上打磨你的網站圖示
Favicon 最終只有 16px，細節決定成敗。在畫布上產生、衍生變體、一鍵去背，匯出整套圖示前，先逐一對照真實分頁尺寸檢驗每個候選。
分支演化譜系 (Visual Lineage)
母版與不同 Remix 變體之間以貝塞爾曲線優雅連接，直觀對比不同材質、光照與色彩分支。
內建精修後處理 (Built-in Post-Processing)
一鍵智慧去背，支援 Apple App Store 提交規範的實色背景無縫填色與取色微調。
安全區邊距保護 (Safe Zone Protection)
即時滑塊微調內部安全留白，配合虛線指示圈，杜絕核心圖案在極端系統曲率下被意外裁切。
網站圖示提示詞範例
把下面任一條複製進網站圖示產生器，再把主體、風格和顏色換成你自己的。一條好的網站圖示提示詞要說清三件事：主體、風格與配色，以及這個標誌必須在 16 像素下仍然可辨。
極簡字母標
Minimal site icon for a developer blog, one bold letter P centered on a dark slate square, white mark with high contrast, readable at 16 px, flat style, no fine detail, no text besides the letter
親和的店鋪標誌
Site icon for a plant shop, simple monstera leaf glyph centered, deep green on a cream background, soft rounded shapes, flat minimalist style, crisp edges that survive tiny sizes
玻璃質感 SaaS favicon
Glassy site icon for a SaaS dashboard, abstract cube mark with a subtle highlight, blue gradient background, single clear silhouette, thick shapes, nothing that breaks below 32 px
三步做出一枚網站圖示
從一句話到一整套 favicon 檔案，尺寸由網站圖示產生器處理，全程不開啟影像編輯器。
- 1
描述這個標誌
用一句話寫清主體、風格與顏色，例如 "a flat compass mark, navy on white, site icon for a travel planner"。形狀描述越簡單，AI 越容易給出 favicon 需要的乾淨輪廓。
- 2
產生 1024 母版，先縮小檢查
以 1024x1024 產生後，先預覽 16 px 和 32 px 的效果再做判斷。分頁才是圖示的常住地；只在放大時好看的標誌，到了分頁列就失效。
- 3
匯出整套 favicon 檔案
一次匯出多尺寸 ICO、180px Apple 觸控圖示、192 與 512 manifest PNG 以及現代 WEBP，然後上傳到網站或放進儲存庫。
網站圖示尺寸與格式全表
瀏覽器、Apple、Android 與 Google 搜尋各自讀取不同的檔案，網站圖示產生器要把它們一次備齊。以下是每個 favicon 背後的現行數字。
| 使用情境 | 提交內容 | 格式規則 | 出現位置 |
|---|---|---|---|
| 瀏覽器分頁 | 16x16 與 32x32 px PNG | 正方形；只留一個字形、保持強對比，這是圖示要填滿的最小表面 | 分頁列與視窗標題；Chrome 在標準螢幕用 16 px，HiDPI 螢幕用 32 px |
| 傳統 favicon.ico | 一個容納 16、32、48 px 的多尺寸 ICO | 放在網站根目錄 /favicon.ico，不讀 link 標籤的工具也找得到 | 舊版瀏覽器、閱讀器以及直接請求根檔案的爬蟲 |
| Google 搜尋結果 | 正方形檔案，邊長為 48 px 的倍數：48、96、144 或 192 px | PNG、ICO、GIF、JPEG 或 SVG；必須可抓取、由首頁 head 宣告，並且能代表網站 | 行動端搜尋結果中站名旁邊；不符合尺寸或品牌規則的圖示會被移除 |
| Apple 觸控圖示 | 180x180 px PNG | 不帶透明的完整方形畫面；圓角由 iOS 套用，直接落在主畫面上 | iOS 主畫面捷徑與收藏書籤 |
| Web manifest（PWA） | 192x192 與 512x512 px PNG | 在 web manifest 中宣告；內容收進可遮罩安全區，Android 會依自己的形狀裁切 | Android 安裝彈窗、主畫面圖示與啟動畫面 |
| SVG 圖示 | 一張任意尺寸的正方形 SVG | 縮放到任何表面都清晰，還能帶 prefers-color-scheme 變體支援深色主題 | 現代 Firefox、Chrome 與 Safari 在宣告後會用它取代點陣 favicon |
尺寸對照 Google favicon 指南與目前瀏覽器行為核對，核對時間 2026 年 9 月。
描述標誌，在分頁尺寸下預覽，然後按上表把 ICO、Apple 觸控、manifest 與 WEBP 檔案一次匯出。
開啟網站圖示產生器一張母版，六種表面
上表裡的每個表面都從同一張母版讀取不同檔案。手寫程式碼的站點最多用三行 head 標籤接線：<link rel="icon">、<link rel="apple-touch-icon"> 和一條 manifest 連結。已經有 logo？免費的應用圖示縮放器能把它切成全套尺寸。
16px 分頁列
網站圖示要填滿的最難表面。1024px 母版要縮小 64 倍，細節豐富的 logo 會糊成一團。撐得住的標誌只有一個主體、至多兩種顏色，筆畫在一半像素消失後仍然可見。
favicon.ico 後備
一個從 1996 年沿用至今的格式。無視一切 link 標籤的瀏覽器、從不讀你 head 的爬蟲，仍會直接請求網站根目錄的 /favicon.ico。在那裡放一個多尺寸 ICO，是最便宜的相容性保險。
Google 的 48px 規則
行動端結果會在站名旁顯示 favicon，但只給通過指南的圖示：正方形、邊長為 48px 的倍數、首頁已宣告、可抓取、能代表品牌。只發 32px 檔案的網站，已經親眼看著自己的圖示消失。
CMS 上傳，無需程式碼
WordPress 把 favicon 叫做網站圖示：在網站識別裡上傳 512x512 方形圖，小尺寸由它自動裁出。Squarespace、Wix 和 Shopify 在設定裡留有 favicon 欄位，512px 匯出檔案原樣可用。
網站圖示實際會出現在哪裡
瀏覽器分頁是最顯眼的位置，但同一份檔案還會走得更遠：書籤列與稍後閱讀清單、瀏覽記錄頁、新分頁的常用網站格子、Google 行動端結果裡 URL 上方的位置、iOS 與 Android 的主畫面捷徑，以及已安裝 PWA 的任務切換器。每個情境對圖示的裁切和縮小方式都不同，這正是上表存在的原因。在分頁 16 px 下站得住的標誌，放到哪裡都站得住；反過來則不成立。
取得網站圖示的三種方式
網站圖示產生器和 favicon 轉換器解決的是問題的兩半：轉換器縮放你已有的畫面，AI 產生器先把畫面創造出來。
| AI 網站圖示產生器 | Favicon 轉換器 | 設計師 | |
|---|---|---|---|
| 起點 | 一條提示詞或一張參考圖 | 一張你上傳的現成方形 logo | 一份需求簡報，多輪審閱 |
| 產出 | 按需求產生的原創標誌 | 把現有畫面切成 favicon 檔案 | 手工調校的原創畫面 |
| 16 px 可讀性 | 反覆重新產生，直到標誌在分頁列站得住 | 取決於你最初那張 logo 的成色 | 夠好，前提是有時間迭代 |
| 整套匯出 | 從一張母版匯出多尺寸 ICO、Apple 觸控、manifest PNG 與 WEBP | 這正是大多數轉換器的全部功能 | 按合約約定交付 |
| 交付時間 | 每個概念不到一分鐘 | 幾分鐘 | 每輪數天 |
| 成本 | 免費點數起步，之後按批次消耗點數 | 免費 | 每個專案數百元起 |
比較基於典型工作流程，核實於 2026 年 9 月。
產生器替你處理的事
從第一條提示詞到能直接放進儲存庫或 CMS 欄位的檔案，網站圖示產生器包辦中間的一切。
一張 1024px 母版
高解析度只產生一次；所有 favicon 尺寸都從它縮小，16 px 下不會糊。
開箱即用的 favicon 匯出
多尺寸 ICO、180px Apple 觸控圖示、192/512 manifest PNG，無需開啟影像編輯器。
PNG、ICO 與 WEBP
各平台要什麼格式就匯什麼格式，包括更輕量的現代 WEBP。
透明或實底背景
給自訂頁首的網站匯透明 PNG，也給任何分頁列顏色和深色主題都壓得住的實底方案。
變體與歷史
在同一概念上反覆重新產生方向，每個版本都留檔，直到整組上線。
參考品牌現有素材
上傳現有 logo 牽引配色與形狀語言，讓 favicon 和品牌系統的其他部分保持一致。
在 16 像素下還能存活的網站圖示風格
風格決定設計縮到分頁尺寸後還剩下多少，值得在網站圖示產生器裡多試兩三種。扁平與極簡標誌最穩，因為效果不依賴漸層和細線。玻璃質感預設只要輪廓保持單一粗壯就能用。3D 風格在 Apple 觸控和 manifest 尺寸下很好看，輪廓清晰時在分頁裡也可接受。像素風則把小畫布的限制變成美學本身。先到圖示風格畫廊按圖示尺度比較：極簡、3D 與玻璃頁面都展示了真實標誌的效果。
設計一枚在分頁列站得住的網站圖示
多數 favicon 問題都出在錯誤的縮放比例上設計，四個習慣幾乎可以避免全部。圍繞單一主體構圖，兩個搶戲的形狀在 16 px 下只會變成雜訊。配色控制在兩三種，抗鋸齒抹掉細微對比的速度比你想的快。在淺色和深色瀏覽器主題下都測一遍，深色分頁列會吞掉深色標誌。還有，放棄文字：一個字母在 16 px 或許可行，一個單字永遠放不下。定稿前先在分頁尺寸下預覽，而不是匯出之後。
這套流程適合誰
一張來自網站圖示產生器的母版，匯出到每個會在站名旁顯示小方塊的地方。
WordPress 網站圖示
在網站識別設定裡上傳 512x512 匯出檔案；小尺寸和 link 標籤都由 WordPress 自動產生。
Squarespace、Wix 與 Shopify
每個平台都在網站設定裡留了 favicon 或瀏覽器圖示欄位，512 px 匯出檔案都能原樣使用。
手寫程式碼的網站
把匯出的檔案放進網站根目錄，加一次 link 標籤，瀏覽器、搜尋結果和捷徑就都覆蓋了。
PWA 與網頁應用
192 與 512 可遮罩匯出直接進 web manifest，同一張母版同時供應分頁圖示。
工作室與客戶專案
按專案保留歷史，客戶改版時整組重新產生，為每個網站匯出一致的圖示組。
副業專案與作品集
免費點數起步，一句提示詞產生完整 favicon 套件，當晚就能上線分頁圖示。
部落格
延伸閱讀
關於圖示設計、尺寸與工作流程的更長篇內容。
網站圖示常見問題
尺寸、格式、CMS 上傳，以及人們關於 favicon 真正會問的問題。
網站圖示應該做多大？
按 1024x1024 設計，向下匯出：16 與 32 px 給瀏覽器分頁，正方形 48 px 倍數給 Google 搜尋結果，180x180 給 Apple 觸控圖示，192 與 512 px 給 web manifest。網站圖示產生器從 1024 母版一次匯出以上全部，因為每個尺寸都是乾淨的縮小。
怎麼把網站圖示加到我的網站上？
把檔案上傳到網站根目錄，然後在首頁 head 裡宣告：用 <link rel="icon"> 指向 ICO、SVG 或 PNG，用 <link rel="apple-touch-icon"> 指向 180 px 檔案，發 PWA 尺寸再加一條 manifest 連結。用 WordPress、Squarespace、Wix 或 Shopify 的話，直接在網站設定裡上傳圖示即可，平台會替你寫好所有標籤。
為什麼我的 favicon 沒有出現在 Google 搜尋結果裡？
Google 只顯示符合其指南的 favicon：正方形檔案、邊長為 48 px 的倍數、由首頁 head 宣告、託管在穩定可抓取的 URL 上、不被 robots.txt 封鎖，並且能代表這個網站。只有 32 px 的圖示不符合尺寸規則。修復檔案後，還要等 Google 重新抓取，通常需要幾天。
網站圖示、favicon 和應用圖示有什麼區別？
favicon 和網站圖示是同一樣東西的兩個名字：在分頁、書籤和搜尋結果裡代表網站的小方塊。網站圖示只是 WordPress 的叫法。應用圖示則是主畫面和應用程式商店用的大尺寸素材，有自己的一套規格，詳見手機應用圖示指南。
favicon 可以用透明背景嗎？
可以，手寫網站的預設選擇就是透明 PNG 或 ICO。上線前先在深色瀏覽器主題下檢查一遍，深色標誌會消失在深色分頁列裡。Apple 觸控圖示請給不透明畫面；iOS 會把透明部分填成黑色。
ICO、PNG 還是 SVG：該用哪個格式？
目前最小集合是三個檔案：一個多尺寸 ICO 放在 /favicon.ico 作為後備，一張正方形 SVG 給現代瀏覽器，一張 180x180 PNG 給 Apple 裝置。如果網站會作為 PWA 安裝，再把 192 和 512 px PNG 加進 web manifest。超出這個範圍的都是冗餘。
怎麼更換 WordPress 的網站圖示？
進入外觀 → 自訂 → 網站識別，上傳一張至少 512x512 px 的方形圖；WordPress 會自動裁切並產生全部小尺寸和 link 標籤。在上方工具裡產生 512 px 檔案，上傳，快取清掉後分頁圖示就會更新。
產生的網站圖示版權歸誰？
歸你。你對創作的每枚圖示保留完整商業權利，服務條款另有約定的除外，涵蓋用在客戶網站和商業網站上的 favicon。