㈠定义

⑴所谓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. pom.xml配置 2. application.yml配置 3. 使用模板文件静态化 3.1 创建测试类,编写测试方法 3.2 使用模板字符串静态化 使用freemarker将页面生成h ...

  2. 【已解决】Field injection is not recommended和Could not autowired. No beans of 'xxx' type found.

    目录 问题 解决办法 备注 问题 在项目中,我们使用Spring的@Autowired注解去引入其他类时有时候阿里的编码规约插件就会提示:"Field injection is not re ...

  3. 使用 ASP.NET Core 的 gRPC 服务

    将 gRPC 服务添加到 ASP.NET Core 应用 gRPC 需要gRPC包. 配置 gRPC 在 Startup.cs 中: gRPC 是通过AddGrpc方法启用的. 每个 gRPC 服务通 ...

  4. phpcms修改重置后台账号和密码

    通过Phpmyadmin等工具,打开数据库中找到v9_admin表: 把password字段值改为: 0b817b72c5e28b61b32ab813fd1ebd7f再把encrypt字段值改为: 3 ...

  5. scrapy命令：scrapy genspider详解 转

    当我们使用: scrapy startproject taobao 命令创建好scrapy蜘蛛后,你是否注意到,下面还有这么一行内容: F:\scrapyTest> scrapy startpr ...

  6. ios上滚动不顺畅css处理方式

      overflow-y: auto; -webkit-overflow-scrolling: touch;

  7. 5、Sersync实时同步实战

    1.实时同步概述 1.什么是实时同步, 只要当前目录发生变化则会触发一个事件,事件触发后将变化的目录同步至远程服务器. 2.为什么要实时同步, 保证数据的连续性, 减少人力维护成本, 解决nfs单点故 ...

  8. functools：管理函数的工具

    介绍 functools模块提供了一些工具来管理或扩展和其他callable对象,从而不必完全重写 修饰符 偏函数partial from functools import partial ''' f ...

  9. SQL语句复习【专题六】

    SQL语句复习[专题六] 用户 + 创建表  --创建一个新的用户,然后给新的用户创建一张表,然后给表中添加一些数据.查询表中的数据 --创建用户需要比较大的权限 DBA create user di ...

  10. QQ空间添加背景音乐

    QQ空间背景音乐方式 1.QQ音乐添加背景音乐一种是开通绿砖[有矿的忽略此条]2.QQ空间添加网络音乐的方法步骤:1.首先,需要先下载好想要音乐作为QQ空间背景音乐的歌曲文件(建议为MP3格式)[我这 ...