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」上傳你要測試的網站圖示圖案，或者在下方貼上圖示鏈結，在這裡記得是圖檔網址，不是網站網址，否則就會跟我一樣測試半天發現圖案怎麼跑不出來。

STEP 2

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