FAVICON · DETECT · GENERATE

網站圖示，一站處理。

偵測網站現有 Favicon、取得原始圖示，或直接用文字、PNG / JPG 圖片產生一套可部署的網站圖示。全站以繁體中文操作，不需安裝額外軟體。

偵測網站 Favicon

輸入網址後，由 Cloudflare Pages Functions 解析 HTML、Manifest 與常見網站圖示路徑。

即時偵測結果

優先找網站自己宣告且實際可以讀取的圖示。

尚未偵測

◎

輸入網址後即可開始偵測 部署至 Cloudflare Pages 後，後端 Function 會替你跨網域讀取公開網站資訊。

Favicon 取得

選擇偵測結果後，可下載原始檔、轉成指定尺寸 PNG、複製原始網址或 HTML。

等待偵測

Favicon 預覽

選擇圖示 PNG 輸出尺寸

原始 Favicon URL

HTML 標籤

尚未選擇圖示

下載與 PNG 轉檔會透過本站 /api/icon 取得圖片。第三方網站圖示的權利仍屬原權利人。

部署檢查

快速確認 Cloudflare Pages Functions 是否有正常部署。

尚未檢查。正式部署後應可存取 /api/favicon?url=https://example.com。

TEXT TO FAVICON

文字轉 Favicon

輸入 1–2 個字最清楚，也支援中英文、數字與 Emoji。所有圖示都在你的瀏覽器內即時產生。

純前端產生

圖示文字建議 1–2 個字；最多 4 個字元。字體字重

文字大小 68%

文字顏色

背景顏色

快速配色

背景形狀 透明背景 只保留文字

內距 10% 文字陰影 在較大的圖示尺寸增加層次

字 文字直接變圖示

不用準備 Logo 圖檔，輸入文字就能快速做出乾淨的網站圖示。

調 自由調整樣式

字體、字重、顏色、背景形狀、透明背景與內距都可以自行設定。

即 即時預覽

大型圖示、32px 與瀏覽器分頁效果同步更新，方便確認小尺寸可讀性。

產生後如何放到網站？

下載 ZIP、解壓縮到網站根目錄，再把下方程式碼放進網站的 <head>。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

favicon.ico傳統瀏覽器與相容性用途，內含 16 / 32 / 48px。

PNG 圖示適合現代瀏覽器、捷徑與不同高解析尺寸。

Apple Touch Icon180 × 180，適合加入 iPhone / iPad 主畫面。

Web App Manifest包含 192 × 192 與 512 × 512，適合 PWA 與 Android。

IMAGE TO FAVICON

圖片轉 Favicon

上傳 PNG、JPG 或 JPEG，直接裁切與縮放成網站圖示。圖片只在瀏覽器本機處理，不會上傳到伺服器。

本機處理

＋ 選擇圖片，或拖曳到這裡

支援 PNG / JPG / JPEG，建議使用正方形、邊長 512px 以上的圖片。檔案上限 20MB。

尚未選擇圖片 —

圖片填滿方式輸出形狀

圖片內距 8%

背景顏色

透明背景 PNG 可保留透明效果

提示：如果原圖是橫式 Logo，建議使用「完整顯示」並保留一些內距；如果原圖已經是正方形圖示，可用「填滿裁切」。

FAVICON 基礎說明

Favicon 是什麼？為什麼網站需要它？

如果你第一次接觸 Favicon，這裡整理最常用的概念與安裝方式。

Favicon 就是「網站的小圖示」

Favicon 是 Favorite Icon 的簡稱，通常會顯示在瀏覽器分頁標題左側、書籤、瀏覽紀錄、手機主畫面捷徑，以及部分搜尋結果或系統介面中。

它不是網站主 Logo 的替代品，而是 Logo 的「超小尺寸版本」。因為實際顯示常只有 16×16 或 32×32 像素，所以圖形需要簡單、對比清楚，太細的文字或複雜圖案在縮小後通常看不清楚。

現在的網站通常不只準備一個 favicon.ico，還會搭配 PNG、Apple Touch Icon 與 Web App Manifest，讓不同瀏覽器、iPhone / iPad、Android 與 PWA 都能取得合適尺寸。

16 × 16 / 32 × 32

最常見的瀏覽器分頁與書籤尺寸。圖示在這麼小的尺寸下仍應該能辨識。

180 × 180

Apple Touch Icon 常用尺寸，當 iPhone 或 iPad 使用者把網站加入主畫面時使用。

192 × 192 / 512 × 512

Android、PWA 與高解析度環境常用，通常會寫入 site.webmanifest。

這個工具怎麼用？

已有網站：先偵測 輸入網址，確認網站目前設定了哪些 Favicon，以及真正的圖示檔案放在哪裡。

沒有圖示：文字或圖片產生 可以輸入品牌縮寫做圖示，或上傳自己的 PNG / JPG Logo 轉成完整尺寸。

下載後放進網站 將 ZIP 解壓縮，把圖示檔放到網站根目錄，再把工具提供的 <link> 標籤加進頁面 <head>。

一定要用 .ico 嗎？

不一定。現代瀏覽器支援 PNG、SVG 等格式，但保留 favicon.ico 仍有助於相容傳統瀏覽器與部分工具。

為什麼換了 Favicon 還看到舊圖？

瀏覽器、CDN 與網站快取都可能保存舊圖示。更新後可以清除網站快取、Cloudflare 快取與瀏覽器快取再確認。

WordPress 也需要自己放檔案嗎？

不一定。WordPress 可在「網站圖示 / Site Icon」設定圖片；這個工具則適合檢查實際輸出結果、取得圖示，或替純 HTML 網站準備完整圖示包。

圖片轉換會上傳我的 Logo 嗎？

不會。圖片轉 Favicon 與文字轉 Favicon 都在瀏覽器端以 Canvas 處理，只有網站 Favicon 偵測功能會透過 Cloudflare Pages Functions 讀取你指定的公開網址。

使用與權利說明

本工具不內建第三方品牌 Logo；文字產生功能完全由使用者輸入內容在瀏覽器端建立。

網站偵測功能僅依使用者指定網址，即時讀取公開網站自行提供的 Favicon。第三方網站圖示可能受著作權、商標權或其他權利保護，下載不代表取得使用或散布授權。

文字轉與圖片轉 Favicon 都在瀏覽器本機處理。本站介面使用 Noto Sans TC 網頁字型；使用者仍應確認自己輸入的文字、品牌名稱、商標與上傳圖片具有適當使用權。