TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
favicon.io 免費 favicon 產生器，一次補齊網站圖示全套檔案
favicon.io 用一個下載補齊瀏覽器到手機的七種網站圖示檔案，免註冊、圖片處理不出瀏覽器；emoji 授權與檢查器後端代抓是使用前該知道的兩條邊界。
用 AI 摘要這篇文章：
把一個「月」字丟進 favicon.io 的文字產生器，畫面上的預覽顯示藍底白字的圓角圖示；按下 Download，幾秒後拿到一個 ZIP：favicon.ico、16×16 與 32×32 的 PNG、180×180 的 apple-touch-icon、Android 用的 192×192 與 512×512、一份 site.webmanifest，外加一個記錄字型來源的 about.txt。整包 42KB，全程不用註冊、不用留信箱。這是我實際操作跑出來的結果，也是這個網站最核心的賣點：它把「網站圖示」這件零碎差事，收斂成一次下載。
結論先講。favicon.io 適合當「補齊網站圖示」的預設工具：免費、免帳號、四種產生器輸出同一套完整檔案包，logo 圖片的處理全程在你的瀏覽器裡完成，網際網路檔案館對它的封存紀錄從 2013 年 7 月延續至今，是這個品類裡少見的長壽站。使用前有三件事該知道：直接拿 emoji 當圖示時，授權義務跟著 Twemoji 的 CC-BY 條款走；網址檢查器會把你輸入的網址送到站方後端代為抓取；介面只有英文與西班牙文，沒有中文。
它是補檔機器，不是設計工具
先畫出這個工具的邊界。favicon.io 做的事情是「把你已經有的東西轉成完整圖示包」：一張 logo 圖片、幾個字母、一個 emoji、一份 SVG，四種輸入對應四個產生器，輸出內容完全相同。它不會幫你從無到有發想圖示，頁面自己也不諱言這一點，emoji 區的提示寫著挑大膽、簡單的圖形，因為細節多的圖在 16×16 會直接消失。16×16 是整個品類的物理限制：一個瀏覽器分頁上的圖示只有這麼大，再厲害的產生器也變不出面積。
和站上介紹過的另外幾個 favicon 工具比起來，定位差異很清楚。favicon.run 與 favicon.im 做的是「抓走別人網站已經裝好的圖示」，Favicon Extractor 把一個網站宣告過的所有尺寸一次攤開，屬於查別人的現況；favicon.io 反方向，做的是「把自己缺的檔案補出來」，上遊的備料則可以交給早年介紹過的 SVG Favicon Maker 這類文字轉 SVG 工具。想找靈感或抄現成圖示，前面幾個順手；要把自己網站的圖示補到完整，favicon.io 才是對的工具。
文字產生器的操作面比想像中講究。輸入一兩個字母或短詞後，可調的東西有三組：造型有方形、圓形、圓角三種；字型清單整排來自 Google Fonts；文字色與底色各有一組色票，連灰階色階都分開給。預覽區會同時以數種大小顯示結果，縮到 16×16 那格還認得出字，這套設計才算過關。圖片轉檔那條路更單純：上傳 logo 原圖，它負責縮出各尺寸；SVG 轉換則是把向量檔轉成點陣圖示包，輸入來源不同，下載到的東西一模一樣。
一個 ZIP，餵飽七種畫面
打開實際下載的壓縮包，每個檔案對應一種使用場景，這張表就是整包的說明書：
| 檔案 | 尺寸 | 用在哪 |
|---|---|---|
| favicon.ico | 16×16／32×32／48×48 複合 | 舊瀏覽器的根目錄備援 |
| favicon-16×16.png | 16×16 | 瀏覽器分頁 |
| favicon-32×32.png | 32×32 | 高解析度分頁 |
| apple-touch-icon.png | 180×180 | iPhone 與 iPad 加到主畫面 |
| android-chrome-192×192.png | 192×192 | Android 主畫面 |
| android-chrome-512×512.png | 512×512 | Android 與 PWA 安裝畫面 |
| site.webmanifest | 安裝資訊與圖示清單 |
用工具實際拆開 favicon.ico 驗過，它是貨真價實的多尺寸複合檔，一個檔案內含 16×16、32×32、48×48 三種大小，各 32 位元色深。這與站上尺寸指南的說法對得起來：完整的一支 ICO 應該同時包 16、32、48，前兩者餵瀏覽器分頁，48×48 留給 Windows 桌面捷徑；32×32 另有個冷門用途是 Windows 工作列的捷徑圖示。把多種尺寸塞進同一支 ICO，正是它的開源核心庫 favicon.js 負責的工作。PNG 五個檔案的長寬與上表一致。兩個小地方要自己動手：manifest 裡的 name 與 short_name 欄位是空字串，站方不會幫你填網站名稱，裝上去之前得補；about.txt 記錄了這次用的字型是 Leckerli One 與字型檔來源網址，但授權欄位印出來的字面值就是 undefined，等於提醒你字型授權要自己再查一次，這點後面授權段會再接手。
圖片不上傳這件事，去程式碼裡找答案
「處理都在瀏覽器裡」是這類工具最常見也最難驗證的宣稱，favicon.io 的說明頁沒有把這句話大字寫出來，所以我直接把它頁面的前端程式碼抓下來看。結果比宣稱更乾淨：圖片轉檔、文字產生器、SVG 轉換這幾條功能鏈的程式碼裡，找不到任何把檔案送出去的 API 呼叫，沒有上傳端點、沒有第三方轉檔服務；整個網站對外的連線對象只有 Google Analytics、Google AdSense 廣告與幾個社群分享按鈕。也就是說，你的 logo 在你自己機器的瀏覽器裡畫成各種尺寸再打包，不經過別人的伺服器。隱私政策與這個行為層對得起來：站方自述只在自願寫信聯絡時才收得到個資，網站上的問卷不收信箱帳號，贊助洽詢走 Netlify 表單，其餘都是廣告與統計服務的第三方 cookie。
能這樣運作，靠的是兩個公開的零件。把 canvas 圖形編成 ICO 格式的 favicon.js，與畫文字圖示用的 center.js，都是站長 John Sorrentino 自己放上 GitHub 的開源專案，授權都是 MIT，分別有 200 與 127 顆星，條款頁的 Built With 清單也明列兩者。這構成一種不常見的信任結構：網站本身沒有公開原始碼、託管在 Netlify 上，但最核心的轉檔邏輯是任何人都可以抓下來審視的程式碼。兩個庫最後的程式碼推送分別停在 2024 年 10 月與 2023 年 1 月，對功能早已完整的小工具庫來說談不上棄養，但如果你想追的是活躍開發中的專案，這裡不會有那種訊號。
拿 TechMoon 自己的網址丟進檢查器
產生器之外，站上還有一個 Favicon Checker，輸入任何網址，它會告訴你這個網站的圖示套件缺了什麼。我把本站 techmoon.xyz 丟進去，結果比預期有料：判定 Needs Work，四項必備檢查只通過一項。具體來說，180×180 的 apple-touch-icon、32×32 與 192×192 的 PNG 都抓得到，這是 WordPress 內建 Site Icon 機制自動產生的；但根目錄的 favicon.ico 回應 404，HTML 裡沒有宣告 16×16 的 PNG 連結標籤，整個網站也沒有 web manifest。WordPress 幫你生了一半的檔案，另一半要自己補，這個落差正好示範了檢查器的價值：它不管你的平台幫你做了多少，只看瀏覽器與手機實際找不找得到檔案。
檢查器還有一組延伸檢查，標題列在結果旁邊：SVG 圖示支援與圖示可連線性。檢查的 API 回應裡還帶出一筆 Windows 8 動態磚時代的遺產：msapplication-TileImage 標籤宣告的 270×270 磁貼圖，這種舊規格照樣被掃出來。結果區的下一步直接給兩顆按鈕，Generate complete package 帶你回產生器補檔，View install HTML 給你該貼的語法，整個網站的功能其實是繞著「檢查、補齊、驗收」這個循環設計的。
這裡有個誠實邊界要說清楚。產生器純前端，檢查器卻不是：翻開它的程式碼，檢查請求會送到位在 .netlify/functions/check-favicon 的後端函式，由站方伺服器代你去抓目標網站，再把結果送回你的瀏覽器。這是技術上的必然，瀏覽器的跨網域限制讓純前端幾乎做不到這件事，但結果就是你輸入的網址會離開你的電腦。測自己的公開網站無妨；未上線的內部網址、客戶的 staging 環境這類還不能曝光的位址，別丟進去。
emoji 直接拿去商用之前，先看授權
四個產生器裡，emoji 那個最容易踩到授權地雷，而 favicon.io 在這件事上寫得算誠實。條款頁載明：emoji 圖形來自 Twitter 開源的 Twemoji 專案，版權屬 Twitter 與貢獻者，以 CC-BY 4.0 授權散佈，使用前應閱讀條款原文。CC-BY 的核心義務是標示出處，站方對應的做法是每個 emoji 包的下載裡都附上出處說明檔案。官方清單標示共有 1,809 個 emoji 圖示可選，頁面上每次列出 120 個，可以照名稱、符號或分類搜尋。標示義務不會因為你用了別的工具就消失，差別只在這裡把義務提醒寫在條款與下載包裡。
文字產生器這邊的授權鏈更長一層：字型全部來自 Google Fonts，個別字型有各自的授權條款，條款頁建議使用前逐一確認；而前面提過，下載包 about.txt 的授權欄位印的是 undefined，等於把最後一哩的查證工作留給你。整理成一個原則：這個網站產生的檔案，權利狀態跟著你的輸入走。用自己畫的圖、自己買的字，輸出就是乾淨的；拿別人的 logo、有授權義務的 emoji，義務原封不動帶到你的網站上。條款也直白寫了這句：站方不對使用者產生的圖像負責，你該只用自己有權利使用的內容。
下載之後，四步裝上網站
包有了，裝上去才是完成。網站每個產生器頁面都附同一組安裝步驟：解開 ZIP，把檔案放到網站根目錄，把頁面提供的四行 link 標籤貼進 HTML 的 head 區（apple-touch-icon、32×32、16×16 的 PNG 宣告與 manifest 連結），最後再把網址丟回檢查器驗收。這樣的設計讓它不像一次性工具，裝完還能回頭確認裝對了沒有。
不同平台的裝法差異，站方寫了六篇專屬指南：WordPress、Shopify、Squarespace、Webflow、Wix、Next.js 各一篇。WordPress 那篇的內容值得一提，它先講清楚新版的正規做法：WordPress 6.5 以後，設定 → 一般裡就有 Site Icon 欄位，上傳一張至少 512×512 的方形圖，系統會自動產生常見尺寸；舊版則在外觀 → 自訂 → 網站識別裡。指南的建議是用 favicon.io 這類轉換器先把 logo 整理成 512×512 的方形 PNG，再交給 WordPress 的內建機制。換句話說，在 WordPress 上正確的用法是拿它備料，不是拿它直接覆蓋，這個分寸指南本身有講清楚。
觀念不清楚的人，教學區也補了基礎課：什麼是 favicon、各尺寸的完整對照、怎麼用 ICO 格式裝、怎麼改用 PNG 與 link 標籤裝，各一篇。對第一次碰這件事的人，這幾篇剛好把「為什麼要七個檔案」講完，不用再跳出去查規格。
免費的帳單與其他限制
最後把缺點集中攤開。介面只有英文與西班牙文，頁尾的語言切換就這兩項，操作本身不難，但沒有中文介面可選。商業模式是廣告：Google AdSense 版位明確標示 Advertisements、隱私政策列出的第三方服務有四個：Google Tag Manager、Google Analytics、AdSense 與 Netlify，另有刊登廣告的業務頁與 Buy me a coffee 的贊助連結。一個從 2013 年撐到今天、2026 年封存紀錄仍在累積的個人站，靠廣告維持免費是常見活法，代價就是頁面上的廣告與統計 cookie。站的規模是一個人的事業，條款頁署名 John Sorrentino，這種結構的好處是激進改版或收費翻臉的機率低，壞處是沒有團隊備援，網站的存續繫於一人。
功能面的限制再補三條。manifest 的網站名稱要自己填，前面提過；about.txt 的字型授權欄位不會給你答案，商用前自己查 Google Fonts 的條款頁；檢查器只能看單一網址的現況，沒有批次或排程監測。如果需求是監看別人網站的圖示變化，這不是對的工具，前面連結的抓取類工具或許更合適。
整體判斷：把你手上的 logo、字或 emoji 補成瀏覽器到手機都認得的完整圖示包，favicon.io 是目前最省事的免費路徑之一，純瀏覽器處理與開源核心零件讓它的信任度高出同類一截。把它定位成流程裡的備料與驗收工具，產出檔案的權利自己把關，這套組合就站得住。
