技術員聯(lián)盟提供win764位系統(tǒng)下載,win10,win7,xp,裝機純凈版,64位旗艦版,綠色軟件,免費軟件下載基地!

當前位置:主頁 > 教程 > xp教程 >

XP系統(tǒng)地址欄添加小圖標的設置步驟

來源:技術員聯(lián)盟┆發(fā)布時間:2018-04-27 18:00┆點擊:

  在瀏覽很多網(wǎng)站的時候,都會發(fā)現(xiàn)在瀏覽器的地址欄前面會有一個小圖標,在瀏覽器的標簽位置也有一個小圖標,這種小圖標是怎么做上去的呢?那么怎么在地址欄添加小圖標呢?下面小編介紹XP系統(tǒng)地址欄添加小圖標的設置步驟。

XP系統(tǒng)地址欄添加小圖標的設置步驟

  步驟如下:

  一、地址欄上小圖標的制作

  1、首先,我們要制作好一個圖標,就是圖標圖片,下面我們先用PS制作。PS新建文件,制作時請保持好寬度與高度,設置為正方形為佳,此處小編把背景設置為透明。設計時,可以選擇大一點尺寸。

XP系統(tǒng)地址欄添加小圖標的設置步驟(1)

  2、然后制作底色,選擇漸變工具,然后點工具欄上的漸變,可進入編輯狀態(tài)。

XP系統(tǒng)地址欄添加小圖標的設置步驟(2)

  3、在下方的顏色條處,有前后兩個條按鍵,選擇其中一個,然后點下方的顏色,然后進入顏色選區(qū),然后再選擇其中一個顏色,然后再點確定。另一個按鍵也是同樣操作,如果想達到漸變效果,建議不要選擇一樣的顏色。完成后,選擇確定即可。

XP系統(tǒng)地址欄添加小圖標的設置步驟(3)

  ?

XP系統(tǒng)地址欄添加小圖標的設置步驟(4)

  4、退回到背景畫布,鼠標點畫面任務處,按著拖動,然后放開,就會填充背景顏色。

XP系統(tǒng)地址欄添加小圖標的設置步驟(5)

  ?

XP系統(tǒng)地址欄添加小圖標的設置步驟(6)

  5、然后添加文字:選擇文字工具,然后插入文字,選擇好字體大小與顏色。

  6、然后再選擇菜單欄上的“圖像”選擇“圖像大小”,設置圖像大小為16*16(標準尺寸)確認即可。

XP系統(tǒng)地址欄添加小圖標的設置步驟(8)

  ?

XP系統(tǒng)地址欄添加小圖標的設置步驟(9)

  7、然后再保存為PNG格式(此處格式?jīng)]有很大限制,可以是JPG,GIF,PNG)

XP系統(tǒng)地址欄添加小圖標的設置步驟(10)

  二、制作favicon.ico與編輯代碼

  1、接著搜索“favicon.ico在線制作”,點擊進入。

  2、進入到在線生成,選擇瀏覽,然后選擇尺寸,然后輸入驗證碼,生成ICO圖標即可。

XP系統(tǒng)地址欄添加小圖標的設置步驟(11)

  3、然后下方就會出一下制作好的鏈接,點擊下載。(有些網(wǎng)站是會直接跳出下載文件)

XP系統(tǒng)地址欄添加小圖標的設置步驟(12)

  4、如果您選擇是保存在桌面,此時您的桌面會多一個如下圖的ICO文件。

XP系統(tǒng)地址欄添加小圖標的設置步驟(13)

  5、然后把ICO文件的文件名修改成“favicon.ico”,并通過FTP把它上傳到網(wǎng)站根目錄下,就是同您的Index.asp文件所在的目錄下。

XP系統(tǒng)地址欄添加小圖標的設置步驟(14)

  6、并在相應的網(wǎng)頁里添加一句代碼:(通常就是在您的抬頭頁面里,如:top,head),并上傳。

  《head》

  《link rel=“shortcut icon” href=http://www.ghostxpsp3.net/XPXiTongJiaoCheng/“favicon.ico” /》

  《/head》

XP系統(tǒng)地址欄添加小圖標的設置步驟(15)

  7、此時瀏覽一下該網(wǎng)頁,就可以看到地址欄上會出現(xiàn)小圖標。

XP系統(tǒng)地址欄添加小圖標的設置步驟(16)