Favicon 產生器

什麼是Favicon 產生器？

Favicon 是顯示在瀏覽器分頁、書籤、搜尋結果和手機主畫面上的網站小圖示。沒有 favicon 時，分頁會顯示空白圖示，讓網站看起來像沒做完，Google 搜尋結果中也會顯示預設的地球圖示。

這個工具只要一張標誌圖片或一個文字・表情符號，就能做出各種裝置所需尺寸的 favicon 組合。像 16px 這樣非常小的尺寸，不是把大圖縮小，而是直接以該尺寸繪製，所以更清晰。所有操作都在瀏覽器內完成。

使用方法

1. 選擇文字・表情符號或圖片。文字以 1～2 個字、圖片以正方形標誌最合適。
2. 調整背景顏色（或透明）、圓角和內距。可以在右側（手機在下方）的預覽中，以實際分頁大小確認。
3. 按全部下載（ZIP）取得檔案組合，解壓縮後上傳到網站根目錄。
4. 複製下方的 HTML 程式碼，貼到每個頁面的 <head> 內。

ZIP 內含的檔案

iPhone 主畫面圖示不支援透明背景，透明處會顯示成黑色，因此即使選擇透明，apple-touch-icon.png 也會以白色背景儲存。

做出小尺寸也清楚的 favicon

• 在 16px 的分頁圖示中，細線和小字都會糊掉。比起完整標誌，符號或一個首字更容易辨識。
• 加大背景與文字的明暗對比。為了讓深色模式的分頁也看得清楚，有色背景比透明背景更保險。
• 換了 favicon 卻還是顯示舊的，是瀏覽器快取的關係。請強制重新整理（Ctrl+Shift+R），或在檔名後加上 ?v=2。