简单谈谈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 相关文章推荐
图书管理程序(三)
Oct 09 PHP
详解:――如何将图片储存在数据库里
Dec 05 PHP
让你的网站首页自动选择语言转跳
Dec 06 PHP
php中设置index.php文件为只读的方法
Feb 06 PHP
php预定义变量使用帮助(带实例)
Oct 30 PHP
php中ob_get_length缓冲与获取缓冲长度实例
Nov 20 PHP
PHP简单生成缩略图相册的方法
Jul 29 PHP
php 实现进制相互转换
Apr 07 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
Jan 16 PHP
phpstudy默认不支持64位php的解决方法
Feb 20 PHP
php操作redis常见方法示例【key与value操作】
Apr 14 PHP
THINKPHP5分页数据对象处理过程解析
Oct 28 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
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
javascript基本数据类型和转换
2017/03/17 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
聊聊Python中的pypy
2018/01/12 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Python实现最常见加密方式详解
2019/07/13 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
基督教追悼会答谢词
2015/09/29 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python
python神经网络Xception模型
2022/05/06 Python