Favicon Checker 測試網站圖示在不同瀏覽器、佈景主題配色的顯示效果

Favicon Checker 測試網站圖示在不同瀏覽器、佈景主題配色的顯示效果

在建立網站和部落格時通常有許多重要環節一定要做,其中一個就是加入網站圖示,也就是大家常聽到的「Favicon」,這是什麼呢?其實就是網站會顯示於瀏覽器分頁上的小小圖示,這也不是什麼很新的東西,大部分網站都會放,尤其在開啟很多頁面的情況下無法在分頁標籤看到網站名稱,圖示就成為辨識分頁對應網站的方式,因此設定好一個易於識別、能增加使用者印象的網站圖示就顯得格外重要。

大部分的站長會直接使用自己的瀏覽器測試效果,只要在 Google Chrome、Firefox 和 Safari 或 Opera 上預覽一下就能知道有沒有符合自己的期待,不過這非常花時間,尤其當前瀏覽器又有原生的淺色和深色模式,不同底色也會呈現不一樣的感覺。

本文要介紹的「Favicon Checker」是一款讓使用者快速模擬、測試網站圖示在不同瀏覽器上顯示效果的線上工具,只要上傳你的 favicon 或直接帶入圖案鏈結,就能立即看到圖示在 Chrome、Firefox 和 Safari 瀏覽器分頁上的顯示效果,而且還包含 Firefox 內建的預設、亮色和暗色佈景主題。

除此之外,當瀏覽器分頁被選取、滑鼠游標移上去或未使用時也分別會有不太一樣的背景深淺變化,在 Favicon Checker 中可一併比較測試,有需要的開發者可加入書籤備用。

網站名稱:Favicon Checker
網站鏈結:https://www.colinkeany.com/favicon-checker/

使用教學

STEP 1

開啟 Favicon Checker 網站,從左上角點選「Upload you favicon」上傳你要測試的網站圖示圖案,或者在下方貼上圖示鏈結,在這裡記得是圖檔網址,不是網站網址,否則就會跟我一樣測試半天發現圖案怎麼跑不出來。

Favicon Checker

STEP 2

在上傳網站圖示或貼上圖示網址更新後,在 Favicon Checker 右側就能看到圖示顯示於不同瀏覽器、不同佈景主題配色以及不同狀態下的效果,是不是比自己手動去開瀏覽器一個一個測試更簡單也省時間呢?

Favicon Checker

值得一試的三個理由:

  1. 測試網站圖示在 Chrome、Firefox 和 Safari 顯示效果
  2. 直接上傳圖檔或輸入圖示網址就能看到效果
  3. 可以查看圖示在不同狀態下的瀏覽器分頁背景呈現效果
分享本文