文章类型: HTML
关键词: favicon.ico,HTML,IE,网页,搜狗浏览器,360浏览器,自己的页面图标
内容摘要: 详细介绍如何使用自己制作的网站页面favicon.ico图标。同时对于常见浏览器:如搜狗浏览器,360浏览器出现不能显示自己站点的图标问题给出了解决方案

如何在IE地址栏用自己的HTML网页favicon.ico图标

2015/7/7 17:50:06    来源:apple    阅读:

第一步,准备一个图标制作软件。 
首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以.ico 作为扩展名。普通的图像设计软件无法使用这种格式,所以您需要到下载一个ico图标工具,本站常用软件既有,推荐强大的Microangelo,可以方便的制作ico图标. 

第二步,确定“收藏夹”图标的规格。 
在收藏夹里出现的是16*16;所使用的颜色最好成绩不要超过16色。(为了清晰),如果你不清楚可以在C盘查找*.ico格式的图标,应该能在IE缓存里找到那些网站的图标,你可以打开这些图标就可以知道该用什么格式的了,跟人家的一样就行。这里给大家一个制作favicon.ico的页面来为你的网站页面/软件制作图标(ICO),如:站点页面ICO图标在线制作

使用说明如下,

  • 选择本地文件后,该工具会自动转化,生成预览图。点击并下载相应大小的ICO文件保存即可。

  • 本地图像文件格式可以为jpg,gif,png均可。

  • 图像大小任意,该程序会将其自动缩放。但由于图片缩放可能会稍微影响质量。推荐你使用与转化后的尺寸相同的原始图片,即16*16(网站FAVICON)或48*48(软件图标)。

  • 网站图标使用方法:生成后网站ICO后(16*16像素的那个),保存为favicon.ico,然后上传到网站根目录。IE8在访问贵站的时候即可自动识别。为保存IE6正常显示,请在你的网页源代码块内加入此代码。

 

第三步,设计一个属于您自己的图标。 
你可以将您的网站的LOGO做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之,它一定要是属于您自己的,并且能很好的代表您的网站的风格和个性。然后将这个图标文件命名为:favicon.ico。可以制作的醒目些,比如我做的是一个白底蓝字的\"Adu\",自我感觉良好 呵 

最后,只需要将这个图标文件(favicon.ico)上传到您的网站所在的服务器的根目录下。(也就是你的主页index.html所在的那个文件夹)您不需要对您的网页文件作任何的修改,IE5会自动的不停的搜索您的网站的根目录,只要它一发现了favicon.ico 这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了。 

如果您希望为不同的页面设置不同的“收藏夹”图标,那么您就需要在该网页文件的HEAD部分加入下面的内容: 


注意:该图标的路径一定要使用绝对路径。 

还有一点需要说明的是:有些WEB站点的主机服务器不支持图标文件格式,那就没办法了。

对于一些常见浏览器不能显示favicon.ico图标说明如下:

 1. 搜狗浏览器favicon.ico在不显示的问题,解决方案如下:

如果已经在网页里的<head>与</head>之间加入代码<link rel="shortcuticon" href="/favicon.ico" />,也已经把favicon.ico图标上传至网站根目录。
消除浏览器缓存后,在搜狗浏览器仍然不显示favicon.ico图标时,可能是受FavIcon目录文件影响......
解决方法如下:
1.关闭搜狗浏览器;
2.点击“开始”——“运行”——输入以下字符:%appdata%/SogouExplorer/FavIcon  。
点击“确定”打开搜狗浏览器的FavIcon目录
3.把FavIcon目录下的内容全部删除即可。
解决!

 2. 360浏览器favicon.ico在不显示的问题,解决方案如下:

找到自己喜欢的图片,在线制作图标是不是很简单?如果您添加了favicon.ico图标后,在IE8及其他 浏览器下都能正常显示,但是360浏览器依然显示的是原来的图标,我试过相关操作:如清空浏览记录等办法,但结果还是没有显示出我上传的favicon.ico图标。 

最近发现很多网友都遇到这样的情况,经多方查找,终于发现了其中的原因,将自己的解决方法告诉大家,以帮助有需要的朋友,具体方法请看下面: 

①360浏览器在本地(即你自己使用的电脑上)会自动生成一个ICO文件夹,专门自动存放该电脑曾经用360浏览器浏览过的所有网站的favicon.ico图标,该ICO文件夹在本人电脑中的路为:C:\Users\y470\AppData\Roaming\360se\data\ico(如果实在找不到可在“我的电脑”中使用搜索功能---搜索“360se”这个文件夹)。 

②360浏览器在将网站favicon.ico图标存放到ICO文件夹后会自动将文件名由“favicon.ico”改名为“网站域名.ico” 。

③知道上述原因后,就很容易解决刚才出现的问题了:找到ico 文件夹,找到你网站对应ico图标即可彻底删除,然后在360浏览器下重新打开你的网站,就能显示你上传的favicon.ico图标。

如果有不明白的地方,可以给我留言。

↑ 上一篇文章:ASP.NET C#调用存储过程来获取output参数的值 关键词:asp.net,C#,SQL,Server,存储过程,o.. 发布日期:2015/7/7 17:44:09
↓ 下一篇文章:ASP.NET的基于SQL语句的分页与PagedDataSource的分页剖析 关键词:gridview,SQL语句,分页,Asp.net,Da.. 发布日期:2015/7/14 15:40:51
相关文章:
网页三剑客工具资料破解下载 关键词:html,网页,三剑客,dreamweaver,Fireworks,FLash 发布日期:2015-07-14 17:46
全面兼容ie[6-11]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览 关键词:全面,兼容,ie,火狐,Chrome,opera,maxthon3,360浏览器,js,Java.. 发布日期:2015-07-14 16:45
适用于各种主流浏览器的JS弹出一个相对位置的浮动层 关键词:javascript,JS,浮动层,div,各种浏览器,弹出,一个,相对位置,css,层,绝对位.. 发布日期:2015-07-20 17:37
相关目录:.NETJAVAJAVASCRIPTHTML
我要评论
正在加载评论信息......