小小一個 favorite icon，IE 也要跟人家不一樣，雖然說一開始是 Microsoft 弄出這玩意的。至少到 IE 8，favicon 還是不支援 png 的圖片格式，吼吼 ~~ 幹麻一直死抱著 ico 啦。IE 6 就更遜了，IE 6 並不會顯示設定的圖片，只有在把網站加到書籤時才有作用[wiki]。
一般可以把 favicon.ico 存在網站的根目錄，瀏覽器會自動取用。例如 Blogger 自己的 favicon 就放在 http://www.blogger.com/favicon.ico，因此如果自己沒有設定其他的檔案，看到的就是一個橘底白字的 B。
在 Blogger 要設定自己網站的圖片，將圖片檔案上傳到網路上的空間後，在 <head> </head> 間加入下面兩行即可[設定]。
第一行是為了偉大的 IE 做的設定，第二行則是除了 IE 之外其他瀏覽器都可以接受的。所以，如果有 ico 檔，可以只寫第一行。瀏覽網頁時，favicon 會被下載到電腦中的暫存檔，如果想要換 favicon 最好是把檔名都換掉，以免使用者還是看到舊的。不只是 Blogger，所有網頁都可以用上述的原始碼設定。
<link href="http://sites.google.com/site/happycwhite/weather_sun.ico" rel="shortcut icon" type="image/x-icon"></link>
<link href="http://sites.google.com/site/happycwhite/weather_sun.png" rel="icon" type="image/png"></link>
懶人製作 ico 三大密技大公開
1. Aveicon － 互相轉換 ico 和 png 檔案格式
2. famfamfam.com － 16x16 png 圖檔大集合
3. FontSpace － 符號標誌字型
用 PhotoImpact 是可以把圖檔存成 ico 格式，但白色的背景，怎麼弄都弄不掉，超可惡的。明明 Firefox 之類的瀏覽器都支援 png，要做透明背景就簡單多了。偏偏 IE 又死抱著 ico，不過道高一尺，魔高一丈…嘿嘿嘿。
- 用 Aveicon 可以互相轉換 ico 和 png 的檔案格式。透明背景進去的 png，出來的 ico 也是透明！！這麼讚的東西其來源已不可考，總非之常之感謝，是個免安裝的綠色軟體。
使用方式直覺到很不習慣，把 png 檔拖到右邊的圖框，再用滑鼠從左邊把圖片拖出來，ico get！在左邊 ico 的框框按右鍵還可以選圖檔的大小，通常是 16 x 16。
- 如果是強者，透明的 png 圖檔可以自己做，如果是懶人，網路上有很多小圖可以視情況拿來用，如 famfamfam.com，網站上的 icon 超過 1000 個…挑到眼花都不嫌多。
建議從 famfamfam.com 直接下載，若真不上連不上 (Site Temporarily Unavailable) …就來吧…[famfamfam_16x16.zip]
- 如果在 famfamfam.com 找不到喜歡的圖檔，但還是懶得自己設計 png，還有一個好用的獨門祕技。有許多字型並不是真正的字型，而是一些符號標誌，如 Wingdings。
哪裡找這些符號類的字型，網路上一拖拉庫，首推 FontSpace，多多利用網站的搜尋功能，可以挖到很多可愛的小圖，如：Evilz。
安裝完字型後，用 PhotoImpact 之類的軟體處存成透明背景的 png (16 x 16) 圖檔即可。符號標誌類的字型很好用原因是字型大小可以隨意調整，不管圖片要大的還是小的，解析度都一樣好。
稍微再勤勞一點，符號標誌類的字型可以不只是黑白兩色。善用字體的色彩和框線屬性，原本黑不拉機的蛇，也不曉得是不是泥鰍，也可以變成彩色的，再用黃色的畫筆點個三點，再說我是泥鰍呀！！
No comments:
Post a Comment