TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Iconpie 連不上怎麼辦？3 個免費圖標產生器替代與安裝教學
Iconpie 圖標產生器已無法連線。本文回顧它的功能定位，整理 RealFaviconGenerator、Favicon.io 等 3 個免費替代工具，加上各平台圖標尺寸對照與 WordPress 安裝 Favicon 的完整步驟。
用 AI 摘要這篇文章：
Iconpie 曾是快速產生全平台圖標的免費線上工具，但截至 2026 年 9 月，iconpie.com 已無法連線，工具實質停擺。如果你現在需要幫網站產生 Favicon、iOS 和 Android 圖標，本文整理了 Iconpie 的定位回顧、目前仍可運作的替代方案（RealFaviconGenerator、Favicon.io），以及把圖標安裝到 WordPress 網站的完整流程。
工具名稱：Iconpie | All Your Icons Easy As Pie
官方網址：https://iconpie.com/
目前狀態：網域已無法解析，工具停止運作（2026 年 9 月複查）
一張圖自動長出 50 種尺寸：Iconpie 解決的其實是規格轉換，不是設計
Iconpie 的核心功能很單純：上傳一張正方形圖片，它就自動幫你裁切、縮放，一次產生超過 50 種尺寸的圖標檔案，涵蓋 Web Favicon、iOS App Icons 和 Android App Icons 三大平台。不需要註冊帳號，不用填 Email，開瀏覽器就能用。官方標語是「All Your Icons Easy As Pie」，實際操作從上傳到下載確實不用三分鐘。
Iconpie 不是讓你「設計」圖標的網站，而是把已有的 LOGO 圖片快速轉換成各平台規格。比較順暢的工作流程是：先用 DesignEvo 或 Logaster 把 LOGO 做好，再拿到圖標產生器來批次處理。
不過 Internet Archive 的紀錄顯示，iconpie.com 最後一次成功抓取是在 2022 年 9 月。截至 2026 年 9 月複查，該網域仍然沒有任何 DNS 解析紀錄，完全無法連線。如果你還在找 Iconpie，建議直接改用底下的替代方案。
為什麼每個網站都需要 Favicon
Favicon（Favorite Icon）就是瀏覽器分頁上那個小小的網站圖示。沒有 Favicon 的網站會顯示預設的灰色地球圖示，在一排有圖標的分頁裡特別突兀，而且不是好的那種突兀。
它的影響比你想像的大。Google 從 2019 年開始在桌面版搜尋結果顯示 Favicon，這代表使用者在決定點擊前，Favicon 是他們接收到的第一個品牌元素。一個有清晰 Favicon 的搜尋結果，跟什麼都沒有的空白結果擺在一起，點擊率會有明顯差距。雖然 SEO 排名因素中 Favicon 不是直接項目，但它透過提升點擊率、品牌辨識度和回訪率，間接影響網站的整體表現。
行動裝置上的角色更重要。當使用者把網站「加入主畫面」時，顯示在桌面上的圖示就是從 apple-touch-icon 和 manifest icon 抓取。如果沒有正確設定，iOS 會用網頁截圖當圖示，效果通常很差。這跟 On-page SEO 優化 強調的原則一樣：每個影響使用者體驗的細節都值得做好。
各平台圖標尺寸需求對照表
不同平台和裝置對圖標尺寸的要求差異很大，這也是為什麼手動處理會這麼耗時。底下整理所有常見尺寸需求。
| 平台 | 用途 | 尺寸（px） | 格式 |
|---|---|---|---|
| Web | 瀏覽器分頁 Favicon | 16×16, 32×32, 48×48 | .ico / .png |
| Web | Chrome 工作列捷徑 | 192×192, 512×512 | .png |
| iOS | iPhone / iPod Touch | 120×120 | .png |
| iOS | iPad / iPad Pro | 152×152, 167×167, 180×180 | .png |
| iOS | Spotlight 搜尋結果 | 58×58, 80×80, 87×87 | .png |
| Android | mdpi ~ xxxhdpi | 36×36 ~ 192×192 | .png |
| PWA | manifest icon | 192×192, 512×512 | .png |
如果要手動產生每一種尺寸，至少要處理 15 到 20 個不同的檔案。這也是為什麼自動化圖標產生工具這麼實用。產生之後如果檔案太大，可以搭配 Imagify 或 ShortPixel 這類圖片壓縮工具來縮小體積，特別是 WebP 格式 在現代瀏覽器上的支援度越來越好，能有效減少圖標對載入速度的影響。
一個常見的誤解是「我只做網站，不需要 APP 圖標」。但越來越多網站支援 PWA 功能，當使用者把手機瀏覽器裡的網站加到主畫面時，系統抓取的就是 Android 和 iOS 的圖標設定。就算目前沒有開發 APP 的計畫，把這些尺寸都準備好也不會白費。
Iconpie 的替代方案：目前仍可使用的圖標產生工具
既然 Iconpie 已經無法使用，底下整理三個截至 2026 年 9 月仍正常運作的免費替代工具，各有適合的使用情境。
| 工具 | 操作難度 | 輸出格式 | 特色 | 免費程度 |
|---|---|---|---|---|
| RealFaviconGenerator | 中等 | ICO、PNG、SVG | 可微調各平台設定、產生完整 HTML 程式碼 | 免費（部分進階功能付費） |
| Favicon.io | 簡單 | ICO、PNG | 可從文字、圖片、Emoji 產生 | 完全免費 |
| SVG Favicon Maker | 簡單 | SVG | 專注 SVG 格式、可加 Emoji | 完全免費 |
RealFaviconGenerator：功能最全面的選擇
RealFaviconGenerator 是老牌的圖標產生器，強項是讓你針對每個平台分別微調設定，例如 iOS 圖標要不要加圓角、Android 圖標的背景色、Windows 磁貼的設定等。產生的同時還會附上完整的 HTML 程式碼和 manifest.json，直接複製貼上就能用。缺點是介面選項較多，初次使用需要花點時間熟悉。如果你追求完整的跨平台支援和精細控制，這是目前最推薦的選擇。
Favicon.io：最快速的入門方案
Favicon.io 最大的特色是可以直接用文字或 Emoji 來產生 Favicon，不一定需要上傳圖片。對個人部落格或小型專案來說很方便，隨手打一個字母就能產生看起來還不錯的 Favicon。不過它產出的圖標種類主要集中在 Web Favicon 部分，跨平台覆蓋不如 RealFaviconGenerator 完整。
SVG Favicon Maker：向量格式的選擇
如果你注重圖標在任何解析度下都保持清晰，SVG Favicon Maker 值得考慮。SVG 是向量格式，放大縮小都不會模糊。不過 SVG 格式在 iOS 和 Android 上不被直接支援，所以還是需要 PNG 格式的圖標來搭配。
我的建議：如果你只是需要快速把一張 LOGO 轉成各平台圖標，Favicon.io 最省事。如果你需要精細控制和完整程式碼輸出，選 RealFaviconGenerator。如果想從零開始用文字產生 Favicon，Favicon.io 也行。如果你手邊已有大量圖標素材需要整理，Flaticon 和 FindIcons 這類圖標庫會更實用。想把圖標做成自訂字型檔的話，IcoMoon App 是不二之選。
如何將產生的圖標安裝到 WordPress 網站
產生圖標只是第一步，真正重要的是把這些圖標正確安裝到網站上。如果你是用 WordPress 架站，有幾種不同的安裝方式。如果你還沒有自己的 WordPress 網站，可以先參考 WordPress 是什麼 的入門介紹，選擇一個像 Bluehost 或 Kinsta 這樣優質的主機來安裝。不確定該選哪家，WordPress 虛擬主機推薦 整理了各家的優缺點和費用比較。
方法一：使用 WordPress 內建的網站圖示功能
WordPress 從 4.3 版本開始內建「網站圖示」功能，這是最簡單的方式：
- 進入 WordPress 後台，前往「外觀 → 自訂」找到「網站識別」區塊
- 點選「網站圖示」下方的「選取圖片」按鈕
- 上傳你從圖標產生器下載的 512×512 尺寸 PNG 圖標
- WordPress 會自動幫你裁切成各種需要的尺寸
這個方法的好處是 WordPress 會自動處理大部分的事情，包含產生 favicon 和 apple-touch-icon。不過它產生的尺寸種類可能沒有圖標產生器那麼完整，特別是 Android 相關的圖標可能會缺少。如果你追求最完整的跨平台支援，建議用下面的手動方式補齊。
方法二：手動上傳圖標檔案
如果你想安裝所有圖標，手動上傳是最完整的做法：
- 透過 FTP 或主機控制面板的檔案管理員，連線到你的網站伺服器
- 把 favicon.ico 上傳到網站的根目錄（通常是 public_html/）
- 在根目錄下建立一個 icons/ 資料夾，把其他 PNG 圖標放進去
- 在佈景主題的 header.php 或透過 functions.php 加入對應的 HTML link 標籤
如果你是用 A2 Hosting 或 SiteGround 這類主機，控制面板都有圖形化的檔案管理員，上傳很方便。進階使用者也可以搭配 Filester 這個 WordPress 檔案管理外掛，直接在後台操作伺服器上的檔案。
方法三：使用 WordPress 外掛管理圖標
如果你不想動到佈景主題的程式碼，也可以安裝專門管理 Favicon 的 WordPress 外掛。這類外掛通常提供上傳介面，讓你分別設定 Web Favicon、Apple Touch Icon、Android 圖標等，不用修改任何檔案。缺點是多裝一個外掛，對講究 WordPress 網站速度最佳化 的人來說可能不太想為了 Favicon 多裝一個。如果很在意效能，建議搭配 WordPress 快取外掛 一起使用。
安裝圖標之後，記得用 GiftofSpeed 這類 網站速度測試 工具確認靜態資源的載入狀況。如果圖標檔案拖慢了載入速度，可以考慮 啟用 GZIP 壓縮 或者搭配 Cloudflare CDN 來加速。
手動安裝 Favicon 的 HTML 程式碼教學
不管你是用 WordPress、自行開發網站，還是用靜態網頁產生器，Favicon 的安裝原理都一樣：在 HTML 的 <head> 區段加入對應的 <link> 標籤。底下是完整的程式碼範例，可以直接複製後修改路徑。
每個 <link> 標籤有幾個關鍵屬性：rel 指定圖標類型（icon、apple-touch-icon 等），type 指定檔案格式，sizes 指定圖標尺寸，href 指定檔案路徑。這些屬性和 Meta Tag 設定 一樣都放在 head 區段，影響瀏覽器和搜尋引擎對你網站的解讀。
Web Favicon 宣告
最基本的 Favicon 設定：
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="/favicon.ico">瀏覽器會從最小的尺寸開始找，所以 16×16 一定要有。如果你把 favicon.ico 放在根目錄，就算不寫宣告，大部分瀏覽器也會自動去抓，但建議還是明確寫上。
Apple Touch Icon 宣告
iOS 裝置需要 apple-touch-icon 設定，否則把網站加到主畫面時會用截圖當圖示：
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">Android 與 PWA 的 manifest.json 設定
Android 裝置和 PWA 的圖標設定透過 manifest.json 來完成。在 HTML head 中加入：
<link rel="manifest" href="/manifest.json">然後 manifest.json 的內容大致如下：
{
"name": "你的網站名稱",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}如果你有搭配 Google Fonts 網頁字型 或 Cloudflare CDN 等服務，這些靜態資源的載入設定都可以跟 Favicon 設定一起放在 head 區段中。靜態資源的數量和大小都會直接影響 TTFB 等待時間，所以圖標檔案盡量保持精簡。
適合誰 / 不適合誰
適合花時間設定完整圖標的人：
- 剛架好 WordPress 網站，想把基礎設定一次到位的新手站長
- 有開發 PWA 或打算讓網站支援「加入主畫面」功能的站長
- 品牌形象明確，希望在所有裝置上保持視覺一致的網站經營者
可以先用簡單方案就好的人：
- 只經營內容部落格，暫時不需要 APP 等級的圖標，用 WordPress 內建網站圖示功能就夠了
- 還在測試階段的網站，先用一個 32×32 的 Favicon 擋著，正式上線再補齊
- 沒有 LOGO 設計需求，用 Favicon.io 打一個文字就好
免費圖標素材與設計資源
產生圖標的前提是你要先有一張好看的 LOGO 或圖標素材。底下整理一些實用的免費資源。
免費 Logo 設計工具
如果你還沒有 LOGO，這些工具可以幫你快速產生：
- DesignEvo：內建 10,000+ 模板的免費線上 Logo 設計工具，選一個微調就能下載
- Logaster：一秒建立 Logo 與 Favicon 的線上產生器
- Free Typography Logo Maker：更快，輸入文字就能產生簡潔的文字 Logo
- Instant Logo Design 和 Logo Instant：都有免費素材可下載
- Brandbuilder：適合建立完整品牌視覺，一次搞定 Logo、名片和社群媒體圖像
免費圖標下載網站
如果你需要的是 UI 圖標（按鈕、選單、社交媒體圖示等），這些網站有大量免費素材：
- Icons8：大量圖標、插圖和照片，種類非常豐富
- Flaticon：全球最大的免費圖標庫，需標註來源即可免費使用
- iconmonstr：4496 個 CC0 授權的免費圖標，不需署名就能商用
- Heroicons：開源免費的 SVG 圖標，設計簡潔適合現代化介面
- Feather Icons：超過 200 個系統常用圖示，線條乾淨俐落
- LineIcons：2000+ 個線形圖標，專為設計師和開發者設計
- Remix Icon：2000+ 個開源圖標，無版權限制可商用
- Octicons：GitHub 官方開源圖標，技術感十足
- Ionicons：1200+ 個免費圖標，專為 Web、iOS、Android 跨平台設計
- IconPark：1287+ 個高品質圖標可線上客製化
- Iconhub：6 種不同樣式、上千種圖標，可做商業用途
- Animated Icons by Icons8：900+ 個免費動態圖示
- Emblemicons：1000+ 個產品開發和業務展示用的圖標樣式
- Iconstore：高畫質圖標集合包
- Iconshock：超過 200 萬個圖標
圖片處理與格式轉換工具
- AnyWebP：免費線上 WebP 轉 JPG/PNG/ICO 格式轉換
- Fotor：跨平台免費線上圖片編輯器
- DesignCap：免費線上圖片編輯器，大量範本一鍵套用
- WebsitePlanet Image Compressor：免費線上圖片壓縮
- AI Image Enhancer：AI 提升圖片品質
- AI Image Enlarger：AI 放大圖片
選擇圖標風格時，建議考慮網站或 APP 的整體視覺調性。不管選哪種風格，最重要的是保持一致性，從 Favicon 到網站內的 UI 圖標，再到 APP 圖標，都應該使用同一套設計語言。如果你在進行 WordPress 佈景主題挑選，也可以把主題內建的圖標風格列入考量。
下一步：3 個立即可以做的事
- 用 RealFaviconGenerator 產生完整圖標包：前往 realfavicongenerator.net，上傳你的 LOGO（至少 512×512、PNG 透明背景），按指引產生所有平台圖標和 HTML 程式碼。預期結果：下載一個包含 20+ 個圖標檔案的壓縮檔，外加可直接複製的程式碼。
- 透過 WordPress 內建功能設定網站圖示：進入後台「外觀 → 自訂 → 網站識別」，上傳 512×512 的圖標。判斷標準：如果前台瀏覽器分頁能看到你的圖示，就代表設定成功。如果看不到，用無痕視窗確認是否為快取問題。
- 確認前端載入正常：安裝完成後，用無痕視窗開啟你的網站，檢查瀏覽器分頁、書籤列和手機「加入主畫面」三個場景的圖標是否都正確顯示。如果手機端沒有出現，檢查 apple-touch-icon 和 manifest.json 是否設定完整。想直接確認瀏覽器實際抓到的是哪個圖示檔，也可以用 favicon.im 輸入網址查看。
Iconpie 常見問題 FAQ
Iconpie 現在還能用嗎？
不行。截至 2026 年 9 月，iconpie.com 的網域已無 DNS 紀錄，完全無法連線。Internet Archive 最後一次成功抓取是 2022 年 9 月。如果你需要類似功能，建議改用 RealFaviconGenerator 或 Favicon.io。
Favicon 產生器產出的圖標可以用於商業用途嗎？
圖標產生器只是根據你上傳的原始圖片做裁切和縮放，所以授權問題取決於原始圖片。如果你用自己設計的 LOGO 或購買了商用授權的素材（例如從 DesignEvo 產生的 Logo），產出的圖標就可以商用。如果原始圖片有版權限制，產出的圖標也一樣受限。
為什麼上傳 Favicon 之後網站上看不到？
通常有三個原因：瀏覽器快取了舊的圖標、檔案路徑設定不正確、或 HTML 宣告有誤。排查步驟：先用無痕視窗確認，如果無痕視窗能看到就代表是快取問題，清除瀏覽器快取就好。如果無痕視窗也看不到，檢查 HTML 原始碼中的 link 標籤路徑是否正確，或用 favicon.run 輸入網址，直接看瀏覽器目前回傳的 Favicon 是哪一個檔案。也可以搭配 WordPress SEO 外掛 確認整體的 head 區段設定是否完整。如果你使用的是 DreamHost 等主機服務，控制面板通常也會提供快取清除的功能。
圖標看起來模糊該怎麼辦？
模糊通常是因為原始圖片解析度不夠高。建議上傳至少 512×512 像素的圖片，這樣即使縮小到 16×16 也還能保持一定清晰度。如果 LOGO 本身細節太多，在極小尺寸下本來就難以辨識，建議為 Favicon 設計一個簡化版本，保留核心圖形或首字母就好。你也可以用 AI Image Enhancer 或 AI Image Enlarger 嘗試提升原始圖片品質。
PWA 網站需要哪些額外的圖標設定？
PWA 需要一個 manifest.json 檔案，裡面至少要包含 192×192 和 512×512 兩種尺寸的圖標。同時也別忘了在 manifest.json 中設定 theme_color 和 background_color，這會影響 PWA 安裝時的啟動畫面顏色。定期用 UpdraftPlus 備份網站，萬一改壞了可以快速復原。WP Rocket 則可以幫你處理快取和靜態資源的最佳化。
