跳至內容
Monu Tools

Favicon 產生器

將任何圖片轉換為完整的 favicon 圖示組:.ico 檔案、多種 PNG 尺寸、Apple touch icon 以及 web manifest,全部在瀏覽器中產生。

如何使用 Favicon 產生器

  1. 01

    上傳一張正方形圖片。簡單的 logo 或圖示效果最佳,圖片會在你的瀏覽器中處理。

  2. 02

    可選擇背景顏色並輸入網站名稱,用於 web manifest。

  3. 03

    下載 ZIP 檔案,並將 HTML 程式碼片段貼到頁面 head 中。

什麼是網站圖示

圖示是瀏覽器標籤、書籤和手機主畫面上顯示的小圖示。這是一個讓網站看起來完整且易於識別的微小細節,現代瀏覽器需要它的多個版本。

為什麼一張圖片不夠

這就是問題所在:一張圖片已經不夠了。你需要用於經典瀏覽器的多尺寸 .ico、單獨的 PNG 尺寸、用於 iOS 主螢幕的 Apple 觸控圖示、用於 Android 的較大 PNG 以及一個 Web 清單(如果該網站應該可安裝)。

該產生器從單個影像構建整個集合,包括真正的多尺寸 .ico,並為你提供準確的 HTML 片段以放入頁面頭部,因此你無需組裝或手寫任何內容。

要上傳什麼圖片

為了獲得最佳結果,請上傳至少 512 像素的方形影像,最好是簡單的標誌或標記,而不是詳細的照片,因為圖示通常顯示得非常小。非方形影像居中並填充為方形,因此邊緣附近的細節可能最終出現在邊緣中。

背景顏色和網站名稱

你可以選擇設定背景顏色和網站名稱。當有人將網站新增至主畫面時,網站名稱將進入所使用的 Web 清單。

在你的瀏覽器中執行

一切都透過 Canvas API 在你的瀏覽器本機執行,因此你的影像永遠不會上傳。你下載包含所有檔案和要貼上的程式碼片段的 ZIP。

常見問題

favicon 套件包含哪些內容?

包含 16、32 和 48 px 的 favicon.ico,單獨的 16 和 32 px PNG 檔案,180 px 的 Apple touch icon,用於 Android 的 192 和 512 px PNG 檔案,一個 site.webmanifest,以及可貼到頁面 head 的 HTML 程式碼片段。

我應該上傳什麼樣的圖片?

至少 512 px 的正方形圖片效果最佳,最好是簡單的 logo 或標誌。非正方形圖片會被置中並填充為正方形,因此靠近邊緣的細節可能會落入留白中。

我的圖片會被上傳嗎?

不會。圖示使用 Canvas API 在你的瀏覽器中產生,因此你的圖片絕不會離開你的裝置。

來源

報告問題