【知识点】Favicon.ico网页标题图标

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>

看一下效果吧:


标签页

书签页
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,970评论 1 45
  • 制作和使用favicon小图标 打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者...
    时修七年阅读 4,826评论 0 0
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,195评论 4 61
  • 噢,原来春天到了... 你怎么知道... 看着你发情的样子我就知道... 滚蛋...
    Gakki喲阅读 1,358评论 0 0
  • 九败一胜,美团走了八年多,王兴终迎上市,成为中国互联网又一巨头。他有句话我很喜欢:你对未来越有信心,就会越有耐心。
    上海滩天启阅读 949评论 0 0