首頁 部落格 不容忽視的網頁設計小細節─Favicon檢查工具
Free Resource
Nov 26, 2018
網路上有很多創新、免費的網頁設計資源,有些可以用於網站的草稿與線稿設計,也有繪圖軟體可以強化網站的視覺設計表現,還有很多奇特的網站提供意想不到的服務,我們樂於收集與分享這些資源給各位。

不容忽視的網頁設計小細節─Favicon檢查工具

一般來說,網頁設計的細節是能夠做得越完善,不論用戶或是搜尋引擎,都會對你的網站更加分,用戶會更喜歡你的網站,而網站的自然排名(SEO)也會越好。例如今天我們要分享的Favicon網頁小圖示。

Favicon是一個非常微小的圖示,當用戶進入網站,瀏覽器的頁籤上就會顯示Favicon,加入我的最愛書籤時也會顯示Favicon。雖然很不起眼,但使用得到的場合卻非常的多,但也因為太過不起眼,很多網站設計師可能一個閃神就忘了Favicon的設計。

不過,就算細心的設計師有做Favicon,但你有沒有檢查過Favicon呢?其實檢查的方法問了十個網頁設計師,九個會跟你說「只要瀏覽器列上有圖案出現」就行。其實事情沒那麼簡單,Favicon Checker準備帶來意想不到的結果。

 

拿到滿分十分困難

以馬路科技iWare自家網站來說,雖有基本的Favicon設定,但是Favicon Checker檢查過後發現居然於iOS與Android、Windows Metro的APP操作界面無法顯示。小編一個好奇心驅使,拿了Apple、Microsoft、Gopro、Intel...等全球知名的公司網站測試,結果也是一片滿江紅,不及格的網站佔了多數,尤其是Windows Metro界面連自家官網都沒有支援Windows Metro Favicon,真是諷刺。

還好Favicon Checker不僅提供檢查工具,也告訴大家闕漏的Favicon如何設定,以及解析度必須在規定的條件下,Favicon才會正確的顯示出來。此外該公司也有其他的Favicon小工具如Favicon Generator,大家有興趣可以玩玩看。

 

網頁小圖示,先求有再求好

小編的結論就是,Favicon的設定至少要滿足最基本的瀏覽列顯示,至於在iOS Safari 或是 Android 界面上顯示圖示,有添加很好,沒也似乎也不影響,但如果你是完美主意者,Favicon這個細節或許你並不想錯過。此外該網站有提供Favicon Generator 小圖示產生器的服務,值得一試。

 

https://realfavicongenerator.net/favicon_checker

2020網頁設計趨勢-用響應式設計,打造高可用性的網站
2020網頁設計趨勢-用響應式設計,打造高可用性的網站
iWare發言人
iWare發言人
Nov 21, 2019
製作網站不用錢?Wordpress優缺點老實說
製作網站不用錢?Wordpress優缺點老實說
Ryan
Ryan
Sep 05, 2019
Google協作平台製作網站的優缺點分析
Google協作平台製作網站的優缺點分析
Free Resource
Free Resource
May 07, 2019