2007/11/12

在網址列加入具有跑馬燈效果的專屬圖示(animated favicon)吧!




在網址列加入自己的圖案, 不但可以在任何人來瀏覽你的網頁時, 看得到這個圖示, 還可以在bookmark的捷徑列中顯示相同的圖示. 許多商業網站早已這麼做, 如果想做個跑馬燈效果, 也有方法.


圖示(icon), 一般都是副檔案為 .ico 格式, 如果做成 .gif, 則可以有動態文字效果. 不過, 目前 IE 只能解讀 .ico, 所以為了能夠在不同瀏覽器下都能看到icon, 需要做2個圖檔, 一為.ico, 另一為.gif

先用小畫家或其他繪圖軟體, 準備好圖片.

1. 連到 這裡這裡, 以前者為例,說明操作流程

上傳圖片. 如果希望有跑馬燈效果, 在 scrolling text 加入文字(可加, 可不加)


2. 按 Favicon GO


3. 就可看到下方頁面出現預覽效果及下載連結了.


4. 下載為一個壓縮檔, .zip, 解開後, 會有不同格式的圖檔, 可以將 .ico, 及.gif 上傳到網頁空間, 取得網址.


5. 將兩個圖檔所取得網址, 修改下列紅字程式碼, 貼到 範本中的 <head> </head>之間.其中 .ico代表的是靜態圖示.

<link href='http://www.XXX.com/favicon.ico'
rel='shortcut icon' />

<link href='http://www.XXX.com/animated_favicon.gif'
rel='icon' type='image/gif' />


注意的是 Firefox 才可以看到動態效果, 然而 IE 只能讀取 .ico , 不能解譯 gif檔. 如果希望兩種瀏覽器都可以看到icon, 可以加入這兩行程式碼! 如果只放第二行, 則 ie 下看不到任何圖示了.

相關文章 :

37 comments:

毛毛牙 提到...

謝啦!好玩。

Skyvee 提到...

毛毛牙, 也謝謝你的留言哦!

OldWang's 提到...

請問一下,我兩個檔都有放,可是在IE還是看不到,是要7.0版的才行嗎?謝謝!

skyvee 提到...

老王, ico的檔, 建議到http://www.freefavicons.info/ 這裡做, 再試看看?

Skyvee 提到...

老王, 補充一下, 我用firefox看是沒有問題, 應該是.ico 那個檔案有問題, 如果你是選擇第二個連結製做的, 那就不要填入scrolling text, 不然就到第一個連結(就是我上面留言的地方),再做一個ico

OldWang's 提到...

to Skyvee
我去重新產生了一個.ico檔,並重新上傳,在IE7.0就可以看到,不過這樣就OK了,謝囉!

Skyvee 提到...

老王, 太好了,可以work了!也謝謝你回來留言告知.

OldWang's 提到...

您客氣了,互相學習罷了,我也早將你加入我“路人甲的BLOG”的書籤裡,是我練功的一個好地方,哈哈哈!

skyvee 提到...

老王, 感謝你的鼓勵! :)

dardee 提到...

找了好久~終於找到了 thanks

Skyvee 提到...

dardee, 也謝謝你的留言.:)

嘉瑋 提到...

水啦!

用好了

GIF比較好看^^

Skyvee 提到...

GIF 效果的確較特別. :)

唷喔 提到...

你好!


爬了很久的文
也看了很多的blogger教學
還是你的比較厲害
連我這種電腦白痴都會使用了!!!

謝謝你啦~ > o <

skyvee 提到...

您客氣了!謝謝您的留言! 有幫上忙,我也很高興. :)

杰夫邱 提到...
作者已經移除這則留言。
杰夫邱 提到...

您好:

我按照你的介紹,貼上去後卻顯示以下訊息:

我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: Element type "link" must be followed by either attribute specifications, ">" or "/>".

請問這是怎麼了嗎?

skyvee 提到...

杰夫, 看起來是 程式結尾處沒加 /> , 再試看看?或是把你貼的程式碼 複製上來

杰夫邱 提到...

謝謝您的幫忙與指導!

我好像解決了~

Skyvee 提到...

杰夫, 解決了就好囉!

Olly 提到...

你好
請問一下
該圖示的製作是要多少大小呢 ??
該如何看自己圖示的px呢 ?
謝謝

Skyvee 提到...

olly, 一般是 16X16 px 大小. 其實你不用擔心圖檔多大, 只要上傳後, 這些網站會自動幫你裁成16X16的

aglocobbcm5225 提到...

搵左好耐都搵唔到head 及 /head
大約係咩位
駛唔駛點擊小裝置範本

skyvee 提到...

aglocobbcm,
不需要勾選小裝置範本,head 大約在第三行程式碼,應該就可以看到, 請再試看看!

aglocobbcm5225 提到...

加左係head後面都係唔得

Skyvee 提到...

aglocobbcm,是將<link href='http://www.XXX.com/favicon.ico'
rel='shortcut icon'>加在<head>之後哦, 不是在後面加<head>.

還是你可以貼出來你加在哪一個blog,及你加完後, 前後3行的程式碼? 這樣比較有頭緒找問題..

aglocobbcm5225 提到...

個blog係http://sexygirlphotos.blogspot.com/ head之前的碼不能留言(您的 HTML 不被接受: PHP, ASP, and other server-side scripting is not allowed.)

Skyvee 提到...

原來問題是出在 http://www.hkedcity.net/idesk/cabinet/get_file.phtml?favicon.ico 這裡, 這網址是一段帶參數的語法,建議您把 favicon 上傳到您的google page account(可以考慮到http://pages.google.com登入開通你的帳號)

然後再把favicon的網址複製貼回
<link href='http://XXX.XXX.XXX/favicon.ico' rel='shortcut icon'>

aglocobbcm5225 提到...

除了google ,有冇其他可以upload的網
我冇gmail,又唔知點解申請唔到><

aglocobbcm5225 提到...

而上載了,但有以下問題

我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The element type "script" must be terminated by the matching end-tag "".

又麻煩你了,不好意思

skyvee 提到...

不知道為何你會有這問題? 是否可以貼上你的那一行程式碼??

盤尼西林 提到...

帥呆了,我的部落格老早就想要一個個性的LOGO,感謝你的提供讓我如夢,不過我沒有網路空間...囧

skyvee 提到...

盤尼西林, 歡迎你來, 網路空間, 可以考慮到http://pages.google.com 去申請一個哦! ^^

EATING 提到...

版主您好,我是剛入門blogger的新手,由於你的文章對我很受用,所以我在文章中有連到這篇教學 及 [Draft Blogger] 新功能 : 在文章內直接發表意見,不用換頁了!這篇教學 ,希望你能讓我做個連結,讓更多網友能看到這篇教學,感謝~~

Skyvee 提到...

Eating,很高興有幫上忙,放連結沒問題, 謝謝你的留言! ^^

Olly 提到...

想請問一下
這個語法現在還有用嗎!?
因為我怎麼都跑不出來了呢!?
謝謝

Skyvee 提到...

有啊, 不過在IE下, 是看不到跑馬燈的效果喔!

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.