最近無意間發現了這麼一個好玩兒的小東西, 可讓網站在瀏覽器的網址列及我的最愛上看起來與眾不同, 如圖所示.這是怎麼做到的呢?
首先, 你得有一張16x16的圖檔, 首創 Favorites Icon 的 microsoft 規定要用 ICO 格式.
然後, 若你擁有網站根目錄的管理權限, 只要把這個檔取名為 favicon.ico , 而且放在根目錄就好囉! 從此這個網站的所有網頁在網址列及我的最愛都會顯示這個圖示.
不過要注意: IE 要在5.5版以上的我的最愛, 以及7.0版以上的網址列才支援此功能, FireFox 則全支援. 還有, 原本舊有的我的最愛並不會隨網站更新, 你必須重新再加入一筆我的最愛.
若是你動不了網站根目錄, 那麼就得在個別網頁中, 於 <head> 段指定圖檔位置, 例如:
<link rel="shortcut icon" href="/path/image_name.ico" type="image/vnd.microsoft.icon">
以上是 microsoft 自創的格式, 其實在標準瀏覽器規範中, rel 只能有一個字串, 為了符合標準規範, 你可以再加上以下這一行:
<link rel="icon" href="/path/image_name.ico" type="image/vnd.microsoft.icon">
因為遵循標準規範的瀏覽器會自動取 rel 的最後一個字串, 所以它會把 short icon 解讀為 icon, 所以其實第二行是可以省略不寫的. 不過用第二行的寫法就可以使用 GIF 或 PNG 格式 (IE 不支援):
<link rel="icon" href="/path/image_name.gif" type="image/gif">
<link rel="icon" href="/path/image_name.png" type="image/png">
在網頁中指定圖檔位置的問題是, 只有有指定的網頁才會有 Favorites Icon, 不像放到根目錄的 favicon.ico 適用於網站內的所有網頁; 但好處是同一網站的不同網頁可以擁有自己的 Favorites Icon.
順便一提, Google 工具列的書籤也支援 Favorites Icon.
至於要如何製作 ICO 格式的圖檔? 可找找專門製作的工具如 Microangelo, GoldIcon 等, 或是先製成 PNG 格式, 再到 ConvertIcon 網站上去做線上轉檔.
參考:
維基百科: Favicon
介紹 Favicon.ico 重點觀念
製作「我的最愛」圖示
全站熱搜
留言列表
