網站圖標產生器

歡迎使用網站圖標產生器，這是一個用於從任何圖像建立專業網站圖標和應用程式圖標的綜合工具。無論您是需要用於瀏覽器分頁的簡單 .ico 檔案，還是需要用於支援 PWA (漸進式 Web 應用程式) 的全套圖標，此工具都能一鍵生成您需要的所有尺寸。

什麼是網站圖標 (Favicon)？

網站圖標（Favicon，「favorite icon」的縮寫）是與您的網站關聯的小圖標。它出現在多個地方：

• 瀏覽器分頁： 頁面標題旁邊的小圖標
• 書籤列： 當使用者將您的網站加入書籤時
• 瀏覽記錄： 在歷史記錄下拉選單中
• 網址列： 在某些瀏覽器的 URL 旁邊
• 主畫面： 當使用者將您的網站添加到其行動裝置主畫面時
• 搜尋結果： 某些搜尋引擎會在結果中顯示網站圖標

精心設計的網站圖標可以提高品牌辨識度，使您的網站更加專業，並幫助使用者在眾多打開的分頁中快速識別您的網站。

圖標尺寸說明

ICO 檔案尺寸 (favicon.ico)

傳統的 .ico 格式可以在單個檔案中包含多個尺寸。我們的工具生成：

Apple Touch 圖標 (180x180)

當 iOS 使用者將您的網站添加到其主畫面時，會使用此圖標。Apple 建議使用 180x180 畫素，以便在 Retina 裝置上獲得最佳顯示效果。這與 .ico 檔案分開，應儲存為 apple-touch-icon.png。

Android Chrome 圖標 (192x192 和 512x512)

現代 Android 裝置和 Chrome 支援漸進式 Web 應用程式 (PWA)。192x192 圖標用於主畫面快捷方式，而 512x512 用於應用程式啟動時的啟動畫面。這些在 site.webmanifest 檔案中被引用。

如何使用此工具

1. 上傳您的圖像： 拖放或點擊以選擇 PNG、JPG 或 WebP 圖像。為了獲得最佳效果，請使用至少 512x512 畫素的正方形圖像。具有透明背景的 PNG 是理想選擇。
2. 選擇尺寸： 選擇要生成的圖標尺寸。我們建議至少為 ICO 檔案選擇 16x16、32x32、48x48，此外還需為 Apple 裝置選擇 180x180。
3. 設置背景顏色： 如果您的圖像具有透明度且您想要純色背景，請選擇一種顏色。否則，請保持其透明。
4. 生成： 點擊按鈕以建立您的所有網站圖標。預覽每個尺寸以確保品質。
5. 下載： 下載單個檔案或包含所有圖標和代碼片段的完整 ZIP 壓縮包。

網站圖標設計最佳實踐

• 保持簡單： 網站圖標非常微小 - 具有精細細節的複雜標誌在 16x16 畫素下將無法閱讀。請使用簡化版的標誌或獨特的符號。
• 使用對比： 確保您的圖標在淺色和深色背景（瀏覽器主題各異）下都能脫穎而出。
• 小尺寸測試： 始終以 16x16 預覽您的網站圖標，以確保其可識別。
• 考慮透明度： PNG 網站圖標可以具有透明背景，這在現代瀏覽器中看起來更乾淨。
• 正方形格式： 始終從完美的正方形來源圖像開始，以避免變形。

實施指南

基本 HTML 實施

生成網站圖標後，將此代碼添加到 HTML 的 <head> 部分：

<!-- 網站圖標 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch 圖標 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

PWA Manifest 檔案

為了支援漸進式 Web 應用程式，請包含一個引用您的 Android 圖標的 site.webmanifest 檔案。

常見問題

什麼是網站圖標，為什麼我需要它？

網站圖標（Favicon，favorite icon 的縮寫）是出現在瀏覽器分頁、書籤和網址列中的小圖標。它能幫助使用者在多個打開的分頁中快速識別您的網站。專業的網站圖標可提高品牌辨識度和使用者體驗。現代網站需要為不同的裝置和瀏覽器提供多種網站圖標尺寸。

我可以使用哪些圖像格式來建立網站圖標？

您可以上傳 PNG、JPG、JPEG、GIF 或 WebP 圖像。為了獲得最佳效果，請使用 512x512 畫素或更大且具有透明背景的 PNG 圖像。該工具將在保持品質的同時，自動將您的圖像調整為所有選定的網站圖標尺寸。

我應該生成哪些網站圖標尺寸？

為了獲得完整的瀏覽器覆蓋，我們建議：16x16（瀏覽器分頁）、32x32（Windows 工作列）、48x48（Windows 桌面）、180x180（iOS 的 Apple Touch 圖標）、192x192 和 512x512（Android Chrome）。64x64、128x128 和 256x256 尺寸是可選的，但對高 DPI 顯示器很有用。

我上傳的圖像會儲存在您的伺服器上嗎？

所有圖像處理都在網站圖標生成期間在我們的伺服器上安全進行，但我們不會永久儲存您的圖像。處理完成後，原始圖像會被丟棄。只有生成的網站圖標檔案會傳回給您進行下載。

如何將生成的網站圖標添加到我的網站？

生成網站圖標後：1) 下載包含所有圖標檔案的 ZIP 檔案，2) 將檔案上傳到您網站的根目錄，3) 將提供的 HTML 代碼片段複製到您網站的 <head> 部分。對於 PWA 支援，還要包含 site.webmanifest 檔案。

其他資源

• Web App Manifest - MDN
• 網站圖標 - 維基百科