打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标，当网页被添加到收藏夹或者书签中时也会出现网页的图标，怎么在网页title左边显示网页的logo图标呢？

方法一（被动式）：

制作一个ico格式的图片，将图片命名为favicon.ico，像素大小为16*16，所使用的颜色不得超过16色，然后再把favicon.ico放到网站的根目录下就行了。这样的话浏览器会不停的搜索您的网站的根目录，只要它一发现了名字叫做favicon.ico 这个文件，就会将该图标显示在访问者的地址栏和收藏夹列表中了。

这时候浏览器爬虫会自动抓取favicon.ico显示

方法二（自动式）：

在网页HEAD标记中添加如下代码：

标题栏：
<link rel="icon" href="ico地址" type="image/x-icon">
收藏夹：
<link rel="shortcut icon" href="ico地址" type="image/x-icon">

注意：图标要用 16*16 色的。。。(保证了兼容性，无论在哪个地方都可以显示)

同时在使用方法二的时候，就不一定要把图形文件放在网站的根目录下面了，你可以放在任何位置，甚至直接连结到其他网站上面的图形文件也可以，而且图形文件的文件 名也不一定要叫做 favicon.ico，可以自己随便取。 不过要注意的是使用这个做法的话，只有在把有加入上面 HTML 语法的页面加入书签的时候才会有作用。

网站添加ico图标的更多相关文章

  1. 为网站添加ico图标

    1.将目标图片装换为.ico格式 在线转换工具:http://www.bitbug.net/ 2.将装换后的图标放入项目文件中,一般命名为favicon 3.在项目文件的index页面中引入 < ...

  2. 网站简介-为什么网站的ICO图标更新后，ie浏览器没有更新过来？

    为什么网站的ICO图标更新后,ie浏览器没有更新过来? 如何更新本地ico图标? 收藏夹里的网址访问后网站ico小图标怎么不会更新,还是没图标的. 如果制作了一个新的favicon.ico图标,并且已 ...

  3. 在vue中添加ico图标

    准备:添加 ico图标在与index.html同级的目录 第一种方法: 在index.html中引入: <link rel="shortcuticon" type=" ...

  4. 那么如何添加网站favicon.ico图标

    1.  获得一个favicon.ico的图标,大小为16px×16px最为合适 2. 将制作好的图标文件Favicon.ico上传到网站的根目录: 3. 在首页文件的html代码的头部中加入如下代码: ...

  5. javaweb中如何给自己的网站更改ico图标

    我们在查看网页的时候很多网站都有自己的小图标,系统读取这个标志的时候先从你的项目的根目录下读看有没有favicon.ico文件,如果有直接显示这个图标,如果没有,则会去webapps/root/下找这 ...

  6. GoLang 编译exe添加ICO图标

    我们在做Go开发的时候在Window平台下编译出来的exe后大部分都是没有图标,看起来很难看.下面我们说下如何添加一个图标. 1.首先在根目录下,exe的同级目录下创建.rc文件, IDI_ICON1 ...

  7. 给网站设置ICO图标

    方法一:         直接在站点根目录下放入名为:favicon.ico 的图标文件(必须要为 ICO 文件,BMP 及其他格式的图片文件不行).还有将 favicon.ico 中的 favico ...

  8. 网站favicon.ico 图标

    favicon.ico一般用于作为缩略的网站图标,它显示在浏览器的地址栏或者标签上.目前主要的浏览器都支持favicon.ico图标. 一.制作favicon图标 1.把图标切成png图片. 2.把p ...

  9. VUE添加网站favicon.ico图标

    1.修改webpack.dev.conf文件   webpack.prod.conf文件 new HtmlWebpackPlugin({ filename: 'index.html', templat ...

随机推荐

  1. 将数据缓存到sessionStorage中

    //获取侧边栏 if (sessionStorage.getItem(`${env}${empId}leftMenu`)) { const leftMenu = JSON.parse(sessionS ...

  2. bzoj 2749 - 外星人

    Description 给定一个数的标准分解\(N= \prod_{i=1}^n p_i^{q_i}\) 其中\(p_i \le 10^5, q_i \le 10^9\) 求最小的\(x\)使得\(\ ...

  3. foj 2111 Problem 2111 Min Number

    Problem 2111 Min Number Accept: 1025    Submit: 2022Time Limit: 1000 mSec    Memory Limit : 32768 KB ...

  4. favicon还是这个网站生成的比较正确

    原文发布时间为:2011-11-16 -- 来源于本人的百度文章 [由搬家工具导入] http://tools.dynamicdrive.com/favicon/ http://www.rw-desi ...

  5. jquery 中的post和get方法同步问题

    解决方法: 在需要同步的js代码前修改ajax的async属性. 有两种设置方法: 1: $.ajaxSettings.async = false; 2: $.ajaxSetup({ async : ...

  6. Codeforces 922F Divisibility （构造 + 数论）

    题目链接  Divisibility 题意 给定$n$和$k$,构造一个集合$\left\{1, 2, 3, ..., n \right\}$的子集,使得在这个集合中恰好有$k$对正整数$(x, y) ...

  7. 网站优化—mysql explain执行计划

    explain执行计划 简介MySQL调优: 先发现问题(慢查询,profile) 对于使用索引和没有使用索引,了解到索引可以快速去查找数据 了解什么是索引(索引是排好序的快速查找的数据结构) 索引的 ...

  8. Linux笔记：crond

    crontab中列出需要执行的命令及执行时间.由于指定的日期Day与星期Week不是相互包含的关系,而是有相交也有不相交的时间.当日期数与星期数均指定为确定值的时候,指令的执行时间到底是什么样的,之前 ...

  9. Needle in a haystack: efficient storage of billions of photos 【转】

    转自09年的blog,因为facebook在国内无法访问,故此摘录. The Photos application is one of Facebook’s most popular features ...

  10. CoreData: 如何预载/导入已有的数据

    原文地址:CoreData: 如何预载/导入已有的数据作者:出其东门 在系列教程一中,我们为对象建立了可视化数据模型,运行了快速肮脏测试并勾在一个表视图(table view)中来显示.而在这个教程, ...