Favicon 產生器

把任何標誌或圖片變成完整的 favicon 套件:多尺寸的 favicon.ico、apple-touch-icon、Android/網頁 App 圖示,還有可直接貼上的 HTML 程式碼片段。選擇方形、圓角或圓形,加上內距或背景顏色,再把整包打包成 ZIP 下載。全部都在你的瀏覽器本機產生——你的圖片絕不會被上傳。

隱私優先:每張圖片都在你的瀏覽器中本機處理。任何內容都不會上傳、儲存或傳輸到任何伺服器。

PixelVault 的 favicon 產生器能把任何圖片變成完整的網站與 App 圖示套件,而且完全不必上傳任何東西。多數「favicon 產生器」網站都要你先把標誌送到它們的伺服器,才肯還你一個圖示。在這裡,每一個檔案——多解析度的 favicon.ico、PNG 圖示與 manifest——都直接在你的瀏覽器裡產生,你的品牌圖稿絕不會離開裝置。

現代網站需要的不只一個圖示。瀏覽器會讀取小尺寸的 favicon.ico 用於網址列與分頁,iOS 需要 180×180 的 apple-touch-icon 放到主畫面,Android 與 PWA 則使用 web manifest 所指向的 192 與 512px PNG。PixelVault 從單一來源圖片一次全部建好,並給你一段可直接貼上的 HTML 程式碼片段,接線只需要幾秒鐘。

圖示的外觀由你掌控。維持單純的方形、把邊角變圓,或裁成圓形;加上內距,讓文字標誌不會擠到邊緣;並選擇透明或純色背景。即時預覽會以真實的 favicon 尺寸呈現結果——包括模擬的瀏覽器分頁——所以下載前你就確切知道訪客會看到什麼。

運作原理

當你加入圖片時,瀏覽器會把它解碼到記憶體中,PixelVault 再依每個圖示尺寸把它重新繪製到方形 Canvas 上,並套用你選擇的形狀遮罩、內距與背景。每個 Canvas 都以瀏覽器內建的編碼器編碼成 PNG,而 16、32 與 48px 的 PNG 會被封裝成單一的 favicon.ico(也就是廣受支援的 PNG-in-ICO 容器)。SVG 標誌會先在本機以高解析度點陣化,因此圖示始終保持銳利。

本機處理為何重要

在本機產生圖示,代表你的標誌——通常還是尚未發表的品牌識別——絕不會被第三方服務傳輸、儲存或記錄。它也是即時的:沒有上傳、沒有排隊、也不用等下載來回,而且頁面載入後即使離線也能繼續運作。你下載到的,就是你的瀏覽器產出的東西,一分不多。

支援的格式

  • ICO — 多解析度的 favicon.ico(16/32/48px),用於分頁與網址列。
  • PNG — apple-touch-icon(180px)與 Android/PWA 圖示(192 與 512px)。
  • SVG — 僅供輸入——向量標誌會在本機點陣化,產出最銳利的圖示。
  • JPG / WebP — 與 PNG 一樣可作為來源圖片。

常見用途

  • 為新網站或到達頁面建立 favicon.ico 與 App 圖示。
  • 把 PNG 或 SVG 標誌轉換成正規的多尺寸 ICO 檔案。
  • 為 PWA 產生 apple-touch-icon 與 web manifest 圖示。
  • 更新品牌的 favicon 套件,而不必把標誌交給線上服務。

常見問題

製作 favicon 時我的圖片會被上傳嗎?
不會。favicon.ico、PNG 圖示與 manifest 全都透過 Canvas API 在你的瀏覽器本機產生。你的圖片永遠不會離開裝置。
我會拿到哪些尺寸與檔案?
一個多解析度的 favicon.ico(16、32 與 48px)、16、32、48、180(apple-touch-icon)、192 與 512px 的 PNG 圖示、一個 site.webmanifest,以及一段可貼進 <head> 的 HTML 程式碼片段。
我可以把 PNG 或 SVG 轉成 ICO 嗎?
可以。丟入 PNG、JPG、SVG 或 WebP,就能下載真正的 favicon.ico。SVG 標誌會先在本機以高解析度點陣化。
什麼樣的圖片效果最好?
簡潔、高對比的方形標誌。非方形的圖片會置中裁切以符合比例;你可以用內距與形狀控制項,把它框成你想要的樣子。
我要如何安裝 favicon?
把套件解壓縮到網站的根目錄,並把提供的 HTML 程式碼片段貼進頁面的 <head>。大多數瀏覽器都會自動抓取 favicon.ico。