Favicon Checker 檢查網站圖示在 iOS、Android、PC 和 Mac 設定是否正確

贊助商連結
(Copyright: audiohead / 123RF Stock Photo

網站最佳化指南裡有提到最好可為網站加入網站圖示(Favicon),如果沒記錯的話,雖然是一個簡單的動作,但對網站來說卻有相當大的幫助,怎麼說呢?這些圖案有助於加深使用者對網站的印象,在書籤列顯示也更容易識別,除此之外,當今行動裝置瀏覽器例如 iOS Safari 或 Android Chrome 都支援將網站釘選到主畫面,不過必須事先設定好合適的圖案。

贊助商連結
贊助商連結

如果你不知道自己網站上的網站圖示 Favicon 設定是否正確,或是呈現出來的效果有沒有符合預期,可透過「Favicon Checker」免費線上工具檢查一下,這個服務的功能很簡單,只要輸入網站網址,就會檢查所有可能用到 Favicon 的平台或作業系統,包括 iOS、Android、Windows 8、Windows 10、Mac OS X El Capitan 和一般常用瀏覽器。

依照網站說明,Favicon Checker 可以幫你解決以下問題:

  • 我的 favicon.ico 正確嗎?這個問題往往會引起令人驚訝的答案。
  • 我的網站圖示在 iOS 看起來正常嗎?
  • 我的網站圖示在 iPhone 6 看起來還好嗎?(iPhone 6 比前幾代要求更高)
  • 我有一個 favicon.png。這樣就好嗎?
  • 我聽過 Windows Surface。有什麼我需要做的嗎?

雖然網站圖示(Favicon)不是一個很困難的問題,但若你不會照著說明完整設定,或不確定自己網站上的設定正不正確,都能透過 Favicon Checker 來快速檢查一下,這項服務會告訴你每個平台顯示的圖示效果以及有那些可以改善的項目。

網站名稱:Favicon Checker
網站鏈結:https://realfavicongenerator.net/favicon_checker

使用教學

STEP 1

開啟 Favicon Checker 網站,選擇你的網站是 http:// 或 https:// 接著輸入網址,點選後方的藍色按鈕就能進行檢查。

贊助商連結

STEP 2

等待結果出現後,就能從各種顏色的提示資訊中找出網站圖示有沒有需要修改、調整或是設定有誤之處,綠色代表正確沒有問題,如果有紅色的話就需要調整一下,例如下圖就是找不到高解析度的 Touch 圖示,可能在某些裝置會無法顯示。

當然你不一定要滿足所有的裝置或作業系統,不過一些主流的作業系統(例如 Windows)可以考慮讓它符合檢測標準,對於網站會有正面幫助,至於要如何設定呢?Favicon Generator 本身就是一個圖示產生器,只要將圖片(PNG、JPG、SVG 等等)上傳,就會自動產生各種大小及必要的程式碼。

值得一試的三個理由:

  1. 輸入網址就能線上檢測,快速了解網站 Favicon 設定是否正確
  2. 可檢測 iOS、Android、Windows 及 macOS 網站圖示顯示情形
  3. 網站提供 Favicon Generator 可快速將圖片轉為各種大小尺寸的圖示