網頁圖標設計

1、網頁選項卡顯示的圖標是怎麼設置的？是需要寫代碼完成的嗎？還是其他？求高手指點...

1、這是一個.ico圖。你去百度下載ico設計軟體。設計一個自己的logo（注意普通圖像設計軟體干不 了這個，因為保存文件名必須是.ico格式。）

2、將這個圖標文件（favicon.ico）上傳到您的網站所在的伺服器的根目錄下。您不需要對您的網頁 文件作任何的修改，瀏覽器會自動搜索您的網站的根目錄，只要它一發現了 favicon.ico 這 個 文件，就會將該圖標顯示在訪問者的地址欄。

3、如果發現沒有顯示就下載個瀏覽器重新訪問就看到了！

2、為什麼網頁中的圖標常用16px，24px，32px 這些尺寸

提到圖標設計，似乎每個設計師都有話說，但是要做好圖標設計真的那麼容易么?今天這篇文章針對網頁設計領域的圖標設計進行了相對全面的梳理，從設計技巧到設計資源一應俱全，但願能幫上你! 圖標是每一個現代UI中不可或缺的組成部分，它們不僅能協助UI布局組織內容，而且輕量級的圖標融入界面也不會喧賓奪主。不僅手機和平板的APP UI中會大量用到各種圖標，而且iPod和智能手錶的界面中也是如此，這正是因為圖標具備快速直觀傳達信息的能力。 在網頁設計剛剛興起的時代，小圖標就已經被早期的網頁設計師和開發者投入使用了。這些圖案和標識通常是常見的、易於接受的、功能型的圖形(文件夾、列印機、滑鼠、箭頭等)，在隨後的20多年間，這些圖標逐漸發展成約定俗成的一套圖形語言。在接下來的設計指南中，我想分享一些網頁設計中圖標使用的技巧，以及一些實用的免費圖標素材合集，希望你能喜歡! 圖標設計樣式 我們通常所說的“圖標設計”其實覆蓋了相當大的一個范圍。小到網頁中那些純色扁平小標識，大到PS和AI精雕細琢的擬物風APP圖標，都在圖標設計的范疇內。每個圖標設計項目都有著不同的設計需求和圖標風格，這些不同造就了圖標設計的差異化。 目前所流行的極簡風和扁平化設計，已經在全世界設計師中擁有了無數的擁簇。而之前一直不溫不火的線性圖標也已經成為了目前iOS系統的首選圖標，其他的移動操作系統也正在逐步跟進。從風格上來說，圖標並無對錯之分，只能說是各自選擇和偏向不一樣罷了。 在我看來，扁平化設計和擬物化設計之間的競爭對比，對於網頁設計而言是一件無比美妙的事情。這也對圖標設計產生了影響，許多藝術領域的概念被引入到圖標設計中來，比如光影變化，深度，等等。作為設計師的你如果更傾向於扁平化設計，那麼你需要學習創建紋理，控制陰影，讓你的設計看起來富有真實感。為此你需要進行大量的練習，但是這絕對是值得的。 企業品牌設計 雖然品牌設計看起來是顯而易見的事情，但是它依然值得一提，因為那些優秀的網站通常有著優秀得令人難以置信的品牌設計。一個優秀的圖標能向用戶傳達出品牌的理念和情感。當你為一個企業或者網站進行品牌設計的時候，品牌的圖標、吉祥物或者符號應該讓品牌和它的用戶之間形成獨特的情感聯系。 當然，你也可以為品牌設計一系列不同的圖標，每個圖標包含不同的效果，傳達不同的理念。圖標設計的可能性是如此之多，你甚至可以設計出以個圖標大合集，讓所有不同的圖標擁有相同的風格。由於每個圖標都是獨特的存在，但是風格又如此一致，當它們運用到網頁中的時候，可以讓整個網頁擁有獨特的氣質，足以從諸多設計中脫穎而出。 MailBakery 就是這樣一個典型的案例，它使用了個大圖來宣傳它們的服務。當游標移動到下方每一個圖標上的時候，上方的大圖內容會被替換成相應的圖片內容，這樣的圖標+圖片的組合在設計上保持著高度的一致性。 這些圖標所對應的圖片可以說是專門為網站定製的，但是這些圖標卻是某個免費圖標集的一部分。你可以在幾十個不同的網站上看到這些相同的圖標，也就是說，這些圖標作為潛在品牌設計的獨特性，已經被忽略掉了，他們其實可以做的更好。 也正是因此，我常常建議有報復的圖標設計師去學習為界面單獨定製成套的圖標集。對培養品牌、客戶以及項目而言，這都是更為長遠更有價值的事情。 導航鏈接 在過去，網頁上的圖標常常用作內容導航，也就是說，圖標的內容和含義，同圖標所指向的頁面內容/性質高度相關或者一致。今天，Facebook上的導航也遵循著同樣的原則。 雖然你不會一直遵循這樣的設計方式，但是有必要且值得了解它。下拉菜單鏈接通常非常實用，因為用戶會主動去了解每一個菜單的名稱。但是如果在橫向或者縱向上有十幾個導航鏈接的話，通過圖標來識別是比較可靠的方案。 視覺內容識別 在網頁設計中使用業內圖標最主要的原因是用來區分內容。圖標可以從視覺上更清晰地傳達信息，能夠平衡包含大量文本的布局，所以，如何通過一個簡單的圖標來准確傳達信息是設計師的必修課。 我最喜歡的案例就是GitHub的教學頁面。頁頭使用Github的吉祥物和粉筆黑板營造出教育的氛圍，當你向下滾動的時候，每個板塊都有單獨對應的圖標，為你說明這以塊是幹啥的。 值得注意的是，每個圖標都使用的是手繪的效果，雖然色彩不同，但是整體風格高度一致，明顯是統一設計的一整套圖標。更重要的是，每一個圖標都明確直觀地描述了它所在區塊的內容。文字內容足以描述清楚細節，但是圖標能高度概括地闡明信息。 你可以在 Glazed & Infused 的首頁看到類似的設計效果。文字小區塊詳細地描述了他們的服務、咖啡和禮品卡的信息，而頂部的手繪圖標則從視覺上闡明了內容的性質，更重要的是，這三個圖標迅速地抓住了用戶的眼球。 矢量背景 從重復平鋪背景到矢量對象，你可以用矢量圖形做很多事情。對網站背景的處理方式，已經遠不止於平鋪紋理那麼單一了。通過矢量圖形來創建覆蓋整個背景的場景已經很容易了。 矢量圖形可以很輕松地縮放，但是很難創造出逼真的效果。想製作出復雜樣式的矢量圖形並不容易，你需要通過大量的練習來熟悉在圖形上構建圖形的技巧，不過一旦學會還是蠻有趣的。在這里我們推薦一個好用的工具：Bota Iusti。 設計教程 跟蹤學習在線的設計教程是提高圖標設計技能的重要方式。想要精通設計技能沒有捷徑，唯有不斷學習，堅持練習。 雖然圖標設計是一個廣泛的領域，但是許多教程是可以舉一反三的，接下來提供的一系列教程非常實用，希望你能通過學習融入日常的設計中去。 16×16 px Icons Weather Line Icons Flat Social Icon Tab Bar Icons Bat Icon Gem Icons Water Pistol Mail Alert Notebook Almost Flat 免費圖標 40 Flat Icons Mini Icons Colorful Iconset Simple Flat Sport & Fitness Chat & Email Atitel Icons Tab Bar Icons Simple Lines Flatified Web Design Iconset iOS Settings Icon Colorful Switch Synthesizer Book App Icon

3、如何製作自己的網頁字體圖標

從設計單獨的圖標開始，到把它們轉化成@font-face格式以備嵌入，乃至授權給他人使用，整個過程中我們將僅使用免費軟體和在線服務。感覺怎麼樣呢？你不必依託於任何深奧的知識就可以製作出一套成功的英文字體（包括字母和數字），而只需要眼睛來設計——你面對的可能是非常非常小的東西。

最終，你將會收獲一個製作設計元素的過程（方法），它的意義遠遠在製作出簡單的圖標之上。

在我們繼續之前，首先應該談談，究竟希望通過在設計中使用圖標達到什麼目的，又是什麼使得一個圖標比下一個更成功。先講理論再講應用。為了完成這個任務，我們必須思考圖標作為符號學的一部分，所扮演的角色。

什麼是優秀的圖標？

符號學，從廣義上來說就是研究符號系統，我們如何對它們的形成和維護做出貢獻，它們亦因我們對世界的理解而受到影響。

不論何時，當你從「它象徵著什麼」—— 它向你的觀眾傳達了什麼信息，或者它喚起了他們什麼概念——思考你的某一部分設計工作時，你就是以符號學家的角度來審視你的設計。符號學像其它語言學一樣，的確可以覆蓋一種語言，在一個網站上面，有很多東西不是通過文字表達出來的，例如顏色、字體、形狀（圖標）。每個人都應該注意的是，這些東西所表達的都含有一種很強的文化因素。在中國，紅色可以表示好運氣，而在很多西方國家，它卻意味著危險。
術語「icon」在符號學中有一個特殊的意思。icon是一個神器，通過相似表達某事物。例如，一個標記地圖位置的icon。它擁有一個類似真實的
地圖標記的形狀,因此它可以表示一個位置，反過來，真正的地圖位置標記使人們想起各種有意義的概念。其中這些有抽象的概念，比如地點；也有不太抽象的概
念，比如這個位置可能在什麼地方。

一些所謂的圖標並不具有真正意義的代表性。無處不在的RSS圖標，一個點和兩個同心圓弧段，沒有什麼比它更像Really Simple
Syndication 了。構成RSS圖標的形狀通過單獨約定具有象徵意義，對此我們已經達成了共識。不過，一個RSS圖標更適合被稱為RSS標志。
現在，我希望我們已經確定了下面兩項成功的網站icon需要遵循的准則：

要有與真實事物的相似點，例如，一個類似真實列印機的列印圖標。

你的圖標在符號系統中應該是一個熟悉的，可識別的標志。

字體圖標日益受到歡迎

Icon字體，由於其提供了一種圖標速記方式，長期以來被認為是一種加強型UI設計，它協助人們理解文本信息。Icon圖像以毒品傳播的速度在整個web設計社區流傳，使用它可以使你的設計更加亮麗、吸引更多用戶點擊。

與圖片相比，使用icon式字體是一個相對新的主意。然而，與圖片（背景圖片方式）相比，它具備很多固有的優勢，因此它的吸引力正在逐漸增長。早在9月初，我在微博上寫了它的一些好處，Chris Coyier顯然也有類似的想法，幾周之後也向更多觀眾介紹了它。基於以上兩篇文章和其它內容，我編寫了這個較為完整的特徵列表：

它們的尺寸能夠輕松調整，並且不會損壞圖像質量（作為矢量圖）；

給icon定義顏色和文本一樣簡單。例如，對於一個rss圖標，color:orange；

可以把許多icons排列在一個組中，也就是一個文件中，這樣只需要一次http請求就可以了;

正如Chris所指出的，它們在IE6中也可以借著透明性顯示出形狀（這一點 與PNG圖片不同）;

對於那些應該出現在文字附近的圖標，對齊方式和包裝都不是問題（因為它們是文本）;

你可以應用CSS3的text-shadow和background-clip:text效果，以便凸顯字型的形狀;

不像SVG，icon字體很容易實現跨瀏覽器兼容；

問題

Chris說過，使用icon字體是一個不錯的主意，我要告訴你。

盡管如此，icon字體的使用現狀並不理想。首先，一些優質的可用字體，如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收費的。實際上意味著真有兩個問題：

你或許不得不投資一部分錢。

無論你是否需要花錢，你將會被迫接受其他一些人的糟糕設計。

除了自動抓取程序，我假定主要是網頁設計師將會閱讀這篇文章。我是一個設計師，我不認為只有我一個討厭依靠別人的作品，使自己的設計思路大打折扣這
種事兒。當然，我更不喜歡那種有支付許可權的想法。我知道自己要使用什麼圖標，並且我知道如何才能使其適合我的整體設計。我想要那種控制力。

經過一些搜索，我想介紹一下Inkscape的svg字體編輯器。通過使用Inkscape和一款在線轉換器（SVG字體到TTF），我製作出了字體「Heyding」，這個字體在 Simurai』s list（由Coyier的文章鏈接到）中有介紹。我不打算將自己的字體賣給你（它是免費的），但是我想它會帶給你一個非常好的概念。

使用Inkscape製作icon字型

啟動Inkscape

我們先從下載和安裝Inkscape開始。你也應該使用我的icon字體啟動器模板，它們被放在這個GitHub倉庫的資源文件夾里（以後這個項目中還會有更多）。一旦你在Inkscape中打開了這個文件，你應該通過在主菜單中打開以下窗口來設置好你的工作空間：

OBJECT → FILL AND STROKE

OBJECT → ALIGN AND DISTRIBUTE

TEXT → SVG FONT EDITOR
在SVG字體編輯面板中，點擊「Font」下的「Font1」。現在，你的工作空間看起來應該有點兒像這個截圖：

值得指出的是， baseline不是在畫布的下邊界之下：如果你希望與相鄰的字體共享同一條基線，你的圖標應該很輕微地懸在畫布的底部。我已經用Georgia，Arial和一些網頁字體進行了測試。

製作你的第一個字型

為定義字型，點擊SVG字體編輯面板中的「Glyphs」選項卡，然後點擊面板下方的「Add
Glyh」按鈕。一開始你可能不太清楚，但如果你在你的字形（「字型1」）上點擊，一個欄位將會顯示出來，它要求你輸入你需要的圖標對應的字元。我們首先
要做一個簡單的星形，所以我建議你輸入的字元「s」，「S」或「*」：

現在我們已經定義了字型對應的字元，我們需要製作字型本身。由於這次我們僅僅要製作一個星星，我們應該從Inkscape左邊的工具欄中選擇有用的
Stars and Polygons tool
，然後，在畫布上繪制一個星星。你會發現，這個工具自帶的選項允許您更改星星的外觀。在我的例子中，選擇了角數為5，spoke
ratio為0.5，rounded value為0.1。

使用Align and Distribute panel（可能在SVG Font Editor下面隱藏著）使星星橫向居中，然後鄉下拖動形狀使觸及基線。關閉網格顯示之後，畫布看起來應該像這樣子：

在我們的icon字體中，字型只是形狀，沒有顏色、層級或者漸變的形狀。因此，為了使我們的星星成為一個合格的字體候選者，我們必須將它由一個對象
轉化成基於路徑的圖形。你可以通過在主按鈕上選擇星星，然後是PATH → OBJECT TO
PATH來完成這一任務。現在，選擇了星星之後，我們可以在SVG Font Editor 中，高亮顯示可用的「s」字型，然後點擊 Get
curves from selection按鈕：

當你在Sample Text 區域輸入「s」時，你的星星應該被預覽出來，如下所示：

製作更加復雜的icon

你已經製作出了第一個可擴展的SVG字體字型。通過使用Fill and
Stroke面板上的選項：編輯路徑節點，以及合並對象和筆畫，能夠使你做出更加不凡的icon設計。由於我們還有很多要講，我不想深入完成一個完整的
Inkscape教程，但是遵循下面的簡單規則會給你帶來好處：

堅持使用黑色筆畫和填充，只是為了提醒你：那些icon僅僅是形狀，而非復雜的矢量圖。為icon上色這件工作，我們會在最終產品中使用CSS來完成。

所有對象和筆畫（線條）必須被轉化成路徑（不管使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH）

當有多個對象和/或筆畫被用來完成一個icon字型時，它們應該被合並起來（使用PATH → COMBINE 或者，在某些情況下，使用 PATH → UNION）

為了在已有的形狀上剪切出想要的形狀，將形狀放置在主形狀上面，選擇兩個形狀，然後選擇 PATH → DIFFERENCE。點擊Get curves from selection ，黑色塊上面的白色區域剔除之後就是你要的形狀。

准備嵌入你的字體

假如你已經重復了很多次我剛才所描述的方法，創建了一些有用的圖標，並且，字體文件被保存為myicons.svg。現在，你將要准備好把這個圖標庫用於網頁中。

把SVG轉化成TTF

你應該採取的第一項措施是，將SVG字體格式轉換成一個更熟悉、更通用的格式。 TTF是一種用於本地安裝的卓越格式。同時，它還為再轉化成@font-face提供了一個良好的基礎。可以進行字體轉換的在線服務包括： http://onlinefontconverter.com，http://www.fontconverter.org和http://www.font2web.com。然而，我個人最喜歡的，是http://www.freefontconverter.com，因為我不會排隊，也從來沒看到它產生什麼故障。

我想，不需要向你介紹如何使用這個資源也足以顯示我的誠意了。醒目的文件上傳欄位，select元素和巨大的轉換按鈕會讓你迅速抓住重點，真的。

編輯字體信息

既然你已經獲得了一個TTF，我推薦你現在編輯產生的元數據。對字體進行重命名、添加屬性和描述，使它准備好被安裝、嵌入和分發。這也是一種聲明字體為你所創造的途徑。運行Windows的讀者可以選擇使用貌似很霸氣的 Microsoft Font Properties Editor或者允許免費使用X天的Typograf。對於蘋果和Linux用戶，我希望得到你們更好的意見。

重要提示：雖然Microsoft Font Properties
Editor允許您添加作者，描述和許可信息，它似乎並沒有讓你編輯字體名稱、附言名稱等基本數據。這些欄位是被禁用的。如果你想使用這些特殊的功能，你
需要在SVG轉換為TTF之前，在SVG代碼中編輯禁止的值。在你喜歡的文本編輯器（我用Notepad++）中打開原始的SVG，並編輯以下內容：

Font Name:標簽中可以尋找到, font-family 屬性

Postscript Name:標簽中可以尋找到, id屬性

Description:你應該在這個標簽中添加一個描述（作者、許可等）。請注意這與TTF描述文字是不同的，轉換過程中將不會被保留；你還需要為TTF添加單獨的描述信息。

嵌入字體

一旦你在本地系統中安裝了TTF，並且已經預覽過，確定沒有出現意外狀況，你就可以在Font Squirrel的 @font-face generator中運行它了。為了使輸出代碼的效率和效果盡量好，這里有幾個專家模式中的選項值得一提：

Subsetting：該選項允許您只運行需要的字元集（包括字元編碼、類型、語言等選項），減少文件大小。

Remove kerning:您的圖標將幾乎總是單獨出現，所以字距是沒有必要的。據稱，這也將減小文件大小。

WebOnly™:如果你希望您的字體僅僅用於web中，而非桌面- 你可以選擇此選項。它也可以更好地滿足您的授權計劃。現在我將介紹許可證。

發布字體

如果你有興趣發布你的字體，給它添加許可是一個比較好的做法。否則許多字體網站將不會帶它玩兒。由於我們製作圖標時使用的是免費、開源的軟體，發布時也不妨這樣做。

目前，有很多可用的授權選項，而逐一調查研究它們有時是令人費解的一件事。 GNU General Public License是完全可以接受的，但你可能要考慮SIL Open Font License。使用這種許可證的主要優點是，reserved font name：即允許其他設計師修改字體，但他們需要用不同的名字。在實踐中，這意味著，對圖標設計的一些不良行為不能以「你的名字」來進行。

有了這兩種許可，你還應該在一個文本文件中保存版本信息，同時在字體的元信息中插入版權聲明和完整許可的URL鏈接。如果需要更具體的說明，請訪問各自的許可證頁面（上面的鏈接）。

CSS spriting的終結者

為什麼要停下使用SVG字體做通用圖標的腳步？有了做圖標的能力，也就有了能力去設計出站點獨有的形狀、品牌元素和裝飾。這一點像CSS
sprities，所有這些視覺元素都可以保存在一個文件中，減少了伺服器調用http請求的次數；不過，icon字體的元素都可以調整大小，而不必依賴
於位置坐標（背景位置值）才能正確顯示。這使它們更適合於 responsive design。

讓我們假裝要選擇使用一個SVG字體去代替一些我的steampunk般的blog里基本的設計元素。組件設計的一個簡單的HTML表格呈現會是這個樣子：

關於這種方式，最好的事情就是通用性。舉例來說，從左邊的第二個齒輪形狀既可作為一個微小的圓點設計，又可以是一個巨大而抽象的背景裝飾。著色很簡
單：color:maroon，但沒有必要堅持扁平的顏色;多種CSS3效果疊加起來可以為它添加紋理和觸感。為了讓你一開始有所啟發，查看this excellent gallery of CSS3-enhanced webfonts。

關於屏幕閱讀器的快速筆記

以這種方式使用字體來顯示視覺元素的一個問題是，在屏幕閱讀器上輸出時會受到影響。直觀上的網站訪問者會看到齒輪，箭頭之類的圖標，但是屏幕閱讀器將堅持讀出指定這些設計的字元。對於使用裝飾性的SVG字體元素，我建議聽取Coyier的建議：為Unicode的Supplementary Private Use Area分配向量。這樣的符號不應該由讀者來讀出。

一個協作式icon web字體

作為我的JavaScript導師，Rupert，有一天向我指出，使用SVG字體來創建圖標集為合作提供了一個有趣的機會。你看，SVG的代碼 - XML的一種形式 - 是高度標准化而且輕松可讀的。正是源碼的順序讓我覺得，icon字體的開發很適合選擇像GitHub這樣的協作編碼服務。

這個想法契合了我想要的符號含義：如果一個圖標是由很多人協商之後一致確定的，那麼它的形成過程中也存在一定的「共識」。通過我們的圖標標識系統設計出來的，一定是最典型的圖標。我們應該創建一種屬於社區的icon詞彙，並且它對於需要的人來說是有意義的。

為了發展這個想法，我創建了一個公開的GitHub倉庫Community Icon Font，這個倉庫的文件結構並不復雜：仔細閱讀上面的Inkscape教程和項目主頁的內容應該可以為你解答所有的疑惑。如果你是GitHub的新成員，嘗試閱讀它們的幫助頁面，或者問問你附近的技術人員（我正是這樣做的）。

4、網頁設計圖標怎麼做

你指的是 上面的小紅圈效果吧?

要點,將小紅點父級CSS的position設置為relative;

將小紅點本身的position設置為absolute,然後利用top和 right屬性來調整位置.

示例代碼:

<style type="text/css">

.box{background:#455996; padding:10px; height:20px;color:#eee;font-size: 12px;}

.box div{ float:left; line-height:20px;}

.bt{ background:#405287; padding:0 20px; margin:0 10px; position:relative;}

.bt span{ display:block; position:absolute; line-height:14px; width:14px; height:14px; background:#F00; top:-5px; right:-5px; text-align:center;}

</style>

<div  class="box">

 <div>歡迎你:歐陽XX</div>

 <div class="bt">消息<span>0</span></div>

 <div class="bt">注銷</div>

</div>

5、網頁設計和ui設計的區別

網頁設計側重於網站頁面的設計，一般是電商和傳統的網站用的比較多，UI設計側重於圖標，app設計，頁面設計以及交互，兩者有不同的側重點，但是相對來說ui設計的發展比較大一些。當然平面設計做的很牛的人也是很不錯的。
2、網頁美工：是精通美學，photoshop（PS），FLASH，dreamwaver（DW）等一網站製作軟體的網路人員，必須具有良好的創意和一定程度的審美觀。必要時需要一定的策劃知識。為網站所有的頁面畫出來並用DW和css排版出來。頁面必須清晰簡潔，還要適宜後台調用。

6、如何設置網頁的小圖標

網頁中如何設置在網頁地址欄中的小圖標:
下面我們就講講：
<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）上傳到您的網站所在的伺服器的根目錄下。

7、網頁瀏覽器設計成什麼圖標比較好

解決方法：
1、打開注冊表：運行—> 輸入regedit—> 打開HKEY_CLASSES_ROOT—>
2、找到.htm和.html—> 雙擊右邊的「默認」，確認其數值數據為 htmlfile
3、找到 htmlfile\ShellEx\IconHandler—>雙擊右邊的「默認」，確認其數值數據為 {42042206-2D85-11D3-8CFF-005004838597}
4、找到 CLSID\{42042206-2D85-11D3-8CFF-005004838597}\Old Icon\htmlfile\DefaultIcon —>雙擊右邊的「默認」，確認其數值數據為 C:\Program Files\internet explorer\IEXPLORE.EXE,1 （註：C 改為你的系統所在的盤符）
5、修改完這些後，刷新文件夾，看看圖標是否正常，如果還沒正常的話，就先把.htm或.html的文件擴展名改為.exe，然後在改回.htm或.html
通過這五個步驟，基本上能解決問題了。