TShopping

 找回密碼
 註冊
搜索
查看: 5329|回復: 6

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

[複製鏈接]
發表於 2008-9-23 21:13:24 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
在目前我主要用的兩個瀏覽器,分別是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.語法
  1. <!– 這一行是給IE看的 –>

  2. <link rel="SHORTCUT ICON" href="../favicon.ico" />

  3. <!– 這一行是給Mozilla看的 –>

  4. <link rel="icon" href="../favicon.ico" type="image/ico" />
複製代碼

如果妳製作的檔案是png檔的話,那末就要改成:
  1. <!– 這一行是給Mozilla看的 –>

  2. <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>標籤內加入下面語法:
  1. <link rel=”shortcut icon” href=”favicon.ico” >
  2. <link rel=”icon” href=”favicon.gif” type=”image/gif” >
複製代碼

XHTML 網頁在<head>與</head>標籤內加入下面語法:
  1. <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />
  2. <link rel=”icon” href=”favicon.gif” type=”image/gif” />
複製代碼

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

 

臉書網友討論
發表於 2012-1-9 00:49:47 | 顯示全部樓層
我也來頂一下..  

版主招募中

發表於 2012-1-9 00:52:42 | 顯示全部樓層
挺好啊  


發表於 2012-1-9 00:53:03 | 顯示全部樓層
鑒定完畢.!  


發表於 2012-1-25 01:08:39 | 顯示全部樓層
真是汗啊  我的帖子好少啊  加油  


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-8 04:38 , Processed in 0.053711 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表