`

制作浏览器地址栏&收藏夹里的小图标

阅读更多

如果您使用的 WEB 浏览器是 IE5 或以上版本,那么当您将某些网站(如:网易、Yahoo等等)加入到“收藏夹”后,您是否注意到在这些网站标题的旁边还有一个独具个性的图标呢?这就是“收藏夹图标”(F avorites Icon)。就拿“网易”来说,在标题“Welcome to netease !” 的左边,IE5 默认的图标被换成了一个红色的变体中文“易”字。非但如此,如果您正在浏览“网易”,这时 IE5 的地址栏中的图标也同样是一个红色的“易”字。也正是因为这些个性化的图标使得他们在您的“收藏夹”众多的白底蓝 e 中显得格外的醒目。

    您是不是也希望为您的网站加上一个体现您的主页的风格和个性的图标呢?其实要实现这一目的非常简单。

    第一步,准备一个图标制作软件。

    首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以 .ico 作为扩展名。普通的图像设计软件无法使用这种格式,所以您需要到一个软件下载站点去下载一个图标制作软件。您也可以访问http://www.favicon.com/,这里提供一个免费的在线“收藏夹”图标生成器,如果您 E 文够好的话,在这里您还可以了解到更多的关于“收藏夹”图标的知识。


    第二步,确定“收藏夹”图标的规格。

   “收藏夹”图标有着它特有的规格:图标的大小为 16 * 16(以像素为单位);所使用的颜色不得超过 16 色。 (为了清晰)


   第三步,设计一个属于您自己的图标。

    您可以将您的网站的 LOGO 做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之,它一定要是属于您自己的,并且能很好的代表您的网站的风格和个性。然后将这个图标文件命名为:f avicon.ico。


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


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


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


    还有一点需要说明的是:有些 Web 站点的主机服务器(如:Geocities )不支持图标文件格式,这时您就需要与管理员联系,要求他开通图标文件格式的支持。

分享到:
评论

相关推荐

    浏览器地址栏中显示自定义小图标

    当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户...

    地址栏收藏夹图标设置页面禁止全选复制粘贴及右键

    Java项目,在MyEclipse中跑,没什么要求, ...2、收藏夹中显示出你的图标. 3、页面全选被屏蔽; 4、防止复制; 5、鼠标右键被屏蔽; 6、输入法被屏蔽; 7、粘贴被屏蔽; 每个功能 1 分,很合理,O(∩_∩)O谢谢合作 QQ:83433857

    ICO转换工具网页中如何设置在网页地址栏中的小图标:

    在浏览器地址栏有csdn有一个"圆圈"图标 如何在自己的jsp网页之中设置? 通常做法是: 要预先制作一个图标文件,大小为16*16像素。文件扩展名为ico,然后上传到相应目录中。 在源文件“<head></head>”之间添加如下代码...

    地址栏收藏夹图标页面禁止选中复制粘贴及右键点击

    Java项目,在MyEclipse中跑,没什么要求, ...2、收藏夹中显示出你的图标. 3、页面全选被屏蔽; 4、防止复制; 5、鼠标右键被屏蔽; 6、输入法被屏蔽; 7、粘贴被屏蔽; 每个功能 1 分,很合理,O(∩_∩)O谢谢合作 QQ:83433857

    C#简单浏览器(再次修改了)

    添加了 一个html解析的 小东西 测试了 所有的功能 实现 网页保存为 JpG 图片 也有个小的收藏夹, 因为用大浏览器不习惯就自己做了个 ,想实现地址栏图标 实在能力有限找了很久也没找到办法,不知道怎么去搜网站根...

    智慧云浏览器国际版 2.5.exe

    四、强大的搜索系统 打开位置:主页面上方,相邻地址栏 在Wise浏览器地址栏的旁边有一个微型搜索框。默认引擎为百度、谷歌供选(下拉√选择搜索引擎)。只需在微型搜索框中输入想要搜索的内容就可直接进行搜索,...

    给网站添加 favicon的技巧 网址前面的小图标

    当然,这不仅仅是 Favicon的全部,根据浏览器的不同,Favicon 显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户...

    网际畅游 MyIE 3.0 源代码

    图标化的进度显示: 在浏览时每个标签旁都有一个小图标来显示该页当前的下载进度。 当图标为白色时进度在0%-25%之间,当蓝色区域占四分之一时进度在25%-50%之间,以此类推。当图标消失时说明该页已经下载完毕了。红色...

    Maxthon2.0.2.2961苦菜花增强优化安装版

    登陆对话框清理帐户信息功能的缺陷 (13837) * 单行收藏夹的添加或删除按钮里面无法选择按钮, 并且最热条目按钮的名字为 aa (13940) * 广告猎手编辑过滤列表时按 Esc 键对话框变灰 (14049) * 地址栏在当前...

    世界之窗 3.5.0.3

    6、修复了地址栏下拉列表偏小的问题; 7、修复了某些情况下,批量下载文件可能导致文件名解析不正确的问题; 8、修复了查看历史记录菜单在窗口最大最小化时不消失的问题; 9、修复了无法切换网站兼容模式的问题;...

    经典Dreamweaver插件

    就像image 的alt=…… ie_favicon 你只需要一个漂亮的ico格式图片,您的地址栏IE图标将与众不同 favorite_menu 为DW增加一个Favorites 菜单,类似IE收藏夹 layer_transitions 层的多种转换特效 ...

    js使用小技巧

    地址栏图标 <link rel="Shortcut Icon" href="favicon.ico"> favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 收藏栏图标 查看源码 查看网页源代码 onclick="window.location = "view-source:"+ ...

    KODExplorer 芒果云-资源管理器

    - 修复添加收藏夹问题(已打开设置窗口再添加失败问题) - 修复树目录中文文件名bug - 优化pic图片幻灯片播放 - 优化新建文件&文件夹 清空选择状态 - 对话框组件 ie8 优化;tips不显示任务栏; - 优化地址栏过...

    Dreamweaver 扩展

    ie_favicon 你只需要一个漂亮的ico格式图片,您的地址栏IE图标将与众不同 favorite_menu 为DW增加一个Favorites 菜单,类似IE收藏夹 layer_transitions 层的多种转换特效 dhtml_tooltips 为页面或链接增加一个dHTML...

    Dreamweaver 插件集

    你只需要一个漂亮的ico格式图片,您的地址栏IE图标将与众不同 favorite_menu 为DW增加一个Favorites 菜单,类似IE收藏夹 layer_transitions 层的多种转换特效 dhtml_tooltips 为页面或链接增加一个dHTML的脚注(即...

    Maxthon2.0.2.2961苦菜花增强清爽精简版

    登陆对话框清理帐户信息功能的缺陷 (13837) * 单行收藏夹的添加或删除按钮里面无法选择按钮, 并且最热条目按钮的名字为 aa (13940) * 广告猎手编辑过滤列表时按 Esc 键对话框变灰 (14049) * 地址栏在当前...

    70款经典Dreamweaver插件

    ie_favicon 你只需要一个漂亮的ico格式图片,您的地址栏IE图标将与众不同 favorite_menu 为DW增加一个Favorites 菜单,类似IE收藏夹 layer_transitions 层的多种转换特效 dhtml_tooltips 为页面或链接增加一个dHTML...

    JavaScript实用范例词典04-14

    5.28 改变在浏览器地址栏中显示的 图标... 131 5.29 弹出一个新窗口... 131 5.30 弹出一个无属性栏的窗口... 132 5.31 弹出广告窗口... 133 5.32 弹出多个窗口... 134 5.33 指定弹出窗口的位置(IE) 135 5.34 ...

    Delphi 7 新概念百例

    内容如下:├─综合应用篇│ ├─87 用TreeView来显示数据库信息│ ├─86 显示彩色数据表格│ ├─85 文件切割器│ ├─84 加密解密器│ ├─83 TButton增加OnMouseLeave事件│ ├─82 将IE收藏夹导出为HTML文件│ ...

Global site tag (gtag.js) - Google Analytics