1. 程式人生 > >設定網頁位址列中的小圖示

設定網頁位址列中的小圖示

     網頁中如何設定在網頁位址列中的小圖示:

下面我們就講講:

  <link rel="SHORTCUT ICON" href="http://****/*****.ico">

  <link rel="BOOKMARK" href="http://*****/*****.ico">

這兩個程式碼的作用。

在瀏覽器位址列有csdn有一個"圓圈"圖示 如何在自己的jsp網頁之中設定?

通常做法是:

要預先製作一個圖示檔案,大小為16*16畫素。副檔名為ico,然後上傳到相應目錄中。

在原始檔“<head></head>”之間新增如下程式碼:

<Link Rel=\"ICON NAME\" href=\"http://圖片的地址(注意與剛才的目錄對應)\">

收藏夾:

favicon.ico

你隨便用一種畫象素的工具,畫一個圖示,然後起成這個名字,上傳到你所有網頁檔案的那個資料夾裡就行了。

一般都會自動找這個favicon.ico的檔案,只要有,就會顯示。

並且是根目錄下

位址列的方法:

只是在網頁中多加入下面一條程式碼就行了。

<link rel=”shortcut icon” href=”sample.png” type=”image/x-icon” />

如果手頭沒有合適的工具製作圖片,也可以選擇一個自己喜歡的圖片,然後到這個網站去自動生成一個。

Favicon,即Favorites Icon的縮寫,顧名思義,便是其可以讓瀏覽器的收藏夾中除顯示相應的標題外,還以圖示的方式區別不同的網站。

您是不是也希望為您的網站加上一個體現您的主頁的風格和個性的圖示呢?其實要實現這一目的非常簡單。

第一步,準備一個圖示製作軟體。

首先您必須瞭解所謂的圖示(Icon)是一種特殊的圖形檔案格式,它是以 .ico 作為副檔名。普通的影象設計軟體無法使用這種格式,所以您需要到一個軟體下載站點去下載一個圖示製作軟體。您也可以訪問http: //www.favicon.com/,這裡提供一個免費的線上“收藏夾”圖示生成器,如果您 E 文夠好的話,在這裡您還可以瞭解到更多的關於“收藏夾”圖示的知識。

第二步,確定“收藏夾”圖示的規格。

“收藏夾”圖示有著它特有的規格:圖示的大小為 16 * 16(以畫素為單位);所使用的顏色不得超過 16 色。 (為了清晰)

第三步,設計一個屬於您自己的圖示。

您可以將您的網站的 LOGO 做成一個縮圖或者另外設計一個別具特色的圖案來作為“收藏夾”圖示。總之,它一定要是屬於您自己的,並且能很好的代表您的網站的風格和個性。然後將這個圖示檔案命名為:favicon.ico。

最後,將這個圖示檔案(favicon.ico)上傳到您的網站所在的伺服器的根目錄下。

     網頁標籤ICON的製作方法

favicon.ico圖示線上製作,製作ico的一些軟體+ico下載
      很多入口網站都有這個檔案,Favicon可以方便使用者在很多視窗的時候快速定位到他需要的那個TAB,人對影象的識別速度比抽象的文字還是要快很多。
      Favicon以前只是在IE收藏時會用到,當收藏網站時,標題名稱前會顯示favicon.ico,這樣在眾多的收藏網址中,你的網站就會比較顯眼;但現在很多多視窗的瀏覽器都支援,開啟網站時會直接顯示在網站地址前以及標題前。

      相信現在很多朋友都在使用IE7.0了,IE7.0不但增加了標籤頁的功能,而且也可以顯示Favicon。

      在RSS應用中,目前支援favicon的應用也越來越多……

      2、FAVICON.ICO檔案製作
      favicon檔案支援 16*16 和 32*32 兩種格式,一般使用16*16。
      favicon.ico檔案生成還是有些難度的,因為它不是標準的點陣圖檔案,需要用專門的favicon編輯器生成。
      還有一款小軟體,魔法ICO v2.00.rar,可以讓你把一張圖片(支援 bmp,jpg,gif,png 等格式)轉化成ico的圖示檔案,有16X16,32X32,48X48,64X64,72X72,96X96和128X128 多種尺寸,還可以提取程式裡的圖示。      我很喜歡的一個線上favicon生成器服務:直接上傳你喜歡的圖片,直接生成16*16畫素的favicon.ico檔案,還有線上預覽功能。
      另外推薦一個線上favicon生成器,http://www.chami.com/html-kit/services/favicon/

3、使用方法

得到你的圖示以後,把favicon.ico上傳到伺服器放在網站根目錄下,然後在首頁檔案中<head>段插入:

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

如果你希望出現動畫效果的favicon圖示,那就上傳animated_favicon1.gif並且新增如下的HTML標籤:

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

提供幾個線上生成ico圖示相關網站和下載:

線上生成favicon.ico地址:http://www.chami.com/html-kit/services/favicon

有6個線上工具:http://www.chami.com/html-kit/services

FavIcon from Pics //這個就是線上生成favicon.ico圖示了,提交任何一個圖片,它會給你生成一個ICO檔案,並打包下載
Favicon Validator //favicon驗證
Buddy Icon from Pics //把圖片轉換成ICO格式,還可製作PNG格式的背景圖片
Image Embellisher //製作特殊效果的圖片,比如立方體,Windows徽標那樣的波浪
Online Image Splitter //切割圖片
Cookie Tester //cookie 測試
得到你的圖示以後,把favicon.ico上傳到伺服器放在網站根目錄下

線上製作ico圖示 - ico圖示轉換工具
http://www.bitbug.net/

圖示下載:
http://download.pchome.net/php/dl.php?sid=17420
製作ico的一些軟體:

icon sushi 1.18 Beta 1 
Icon sushi 精緻小巧的圖示編輯程式,能將 *.bmp 檔案轉成 *.ico 的圖示編輯工具,此外它更可以處理 Windows XP 用的圖示檔案,讓你的桌面更加多采多姿。
http://downloadfree.cn/Software/Catalog76/8343.html

Picture To Icon 1.90 
能將圖片或螢幕的一部分轉化為ICON圖示,調整圖示大小以及從資源庫中提取icon。支援BMP, JPEG, GIF, CUR, WMF。
http://www.onlinedown.net/soft/45891.htm

魔法ICO 1.00 
這是一個簡單、小巧的圖示工具,它為您提供以下功能: 
1) 把.BMP和.PNG格式的圖片批量轉換成圖示; 
2) 從.EXE可執行檔案中提取圖示。 
特別說明:由.BMP圖片轉換得到的圖片色彩效果不太理想,建議把.BMP圖片轉換為.PNG格式,會得到更好的效果。轉換圖片格式可以用ACDSee,很方便。如果源.PNG圖片帶Alpha通道,則轉換得到的圖示也是32位帶Alpha通道格式,效果很好。
http://www.onlinedown.net/soft/41613.htm