网页图标设计

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
通过这五个步骤，基本上能解决问题了。