简单谈谈favicon


Posted in PHP onJune 10, 2015

favicon.ico介绍

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

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

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

简单谈谈favicon

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

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">

简单谈谈favicon

注意点

浏览器会缓存图标的信息,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的匹配规则!?濉!!#?芙嵯拢?褪且?嗫纯矗?嘞胂胛?裁矗?灰?院芏喽?魇?バ巳ぁ⒓?植还?/p>

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

PHP 相关文章推荐
比file_get_contents稳定的curl_get_contents分享
Jan 11 PHP
分享一个PHP数据流应用的简单例子
Jun 01 PHP
php的memcache类分享(memcache队列)
Mar 26 PHP
php禁止浏览器使用缓存页面的方法
Nov 07 PHP
php简单实现快速排序的方法
Apr 04 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
Oct 10 PHP
php 生成签名及验证签名详解
Oct 26 PHP
PHP实现的简单AES加密解密算法实例
May 29 PHP
Laravel学习教程之IOC容器的介绍与用例
Aug 15 PHP
Laravel框架实现的批量删除功能示例
Jan 16 PHP
PHP convert_uudecode()函数讲解
Feb 14 PHP
PHP高并发和大流量解决方案整理
Dec 24 PHP
简单谈谈php中的unicode和utf8编码
Jun 10 #PHP
PHP中生成UUID自定义函数分享
Jun 10 #PHP
php使用for语句输出三角形的方法
Jun 09 #PHP
php生成图片验证码
Jun 09 #PHP
php判断用户是否手机访问代码
Jun 08 #PHP
浅谈PHP中Stream(流)
Jun 08 #PHP
php实现有趣的人品测试程序实例
Jun 08 #PHP
You might like
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
axios基本入门用法教程
2017/03/25 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
详解python中的lambda与sorted函数
2020/09/04 Python
基于python实现坦克大战游戏
2020/10/27 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
金融专业应届生求职信
2013/11/02 职场文书
社区志愿者心得体会
2014/01/03 职场文书
八项规定对照检查材料
2014/08/31 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015年信访工作总结
2015/04/07 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python