一、什么是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>
看一下效果吧: