2010/11/17

Favicon : 網頁標題列旁的圖示

讓 firefox 的 search plugin 可以顯示那個搜尋網站的 favicon ,對使用時選擇 plugin 有很大的幫助,所以才士著去找到底這個 favicon 該如何從網站上抓下來。


一開始以為 favicon 一定可以從網站的 source code 中找到連結(ex:cdict.net),結果怎麼找就是找不到,沒辦法,只好重新搜尋有關這方面的資料。但很糟糕的是,不知道這個東西的名字叫啥,只知道曾經在 [雜感] 十個給馬總統治國週記的不專業建議 中看過這個東西,就只好用啥 "標題列 logo 網站" 這種關鍵字,很不幸的,這樣子找真的沒啥有用的東西。還是只能去找 search plugin 相關的才找到這個小東西叫啥。

要從網站上抓 favicon,要嘛就經由 web service,要嘛就是直接找相關的 tag 或檔案。

web service:
www.google.com/s2/favicons?domain=cdict.net 
把粗體的部分代換成其他的網站就可以抓出來那個網站的 favicon 了,當然,除了 google 還有其他網站有類似的服務。

相關 tag 或檔案:
找 <link href="favicon.ico" rel="Shortcut icon"></link> 或是直接在網址後加上 favicon.ico(ex: cdict.net/favicon.ico)。

找到 icon 後事情還沒完,如果在 plugin 中直接給網址的話很可能網站改版就不見了,因此我比較喜歡用 URI (The data: URI kitchen)或是下載圖檔,就不用擔心了。

中文 mozilla 參考網站