如何在網址和加入我的最愛時出現 favicon.ico 圖案

woff · 發表於 2008-9-23 21:13:24

在目前我主要用的兩個瀏覽器，分別是IE和Mozilla來說，宣告的語法是不同的，支援的格式也有些差別。

主要的差別如下：

IE瀏覽器：需加入『我的最愛』後纔能看得到，僅支援.ico檔案

Mozilla瀏覽器：打開網頁就看的到，支援.ico及.png檔案

「靜態」圖檔 .ico
你可以先到製作自己喜歡的ico圖示
--------------------------------------------------------------

http://www.chami.com/html-kit/services/favicon/

http://www.favicon.jp/

Favicon Generator讓你能線上將圖片轉為 favicon(16×16)，你可以從電腦上傳(Local Image) 或是使用網路上的圖片(Online Image)。
【網站網址】http://www.graphicsguru.com/favicon.php
favicongenerator.com 網站一樣提供線上圖片轉為 favicon 的服務，但圖片僅能從電腦上傳。
【網站網址】http://www.favicongenerator.com/
FavIcon from Pics 僅支援電腦上傳圖片，製作出來的 FavIcon 會有動態、靜態兩種，並且會成為壓縮檔，你只需下載即可使用。
【網站網址】http://www.chami.com/html-kit/services/favicon/
DAGON DESIGN 提供的 Favicon Generator 工具，支援電腦上傳，並會顯示最近其他人產生的 Favicon 。
【網站網址】http://www.dagondesign.com/tools/favicon-generator-tool/

先準備好一張圖檔，到以下網站上傳、按個按鈕即可
http://tools.dynamicdrive.com/favicon/
http://www.chami.com/html-kit/services/favicon/
http://www.dagondesign.com/articles/favicon-generator/

--------------------------------------------------------------

製作一個32x32的圖片, 存檔成 favicon.ico ,
將它放入網站跟目錄 , 再去編輯網頁

1.用於首頁(index.htm、index.html...)。

2.favicon.ico 圖示檔名可以任取，但是副檔名必須為ico。

3.語法必須放於 HEAD .../HEAD之間。

4.語法

<!– 這一行是給IE看的 –>
<link rel="SHORTCUT ICON" href="../favicon.ico" />
<!– 這一行是給Mozilla看的 –>
<link rel="icon" href="../favicon.ico" type="image/ico" />

複製代碼

如果妳製作的檔案是png檔的話，那末就要改成：

<!– 這一行是給Mozilla看的 –>
<link rel="icon" href="../favicon.png" type="image/png" />

複製代碼

然後將修改後的網頁上傳，把瀏覽器的快取(cache)清空，然後連上妳的網站看看吧!!

(記得IE要將網站加到『我的最愛』，才看得到)

作法:
在 .htm 的中加入一句 <link rel="shortcut icon" href="favicon.ico">完成
也就是
-----------------------------------------------------------------------------------------------------------
<HEAD>

<link rel="shortcut icon" href="favicon.ico">

</HEAD>
----------------------------------------------------------------------------------------------------------
***************************************************
使用「動態」的 .gif 檔

一直以來，最看小圖標（見下圖）都只能使用「靜態」圖檔 .ico
現在，只要將語法略作修改，
您便能使用「動態」的 .gif 檔了。

普通 HTML 網頁在＜head＞與＜/head＞標籤內加入下面語法：

<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”favicon.gif” type=”image/gif” >

複製代碼

XHTML 網頁在＜head＞與＜/head＞標籤內加入下面語法：

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />
<link rel=”icon” href=”favicon.gif” type=”image/gif” />

複製代碼

**************************************************

green454520 · 發表於 2012-1-9 00:49:47

我也來頂一下..

atiyc · 發表於 2012-1-9 00:52:42

挺好啊

andrew0303 · 發表於 2012-1-9 00:53:03

鑒定完畢.!

pighead309 · 發表於 2012-1-25 01:08:39

真是汗啊我的帖子好少啊加油

帳號		自動登錄		找回密碼
密碼				註冊

[教學] 如何在網址和加入我的最愛時出現 favicon.ico 圖案