RealFaviconGenerator 製作適用於各平台和瀏覽器的網站標誌（Favicon）

最近在檢查網站標誌時想到之前介紹過「Favicon Checker 檢查網站圖示在 iOS、Android、PC 和 Mac 設定是否正確」服務，可以在輸入網址後顯示網站的標誌在不同瀏覽器、作業系統呈現樣貌，如果是 WordPress 用戶可以從自訂功能選擇「網站圖示」，就會自動在網頁加入網站標誌等程式碼，若想自己自訂、產生更多不同圖片大小要怎麼做呢？

本文要介紹「RealFaviconGenerator」是一個老牌的網站標誌 Favicon 產生器，功能很簡單，只要使用者將圖片上傳、即可快速製作並產生各種瀏覽器、搜尋結果、iOS、Android、Windows Metro、macOS 適用的網站標誌圖檔，也會提供程式碼只要快速複製到網站就能設定網站標誌，整個流程非常快速又方便。

之前有介紹過「favicon.zip 免費線上工具：拖曳圖片快速製作各尺寸網站標誌」和「Favic-o-Matic 快速裁切、製作各種尺寸大小的 Favicon 網站圖示」都是類似的應用。

RealFaviconGenerator 可以快速產生包括 favicon.ico、16×16、32×32、150×150、180×180、192×192 和 256×256 大小的網站標誌圖片，也能自訂要使用的背景顏色、路徑、壓縮圖片、縮放或應用程式名稱，這項服務完全免費！如果是使用 WordPress 還能找到它的免費外掛程式。

RealFaviconGenerator
https://realfavicongenerator.net/

使用教學

STEP 1

開啟 RealFaviconGenerator 網站後點選右邊「Select your Favicon image」選擇要製作 Favicon 的圖片檔案，支援 PNG、JPG 和 SVG 格式，圖片大小最小要 70×70，網站建議是 260×260 或是更高解析度才能獲得較好的結果。

如果圖片太小張的話可以使用 AI 圖片放大工具將圖片變大。

STEP 2

接著 RealFaviconGenerator 就會顯示該圖片在各個地方的顯示樣式，例如桌面瀏覽器、Google 搜尋結果、iOS 和 Android 瀏覽器、Mac Safari 瀏覽器分頁標籤等等，還能自訂背景顏色、應用程式名稱。

最底下還有一些 Favicon 產生器選項，若沒有特別需要其實維持預設值即可，找到網頁最下方「Generate your Favicons and HTML code」產生網站標誌圖片和 HTML 程式碼。

STEP 3

稍待片刻後 RealFaviconGenerator 會顯示結果，從第一個按鈕「Favicon package」可將所有圖片和相關檔案都下載下來，解壓縮就能取得，一般來說，最簡單的設定方法就是把所有圖片和檔案都以 FTP/ SFTP 上傳到網頁根目錄，然後將網頁提供的 HTML 程式碼加入即可完成設定。

STEP 4

設定後別忘記使用 Favicon checker 輸入網址來檢查一下 Favicon 有沒有正確顯示。

如果都顯示為綠色、代表已經成功通過檢查，也可以在對應的裝置、瀏覽器顯示，出現錯誤時可依照網站的提示說明進行更新修復。