㈠定义

⑴所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。

⑵根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。

㈡应用

⑴中文名称是网站头像。在我们的网站建设中，为网站打造一个契合网站主题的个性化标志则是必需的。

⑵favicon.ico图标是网站的缩略标志，可以显示在浏览器标签、地址栏左边和收藏夹，是展示网站个性的缩略logo标志，也可以说是网站头像，如果要让网站看起来更专业、更美、更有个性，favicon.ico是必不可少的。

⑶favicon也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用，一般为了提高网站的可用性，都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。

㈢制作

常用的Favicon.ico图标有3种16×16、32×32、48×48。

第一种方法：

1）制作一个16×16像素的favicon.ico图片，上传到网站根目录下。

2）把这段代码放在网页head区域里就行了。

注：这种方式，ico文件的名称一定要叫：favicon.

第二种方法：在线制作

1）首先准备处理logo图片，格式可以是jpg或者PNG格式的。

     使用PS，新建图层 100px*100px，logo图片置入

注意：这里图片的尺寸没有特别要求，但是大小限制在500k以内。

2）考虑到ico图标为正方形，且实际显示的尺寸是极小的，所以logo如果太大，建议选取里边最有辨识度的一部分作为ico图标。

    logo最好刚刚充盈整个图层。

3）保存为 .jpg .jpeg .gif .png等图像格式都可以，但是一般建议保存为 .jpg 、.png，比较好操作。

4）在网页搜索“ico”或“比特虫”，就能找到该网页工具。

    上传文件，一般默认尺寸，填好验证码，生成即可！

     将其下载到电脑里。

    也可以在这个网站上制作：（1）http://www.faviconico.org/

                                              （2）http://www.atool9.com/ico.php

5）.ico图标完成！

在网站后台找到原来的favicon.ico文件，将新的bitbug_favicon.ico改为favicon.ico，替换即可。

注：favicon的格式不一定是ico格式，它可以是png，jpg甚至是gif，不过ico格式是所有浏览器都支持的。

㈣使用方式

1）怎么查看一个网站的favicon.ico呢？
    在公司的网址后输入/favicon.ico；

2）在html中引入favicon.ico
将favicon.ico放入于html在同一个目录中，然后引入：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

放在title后面，head里面。

㈤网页上调用

浏览器调用favicon的原理是首先在网页所在目录寻找favicon.ico文件，如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的favicon文件命名为favicon.ico然后上传到网站的根目录下。

如果需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，就需要在网页Html文件中做设定了，在Html中的<head>部分加入如下的代码：

<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>

<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>

<link rel="icon" href="animated_favicon1.gif" type="image/gif" >

含义：在浏览器标签中显示favicon，在收藏夹中显示favicon。

㈥更新

favicon.ico如何更新? 

⑴如何更新favicon.ico图标,因为本地浏览器存在的缓存可能无法及时更新favicon.ico图标。 关闭所有打开的浏览器，并清空浏览器缓存。

⑵打开网站并加入收藏夹。 关闭浏览器,重新打开网站,就更新了。 若此时还未更新favicon.ico图标,请稍等一会再打开浏览尝试。

⑶如果是用360浏览器，无法更新，清除缓存的地址是C:\Documents and Settings\Administrator\Application Data\360se\data\ico；

这个位置记录你所浏览的网站的ico，删除你想更新的ico文件就好了，关掉浏览器，重新打开网站就更新了。

⑷如果使用的火狐或者chrome浏览器，则更新更加简单，使用火狐和chrome的隐私模式进行浏览即可更新缓存。

参考：https://baike.baidu.com/item/favicon.ico/8944811?fr=aladdin

什么是favicon.ico？的更多相关文章

  1. [转载]网站地址栏小图标favicon.ico的制作方法

    有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将 ...

  2. favicon.ico 404

    favicon.ico是一个图标文件.就是浏览网站时显示在地址栏的那个图标. 类似是百度的 显示在网站地址最前面的一张图片 可以在网站根目录(TOMCAT_HOME/webapps/ROOT/favi ...

  3. favicon.ico 404的问题(title栏前面的图标)

    1.页面中自定义图标 去  http://www.bitbug.net/   定制图片,有32*32,16*16等样式可供选择 2.在页面中引入定义的图片 <link rel="sho ...

  4. PHP获取网站图标（favicon.ico）文件

    有的网站源码中加入了这几行代码: <link rel="shortcut icon" href="/favicon.ico" type="ima ...

  5. Magento后台简单更换favicon.ico

    刚才需要更换网站的favicon.ico,就是浏览器url前面的那个小图标. 网上稍微搜搜一下,然后就震惊了,号多方法是替换文件的方法,而且文件散步在网站的各个角落. 其实,后台是有直接上传更换的方法 ...

  6. 关于favicon.ico，shortcut icon，icon

    引入一篇文章.关于favicon.ico二三事. http://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html 一直对favicon ...

  7. favicon.ico应用与正则表达式验证邮箱（可自动删除前后的空格）

    1.favicon.ico制作:favicon.ico可以ps制作;“shortcut icon”中间有一个空格 <head> <link rel="shortcut ic ...

  8. 站点图标favicon.ico

    favicon.ico图标: 网站的favicon.ico需要一次额外的http请求,无论你是否有在html里面添加 link链接 <link rel="shortcut icon&q ...

  9. favicon.ico文件简介

    本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到): favicon.ico 是啥?看下面这张图 ...

  10. 移动端页头推荐配置 出现找不到favicon.ico错误原因和解决方法

    favicon 在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico .为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一: ...

随机推荐

  1. springboot2.0整合freemarker快速入门

    目录 1. 快速入门 1.1 创建工程pom.xml文件如下 1.2 编辑application.yml 1.3 创建模型类 1.4 创建模板 1.5 创建controller 1.6 测试 2. F ...

  2. pb datawindow的用法

    1. 使DataWindow列只能追加不能修改如何使DataWindow中的数据只能追加新记录而不能修改,利用 Column 的 Protect 属性可以很方便的做到这一点,方法如下:将每一列的 Pr ...

  3. 查看linux服务器信息

    1.  vmstat 查看服务器内存,CPU等信息 一般是通过两个数字参数来完成的,第一个参数是采样时间间隔,单位是秒, 第二个参数是采样的次数 r:    表示运行队列,如果队列过大说明CPU很繁忙 ...

  4. EXSI宿主机更换硬盘后虚机启动有问题

    环境说明: 最近EXSI主机磁盘坏掉了,重新换掉磁盘以后启动虚机有问题. 虚机的报错信息如下: 找了下修复方法,操作过程为: 尝试修复 (以下是百度的方法) ls -l /dev/mapper mkd ...

  5. c# 是如何对一个可遍历对象实现遍历的

    public class Persons:IEnumerable { public Persons(string[] people) { this.people = people; } public ...

  6. 【weixin】微信h5支付

    一.使用场景 H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付. 主要用于触屏版的手机浏览器请求微信支付的场景.可以方便 ...

  7. A Pythonic Card Deck: __len__ & __getitem__ & for 循环的嵌套

    1. 列表生成式的嵌套 for 循环: 示例如下: li1 = range(1,6) li2 = list("ABC") # list("ABC") 的结果为 ...

  8. O054、Attach Volume 操作（Part II）

    参考https://www.cnblogs.com/CloudMan6/p/5631328.html     计算节点作为iSCSI initiator 访问存储节点 iSCSI Target 上的v ...

  9. Js-声明变量

    JS声明变量 js声明变量的方式有3种:let,const,var 1.const如果定义简单数据类型,变成常量,变量值不可以更改. const name="lili"; name ...

  10. 工控漏洞利用框架 - ISF(Industrial Security Framework)

    一. 框架介绍 本框架主要使用Python语言开发,通过集成ShadowBroker释放的NSA工具Fuzzbunch攻击框架,开发一款适合工控漏洞利用的框架.由于Fuzzbunch攻击框架仅适用于P ...