简单谈谈favicon

favicon.ico介绍

favicon.ico是个什么东西呢,也许见得太多都习以为常了(我就是这样,直到写这篇文章之前才知道),看看维基百科的解释:

代码如下:

Favicon是favorites icon的缩写,亦被称为website icon(网页图标)、page icon(页面图标)或urlicon(URL图标),下面是链接 http://zh.wikipedia.org/wiki/Favicon

其实说白了就是这个东西,大部分网站都会在打开的浏览器tab最左侧显示这个小图标,这个就是favicon.ico

这个图标怎么设置的呢,有多少同学跟我一样对这个小细节习以为常了,但是不清楚怎么设置举个手(这里检讨下自己,有好多细节东西把脸都能碰肿,但我却不真正的了解他,更可怕的是我的潜意识里认为我了解他......)。

favicon设置

这个怎么设置呢,设置方法很简单,有两种法子:

默认放置在服务器根目录下面

就是将文件命名为favicon.ico并放在网站根目录下就可以,浏览器会自动方请求去获取http://host/favicon.ico,这个请求在浏览器中通过F12是看不到的,需要借助其他工具(比如说Fiddler)去看,或者打开服务器访问日志,比如我这个,nginx日志中会显示网页图标请求
"13/May/2015:16:07:31 +0800" "192.168.X.X" "test.test.com" "200" "GET /favicon.ico HTTP/1.1" "4409" ......

通过link标签修正网页图标位置和名称

这种方法就是通过html的link标签设置网页图表的位置和名称,就像下面这样
<link href="favicon_baoman.ico" type="image/x-icon" rel="icon">

注意点

浏览器会缓存图标的信息,firefox我试了下是每隔一段时间(2分钟左右)就会请求一次favicon,chrome要删除数据才可以重新请求~~

这个有什么影响呢

发现这个问题是因为PHP框架,PHP框架通过pathinfo去解析路由,路由方式为【mod/controller.method】,如果不匹配的话就记录日志并返回404,我访问一个正确的路径也会报错说是路由不存在,但是接口返回是ok的,访问一个错误的路由会记录两条错误日志,这个是怎么回事呢,下面是我的nginx配置

 server {
   listen  80;
   server_name test.test.com;

   location / {
     root /export/adsz/boss/php/sphp;
     fastcgi_pass  127.0.0.1:9000;
     fastcgi_index  index.php;
     fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     fastcgi_param PATH_INFO $fastcgi_path_info;
     include fastcgi_params;
     rewrite ^/(.*)$  /index.php/$1 break;
   }
 }

nginx配置导致了这个问题的存在,浏览器请求一个接口的时候,会默认带上http://test.test.com/favicon.ico,这个时候报出路由错误就想的通了,浏览器发出两条请求,一条使我们想要的,另一条就是这个ico网页图标请求,这个问题解决方法也很简单,只需要在配置中添加这个图表或者将favicon请求定位到其他地方:

 server {
   listen  80;
   server_name test.test.com;
  location = /favicon.ico {
    root /wwroot/public/images/;
  }
   location / {
     root /wwroot/;
     fastcgi_pass  127.0.0.1:9000;
     fastcgi_index  index.php;
     fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     fastcgi_param PATH_INFO $fastcgi_path_info;
     include fastcgi_params;
     rewrite ^/(.*)$  /index.php/$1 break;
   }
 }

总结

找到这个原因并修改后,我又仔细看了看nginx配置,发现其他虚拟主机都有配置这个favicon.ico的匹配规则!囧。。。,总结下,就是要多看看,多想想为什么,不要对很多东西失去兴趣、见怪不怪

以上所述就是本文的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • nginx关闭favicon.ico、robots.txt日志记录配置

    nginx日志最近发生大量访问favicon.ico无法找到的404错误日志,小编感觉很影响服务器性能,对于一个高并发的服务器每一个错误都会影响性能,所以需要关闭访问favicon.ico的日志记录功能. 复制代码 代码如下: # 把以下配置放到 server {} 块. #关闭favicon.ico不存在时记录日志location = /favicon.ico {log_not_found off;access_log off;} location = /robots.txt {allow a

  • 给自己的网站制作一个favicon.ico图标的实现方法

    ico图标是网站的头像,在打开网站的时候出现在IE的地址栏里,目前大多数浏览器都支持,最常用的IE6.0则显示加入本地收藏夹网站的ICO图像: 绝大多数网站可以没有ICO头像,但如果做为一个一流的网站,没有ICO头像是很难令人信服的.就好象一个人穿了一身正装但却没有打领结一样冒失. 以下是一些名站的头像: Google0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height

  • node.js中的favicon.ico请求问题处理

    复制代码 代码如下: var http=require("http");  var server=http.createServer();  server.on("request",function(req,res){5         console.log(req.url);      res.end();  });  server.listen(1337,"127.0.0.1"); 这样的代码在请求时会出现两条请求: 第一条时URL地址为用

  • 激发你的灵感:50个优秀的Favicons

    原文:http://www.smashingmagazine.com/page/2/翻译:Blank(怿飞) Inspire Yourself: 50 Remarkable Favicons激发你的灵感:50个优秀的Favicons 引用:Actually it's a pity that many designers don't really make use of them. Favicons, mini graphics for a particular web-site, can be

  • 简单谈谈favicon

    favicon.ico介绍 favicon.ico是个什么东西呢,也许见得太多都习以为常了(我就是这样,直到写这篇文章之前才知道),看看维基百科的解释: 复制代码 代码如下: Favicon是favorites icon的缩写,亦被称为website icon(网页图标).page icon(页面图标)或urlicon(URL图标),下面是链接 http://zh.wikipedia.org/wiki/Favicon 其实说白了就是这个东西,大部分网站都会在打开的浏览器tab最左侧显示这个小图标

  • 简单谈谈require模块化jquery和angular的问题

    require 模块化开发问题,正常自己写的模块 是exports 导出一个模块 //模块化引入jquery 不同和问题 require 引入jquery swiper .... 插件和库的时候需要 require.config({ baseUrl:"js/libs", //文件夹目录相对与html的位置 paths:{ 'jquery':"jquery-1.9.1" //插件或库的文件名 'swiper':"文件名/swiper" //当每个插

  • 简单谈谈vue的过渡动画(推荐)

    在vue中,实现过渡动画一般是下面这样: <transition name="fade"> <div></div> </transition> 用一个transition对元素或者组件进行封装. 在过渡的时候,会有 4 个(CSS)类名在 enter/leave 的过渡中切换. 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效

  • react系列从零开始_简单谈谈react

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到webpack,node等前端知识,每天会更新一篇.这篇react的系列博客会覆盖react目前的所有知识点: 一.React基础 1.React 虚拟DOM概念,React的性能高效的核心算法 2.React组件,理解什么叫组件化 3.React组件嵌套 4.JSX内置表达式 5.React的生命周

  • 简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

  • 简单谈谈Core Animation 动画效果

    在开始之前呢,先了解一下UIView和CALayer大体的区别(重点列举了以下四点): •UIView 继承自 UIResponder,因此UIView 可以处理响应事件,而CALayer继承自NSObject,所以它只是负责内容的创建,绘制. •UIView 负责对内容的管理,而CALayer则是对内容的绘制 •UIView 中有关位置的属性只有frame.bounds.center,而CALayer除了具备这些属性之外还有anchorPoint.position. •通过修改CALayer可

  • 简单谈谈Struts动态表单(DynamicForm)

    动态表单的含义是不要手动定义,直接在配置文件中进行定义. 1.手动进行定义 <form-beans > <form-bean name="userForm" type="org.apache.struts.action.DynaActionForm"> <!-- 该表单的属性是配置出来的 --> <form-property name="username" type="java.lang.Str

  • 简单谈谈原生js的math对象

    Math对象方法 //返回最大值 var max=Math.max(95,93,90,94,98); console.log(max); //返回最小值 var min=Math.min(95,93,90,94,98); console.log(min); //向上取整 console.log(Math.ceil(2.2)); console.log(Math.ceil(-2.2)); //向下取整 console.log(Math.floor(2.2));//2 console.log(Mat

  • 简单谈谈JS中的正则表达式

    1.正则表达式包括两部分 ①定义正则表达式的规则: ②正则表达式的模式(i/g/m): 2.声明正则表达式 ① 字面量声明: var reg = /表达式规则/表达式模式: eg:var reg = /white/g: ② 使用new关键字: var reg = new RegExp("表达式规则","表达式模式") eg: var reg = new RegExp("white","g"): 3.正则表达式的三种模式 ① g

  • 简单谈谈Python中的json与pickle

    这是用于序列化的两个模块: • json: 用于字符串和python数据类型间进行转换 • pickle: 用于python特有的类型和python的数据类型间进行转换 Json 模块提供了四个功能:dumps.dump.loads.load pickle 模块提供了四个功能:dumps.dump.loads.load import pickle data = {'k1':123, 'k2':888} #dumps可以将数据类型转换成只有python才认识的字符串 p_str = pickle.

随机推荐