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

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

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

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

Favicon Checker

網站鏈接：http://www.colinkeany.com/favicon-checker/

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

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

值得一試的三個理由：

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

圖片素材作者：Ted Kulakevich

「Favicon圖標好文」

• 《新手必備：如何設計Favicon站點圖標》
• 《設計小測試！教你制作完美的Favicon圖標（附神器）》