Favicon 產生器

功能簡介

Favicon 產生器能把一個字母、一個 Emoji 或你的 Logo 做成現代網站需要的所有圖示。它會依各個尺寸算繪圖示、打包 favicon.ico、寫出 Web App Manifest，並提供可以貼進頁面 <head> 的 <link> 標籤。所有檔案一個 ZIP 就能下載。

從文字開始是取得乾淨圖示最快的方法：輸入一到三個字元或一個 Emoji，選擇顏色、字型和形狀（方形、圓角或圓形）即可。文字圖示還會額外產生可縮放的 favicon.svg，在任何尺寸和高解析度螢幕上都很清晰。

使用方法

1. 選擇 文字 或 圖片 作為來源。若選圖片，按 選擇圖片… 並挑一張正方形的 PNG、SVG 或 JPG。
2. 設定 形狀；開啟 填滿背景 會把圖示放在彩色底塊上，關閉則保持透明。
3. 輸入 網站名稱：別人把網站加入手機主畫面時，它就是圖示下方顯示的名字，會寫進 site.webmanifest（Android）和 apple-mobile-web-app-title 標籤（iOS）。接著輸入你要上傳檔案的 圖示資料夾，通常是 /。
4. 檢查預覽：16 px 的圖示就是大家在瀏覽器分頁上看到的樣子。
5. 按 下載 ZIP，把檔案上傳到網站，再把 HTML 貼到 <head> 裡。

範例

預設設定會產生這些標籤：

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

小提示

• 瀏覽器會積極快取 favicon。更換圖示後，請用無痕視窗開啟頁面才能看到變化。
• iOS 會忽略 Apple 觸控圖示的透明度並填上黑色，所以想要乾淨的主畫面圖示，請保持背景填滿。