Favic-o-Matic 快速裁切、製作各種尺寸大小的 Favicon 網站圖示

最後更新於 2020 年 07 月 07 日

最近無意間發現免費資源網路社群在 Google 搜尋結果無法正確顯示網站圖示,也就是大家都知道的 Favicon(Favorites icon),這個小小圖示代表一個網站,經常會顯示於瀏覽器標籤列或書籤,有些時候當網網頁打開太多,標題無法全部顯示於標籤列,我們就會很習慣透過網站圖示來判斷是不是自己需要的網頁。前段時間 Google 搜尋調整結果呈現的樣式,在網站標題旁邊加上圖示,因此好好設定一下自己的網站圖示格外重要(雖然後來這個設計被很多網友抗議 Google 決定要重新研議)。

本文要介紹的「Favic-o-Matic」是一個協助網站製作出各種尺寸大小網站圖示的線上工具,如果你對 Favicon 稍有研究就會發現這個圖示在不同作業系統、瀏覽器或搜尋引擎的尺寸格式要求都不太一樣,為了滿足各種條件,也要準備不同尺寸的圖示。

有些工具可以快速解決類似問題,例如 WordPress 內建「網站識別」功能就可以直接將網站圖示裁切為常見尺寸,自動將相關程式碼插入網站,減少使用者必須手動處理網站圖示的麻煩。

Favic-o-Matic 主要功能是協助使用者建立各種尺寸的 Favicon,包括 .ico.png 兩種格式(甚至是透明背景),同時產生需要的 HTML 程式碼,讓各種瀏覽器或各種裝置都能正常呈現出網站圖示。

如果你的網站目前還沒有網站圖示,請記得儘快加入,這對搜尋引擎最佳化(SEO)來說也有一些加分效果;若你不確定原有的圖示格式或尺寸是否符合現況,可以透過這項工具重新製作,過程非常簡單。

Favic-o-Matic
https://favicomatic.com/

使用教學

STEP 1

開啟 Favic-o-Matic 會看到類似下圖畫面,預設情況下會建立 16×16 + 32x32px 兩種最常見常用的 favicon.ico 尺寸,當然你也可以選擇另一個選項是包含所有尺寸,像是在行動裝置 iOS、Android 或是 Metro 會用到的網站圖示大小。

點選「Upload Your Image」上傳你要裁切、製作為網站圖示的圖片,建議最小大小必須要有 32x32px 以上,效果會比較理想。

STEP 2

點選 Advanced Settings 開啟進階設定選項,可單獨選擇圖示尺寸,依照 Google 網站小圖示說明建議,盡量使用 48x48px、96x96px、144x144px 等等 48px 倍數大小的正方形圖片。

在這裡可以選擇偏好的圖片尺寸,Favic-o-Matic 就會自動帶入一些常見尺寸,下方的網站網址、標題、背景顏色和 RSS feed 鏈結則會在稍候下載檔案時出現於 HTML 程式碼,建議先把資料填入等下就可直接取用程式碼。

STEP 3

建立後 Favic-o-Matic 會直接顯示檔案下載提示訊息,下載後解壓縮會取得檔案。

其中有一個 code.txt 可以讓使用者放進網站原始碼,利用這些宣告來告訴瀏覽器或裝置該網頁使用的網站圖示及相關尺寸大小,其中也有一段是應用程式名稱、應用程式圖格背景顏色(僅適用於 Windows 10),通知部分則是會帶入剛才填寫的 RSS feed 網址。不過其實也不用這麼複雜,只要抓幾個尺寸大小出來用就好。

STEP 4

Favic-o-Matic 會依照使用者選擇的尺寸大小產生各種對應的圖片,格式為 .png,其中也有一個 favicon.ico 檔案,可以一併放入網站根目錄。至於要怎麼放程式碼、要如何設定網站圖示我就不在本文多做說明,應該不會太複雜,如有需要搜尋一下網路上也會有不少教學可以參考。

值得一試的三個理由:

  1. 協助網站管理者快速裁切、製作各種尺寸大小的網站圖示
  2. 可產生 .png 和 .ico 兩種圖片格式,支援透明背景圖
  3. 提供必要的 HTML 程式碼方便在網站加入圖示

 

相關的文章

Favicon.io 最強大的網站圖示產生器,可線上文字製作或以圖片轉換

前段時間在研究網站圖示(Favicon)如何正確運作,對有在經營網站的站長來說一定知道在網站加入識別圖案的重要性,一般來說,加入網站圖示的作法並不困難,甚至很多網站會說只要一段原始碼就能做到,但現在因為有行動裝置作業系統,也要考量到網站被新增到桌面時會用到不同圖示尺寸,因此就必須額外準備各種不同尺寸大小的網站圖示。

Google Search Ads Highlighter 為搜尋結果的廣告加入不同背景色效果(Chrome 擴充功能)

Google 去年在行動搜尋上推出新的樣式,最主要的外觀差異就是將網站的品牌往上移動,並將網站名稱及網站圖示(favicon)顯示於搜尋結果上方,聲稱能幫助使用者更了解資訊來源和要尋找的頁面。今年一月 Google 決定將這個更新推送到桌面版搜尋,但引來不少使用者反彈,例如搜尋結果混雜著網站標誌看起來非常凌亂,而且顯示於頂部的廣告因為標誌變小很容易引起誤點(被誤認為是一般搜尋結果),後來在十天左右就緊急將網站標誌拿掉,並決定進行新的實驗以找出更適合放置網站圖示的位置。

ScreenApp.io 透過瀏覽器進行螢幕錄影,可選擇錄製應用程式或網頁畫面

以往要錄製螢幕畫面必須透過螢幕錄影軟體或是瀏覽器外掛,例如 Screencast-O-Matic 就是我非常喜歡的螢幕錄影工具,錄製後還能直接將影片上傳 YouTube,另一款 Activepresenter 也深受不少使用者喜愛,如果你使用 Google Chrome 瀏覽器,可考慮下載 Loom、Screencastify 等擴充功能,也有一樣的效果。

Scrnrcrd 從瀏覽器螢幕錄影,免安裝或下載軟體外掛程式

現在瀏覽器可以做的事真的非常多,很多時候甚至取代軟體,連瀏覽器外掛都不用額外安裝,之前介紹過一個很有用的服務「RecordScreen.io 從瀏覽器進行螢幕錄影免下載安裝軟體外掛」就非常方便,直接從瀏覽器來選取要錄影的視窗,接著就能把一連串動作轉為影片讓使用者匯出下載,不過對於臨時要錄製螢幕畫面來說還行,若要更多功能還是得透過專業的錄影工具,例如我個人很喜歡的 Screencastify、適用於 Windows、macOS 的 Screencast-O-Matic 或 ActivePresenter 等等,YouTube 也有提供線上錄影功能。

Google Maps Directions Link Generator 為商店建立導航及路線規劃連結

如果你是商家,網路可能是目前最主要、也最有效果的宣傳行銷管道,因此有不少人會選擇以 Facebook、Google 或 Instagram 提高能見度,也讓產品能夠被更多人分享,例如之前曾寫過「免費在 Google 刊登商家資訊教學,透過搜尋地圖提高能見度」教學,若你想在搜尋引擎或 Google 地圖上登錄商店資訊可以參考。有了商家資訊後也可能會被留下不好的評價記錄,那麼「Google 商家被留負評該檢舉刪除?或許業主更該做的是回應疑慮」一文或有助於建立正確的處理方式。

在 Google 搜尋結果加入切換不同國家語言的選項(Chrome 擴充功能)

現今搜尋資料時大家一定會先去求助 Google 大神,如果撇開隱私不說,Google 搜尋引擎確實能找到非常多的結果,而且內容相當準確,這當中存在很多技術,例如 Google 會依照使用者來源國家和使用語言等等顯示出最適合的搜尋結果,畢竟它強調的是解決問題,與其說是給使用者相關結果更不如說是提供解答。不過另一方面也就表示搜尋結果會受限於個人化,若沒有透過一些選項調整很難找到其他國家語言的搜尋結果。

回應