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

如何使用 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 圖片放大工具將圖片變大。

RealFaviconGenerator

STEP 2

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

RealFaviconGenerator

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

RealFaviconGenerator

STEP 3

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

RealFaviconGenerator

STEP 4

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

RealFaviconGenerator

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

RealFaviconGenerator

值得一試的三個理由:

  1. 製作適用於 iOS、Android、Windows、macOS 等不同操作系統和瀏覽器的網站標誌
  2. 只需上傳圖片、自動生成各種尺寸和格式 Favicon,並提供 HTML 程式碼
  3. 可以自訂背景顏色、圖片路徑、壓縮圖片等,並支援多種圖片格式
分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6234