开发者社区> jefferyjob> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

自定义网站的icon和收藏夹图标

简介: 定制网站收藏夹图标的方法有两种: 第一种方法:   第一步,当然是准备一个能体现您的主页的风格和个性的图标。比较简便的办法除了下载,就是将您的网站的logo做成一个图标。   第二步,将这个图标文件命名为:favicon.ico。   第三步,将favicon.ico上传到您的网站所在的服务器的根目录下。您不需要对您的网页文件作任何的修改,Internet Explorer 5会自
+关注继续查看
定制网站收藏夹图标的方法有两种:

第一种方法:
  第一步,当然是准备一个能体现您的主页的风格和个性的图标。比较简便的办法除了下载,就是将您的网站的logo做成一个图标。
  第二步,将这个图标文件命名为:favicon.ico。
  第三步,将favicon.ico上传到您的网站所在的服务器的根目录下。您不需要对您的网页文件作任何的修改,Internet Explorer 5会自动的不停的搜索您的网站的根目录,它一旦发现了favicon..ico这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了。
  使用这种方法来定制收藏夹图标,有一个明显的缺陷,就是收藏夹图标只能在网站的首页中显示。

第二种方法:
  第一步,还是准备一个能体现您的主页的风格和个性的图标。
  第二步,将这个图标文件命名为任意的文件名,如myicon.ico。
  第三步,在网页文件的head部分加入下面的内容:  
<link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/x-icon">。
  注意:图标文件的路径一定要使用绝对路径。
  这种方法就可以使所有的页面都能显示收藏夹图标了。
  最后还有一点需要说明的是,有些Web站点的主机服务器(如:Geocities)不支持图标文件格式(.ico),这时您就需要与系统管理员联系,要求他开通对图标文件格式的支持,当然也可以使用type属性来定义图片的类型,如:type="image/x-icon"    "image/png"    "image/gif"



通过link rel="icon"可以实现部分浏览器的动画图标效果

语句一:<link rel="shortcut icon" href="favicon.ico" />
语句二<link rel="icon" href="animated_favicon.gif" type="image/gif" />


Favicon功能最早由微软创设,而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium(W3C,万维网联盟)的HTML建议[1],因为:


rel属性必须包含一个用空格作分隔符的link类型的列表,所以一个包含两词的link类型不能被遵守标准的浏览器理解。 
“.ico”文件类型(一种用于Microsoft Windows上图标的光栅格式)没有一个注册的MIME类型,而且似乎在当时也不能被多数浏览器理解。然而2003年,这一格式在IANA获得注册,其MIME类型是image/vnd.microsoft.icon,进而消除了此问题的第一部分。 
在网站上使用保留地址(reserved location)与Architecture of the World Wide Web(互联网的结构)矛盾,同时被认为是link squatting(链接劫持)或URI squatting(URI劫持)。

Mozilla浏览器通过一种遵从Web标准的方法添加了对favicon的支持。它采用rel="icon"并允许网络设计人员添加任何支持的图像格式的favicon。例如
<link rel="icon" type="image/png" href="/path/image.png">。
后来鉴于此功能将被用于所有新内容,多数浏览器都对此功能增加了支持。

利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件。当然,也可以在<head></head>之间加上
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
就可以了。但是,ico给出的是静态的图标文件。

如果想要动起来,就得做个gif动画了。gif动画也是16*16的,传到服务器。在<head></head>之间加上:
<link rel="icon" href="animated_favicon.gif" type="image/gif" >
就可以了。

如果想要收藏夹中的图标也要改变的话,那么就加上这句:
<link rel="Bookmark" href="favicon.ico" />
这个图标还可以使用png格式,png格式现在的势头很猛。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
网页导航hot图标按钮
网页导航hot图标按钮
0 0
在程序中使用自己设计的ICON图标
使用thymeleaf模板引擎,少不了图标,常用的图标库:FontAwesome、glyphicons;那么如何把自己设计的图标引用到自己的程序中去呢?
0 0
扩展EasyUI在页面中马上显示选中的本地图片
在编写前台页面的时候,有时须要将选中的图片夹杂着其它信息一起上传到服务端,在选着本地图片的时候,为了获得更好的效果,须要将该图片显示在页面上。
1954 0
自定义地址栏与收藏夹中的图标
关于Favicon favicon 在英文中有几个别名,叫做 shortcut icon,website icon,tab icon,URL icon,bookmark icon,对应中文来说也叫作网页小图标、网站缩略图或收藏夹图标、书签图标。
1013 0
开发常用图标png、ico 图标下载
推荐几个不错的下载地址: 1、http://www.easyicon.net/ 2、http://588ku.com/sucai/ 3、http://www.iconpng.com 可直接下载png等图标    作者:唐宋元明清2188 出处:http://www.cnblogs.com/kybs0/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。
1051 0
开源项目——带图标文字的底部导航栏IconTabPageIndicator
接下来的博客计划是,在《Android官方技术文档翻译》之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译了。当然,其他的文章笔记也会偶尔发一下。
645 0
Endless icon: 每天都更新的图标集
在今天的文章中,我们介绍一个全新的图标集网站Endless Icon,在这里每天都会有添加一些不同类型最新的图标进去,所有的图标都是黑白色的,不论是粗线条还是手绘的图案在这里都可以找得到。包含了关于图表、食品、运动等还有其他类型的各式各样的元素。
381 0
+关注
jefferyjob
继承,是幸福的延续;重载,是幸福的重生。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载