本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。
浏览器加载网站的时候,都会默认请求一个favicon.ico文件。当然,如果页面代码里面有额外指定图片的话,是会遵守这个代码指定的。如果没有特殊说明的话,就默认请求favicon.ico文件。这个问题,表面上看起来很简单。但是机缘巧合之下,就会有导致一些特殊的issue发生。favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站logo。 目前主要的浏览器都支持favicon.ico图标。
浏览器默认请求的favicon.ico文件,可能带来的问题(图5-1)这里需要说明的是:favicon.ico是默认加载的,但是也不是说总会恒定请求这个文件,特殊情况有缓存的情况下,这个文件是不会多次请求加载的。
本文测试环境:mac/php72/nginx。
问题一:莫名其妙的404
由于这个favicon.ico文件是默认请求的,所以很多时候,大家可能并不会意识到这个请求的存在。所以,普通的情况下,会产生一个404请求。当然,如果在nginx的层面上,对404请求进行了路由改写的话。那么,就有一定的概率会导致请求了个错误的文件。
浏览器默认请求的favicon.ico文件,可能带来的问题(图5-2)
像在seo行业里面,对404状态码是极其敏感的。而这个极大概率会发生404的favicon.ico文件,就是需要特别注意的。
浏览器默认请求的favicon.ico文件,可能带来的问题(图5-3)
问题二:默认首页被多次请求
对于现在的php框架来说,把所有的404请求,都改写到index.php是一种趋势。很多人都在这么干。那么,对默认请求的favicon.ico文件来说,就可能会导致index.php被第二次请求。这个错误是很难排查的,很少有人会想到是这个原因。
下面的是一个可能的会导致多次请求错误的nginx配置:server{
//...
location / {
index index.php default.php index.html index.htm default.html default.htm;
if (!-e $request_filename){
rewrite ^/(.*)$ /index.php/$1;
}
}
//...
}
浏览器默认请求的favicon.ico文件,可能带来的问题(图5-4)
如何指定favicon.ico图标
指定favicon.ico图标的办法很多,最简单的办法就是:制作一个同名ico文件到根目录。一般的尺寸要求是:32*32。因为ico文件的制作,并不能通过常见的ps来完成。
所以,苏南大叔一般都是选用在线图片转换功能。比如下面这个网站:
当然,您也可以使用一款图标制作软件:
如果对于favicon.ico图标的默认名称或者位置不满意,您还可以选择使用代码指定:
而且这里不一定非要是ico文件,普通的png图片,也是可以的。比如苏南大叔的博客的favicon文件,就是个png图片。
浏览器默认请求的favicon.ico文件,可能带来的问题(图5-5)
相关链接
总结
favicon.ico一般用于浏览器导航栏前方的图标显示。当然类似的还有其他的favicon.ico使用方式,将会在苏南大叔的后续文章中,予以说明。更多图标ico相关文章,请点击:
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
发布评论