【知识点】Favicon.ico网页标题图标
2019-03-25 本文已影响0人
李李李李李晓华
Favicon.ico
Favicon.ico
一、什么是Favicon
你看上边的两张图片，是浏览器中书签的图片和打开网页时候标签页标题的小图标。
favicon，即FavoritesIcon的缩写，可以让浏览器的收藏夹或标题中除显示相应的标题外，还以图标的方式区别不同的网站。是一个缩略的网站标志ICO原本是windows中存储单个图案的一种图标文件格式，现可以用作软件、文件夹以及网站等的缩略标志，显示在用户的资源管理器，浏览器的地址栏、标题栏和多页面浏览器的标签栏上。图标文件一般尺寸较小，常见的是1616,3232和4848。图标是部分透明的，可以直接打开浏览*
二、拥有一个Favicon图标
Favicon图标是后缀名为icon格式的图片。
开发过程中Favicon图标一般由UI设计部门提供。
但是如果我们自己想让一张图片作为Favicon图标怎么办呢？以下两个网址供你参考：
http://bitbug.net/
http://www.faviconico.org/
常用的Favicon.ico图标有3种16×16、32×32、48×48。选取一个你需要的吧。
作为一个专业的业余画家，我给自己做了一个图标，然后转换成了ico。我就用这个图标尝试吧。
我制作的图标
三、使用Favicon
1）项目上线使用方法：浏览器调用 favicon的原理是首先在网页所在目录寻找favicon.ico文件，如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的favicon文件命名为favicon.ico然后上传到网站的根目录下。
2）我们自己本地项目测试使用方法：
自己测试可以使用：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>网站图标</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<!--rel:代表规则引入的是icon图标-->
<!--herf：路径地址-->
<!--type:引入类型是icon格式的image类型-->
</head>
<body>
</body>
</html>
看一下效果吧：
标签页
书签页
