`
shinepaopao
  • 浏览: 145732 次
社区版块
存档分类
最新评论

WEB优化Favicon请求

    博客分类:
  • WEB
阅读更多

关于Favicon

  • 总是被命名为favicon.ico
  • 默认存放在网站web根目录。我们常常看到这样的一个请求/favicon.ico
  • 它总是显示在浏览器地址栏,网址的左边
  • 当访问一个页面的时候,不管怎么样,浏览器都会请求这个文件,即/favicon.ico
  • 可以通过在页面的<head>部分加入<link>元素来重新指定它的位置
    <link rel=”shortcut icon” href=http://www.cctv.com/favicon.ico />
  • ico格式可以是不同分辨率的图像,比如16×16, 32×32等。



 
上图从客户端和服务端监测,可以知道每次访问页面的时候,都会访问/favicon.ico,不管该文件存不存在(一些工具像httpwatch、firebug不会将/favicon.ico请求罗列出来)。如果/favicon.ico文件不存在,则响应404错误。图-1和图-2比较而言,图-1(404响应)反倒花费的时间更少,这是图-2需要传输favicon.ico文件,http 200响应比http 404响应更大。通常在这种情况,我们应该减少对/favicon.ico请求来达到整体优化效果。

优化Favicon

  • 确定文件/favicon.ico存在,不应该返回404错误。404错误意味着,每次访问浏览器都会重新请求一次/favicon.ico。我们应该减少这样的请求,将/favicon.ico缓存在客户端。减少不必要的http请求是web前端优化的一条重要准则
  • 设置Expires头,将/favicon.ico缓存在客户端。比如,Apache可以通过mod_expires增加这样的设置。缓存时间可以是一个月,甚至可以是一年。
        <IfModule mod_expires.c>
          ExpiresActive On
          ExpiresByType image/ico "access plus 1 year"
          ExpiresByType image/icon "access plus 1 year"
        </IfModule>
        
  • 通过<link>更新缓存。/favicon.ico名字和位置总是固定死的,如果你需要更新缓存的话,可以通过<link>元素重新指定它的位置
  • 保持较小的图片大小。虽然ico格式文件支持不同的分辨率,但是我们推荐16×16大小,并且文件大小在1kb左右。
  • 大小: 94 KB
2
2
分享到:
评论

相关推荐

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

    标题和描述中提到的问题是,在使用Node.js开发Web应用程序时,时常会遇到由于浏览器默认行为而发起对favicon.ico文件的请求。这种情况通常会出现在页面加载时,浏览器会自动尝试获取网站的收藏夹图标(Favicon),这...

    php 抓取任意网站 favicon 小图标

    `cache`目录用于存储抓取到的favicon图标,这是一个重要的性能优化措施,避免了频繁的网络请求。文件系统中的每个文件对应一个已抓取的网站favicon,文件名可能是URL的哈希值,便于快速查找和匹配。 总之,这个PHP...

    对web.py设置favicon.ico的方法详解

    在使用web.py框架进行Web应用开发时,正确设置favicon.ico不仅能让网站看起来更加专业,还能优化用户体验。本文将详细介绍如何在web.py项目中设置favicon.ico。 #### 二、环境准备 在开始设置之前,请确保已经具备...

    fiddle安装配置及抓取web和手机请求包方法V1.0.doc

    **Fiddler是一款强大的Web调试工具,用于抓取和分析HTTP和HTTPS请求。它作为客户端与服务器间的代理,使得开发者可以深入理解网络交互过程,进行接口调试和优化。以下是对Fiddler安装、配置以及使用方法的详细说明:...

    magic-favicon:如果存在,则使用 serve-favicon 提供 favicon,! 在第一次请求时使用existsSync!

    总之,`magic-favicon`是一个旨在优化favicon处理的JavaScript库,它结合了`serve-favicon`中间件和`existsSync`文件检查功能,为Node.js环境下的Web开发提供了高效且可靠的解决方案。通过理解和使用这样的工具,...

    Favicon.ico远程获取插件 v1.0

    标题 "Favicon.ico远程获取插件 v1.0" 是一个专门用于动态获取并展示网站Favicon的PHP插件,其主要目标是提升网站外链和友链的视觉效果,尤其适用于网址导航站和需要优化链接展示的站点。这个插件的版本号为v1.0,...

    PHP实例开发源码—Favicon.ico远程获取插件 php版.zip

    6. **优化和性能**:为了提高性能,可以考虑缓存获取的Favicon,避免频繁的远程请求。 通过分析和学习这个源码,开发者可以了解到如何在PHP中实现网络请求,处理HTTP响应,以及处理二进制文件,这些都是Web开发中的...

    基于PHP的风吟PHP版Favicon在线生成工具源码.zip

    7. 效率优化:为了处理大量用户请求,源码可能进行了性能优化,如缓存处理结果,减少不必要的计算。 8. 用户界面:源码可能包含一个简洁易用的前端界面,便于用户交互。 9. 后端架构:后端可能使用了PHP框架(如...

    2019.05-Web指纹识别技术研究与优化实现1

    Web指纹识别技术是一种网络安全技术,用于识别和区分不同的Web服务器、应用程序、内容管理系统(CMS)等,通过收集和分析...通过不断的研究和优化,我们可以更准确地识别和理解Web服务的特征,从而更好地保护网络环境。

    基于PHP的Favicon.ico远程获取插件php版源码.zip

    通过下载并解压这个文件,用户可以获得插件的所有源代码,并可以根据自己的需求进行定制和优化。 【标签】: "PHP" PHP是一种广泛使用的开源脚本语言,尤其适用于Web开发,可以嵌入到HTML中,方便创建动态网页。这...

    shopex 优化版 用了后我彻底佩服我的哥

    7. `web.config.sample`:这是IIS(Internet Information Services)服务器的配置文件示例,可能在Windows服务器上用于配置ShopEx。优化版可能包含特定的配置来提升性能。 8. `install.txt`:安装指南或记录,可能...

    WEB项目中经常用到的图标

    - **ICO图标**:用于网站的favicon,显示在浏览器地址栏和书签中。 2. 设计原则: - **简洁明了**:图标应该直观,一眼就能识别其含义。 - **一致性**:在整个WEB项目中保持图标风格统一,增强整体感。 - **...

    简单谈谈favicon

    比如在使用nginx作为Web服务器的配置中,如果没有正确处理"Favicon.ico"的请求,可能会导致浏览器错误地将图标请求解释为路由请求,从而产生404错误。针对这种情况,可以在nginx配置中明确指定"Favicon.ico"文件的...

    网上书店前端代码_WebRoot.zip

    5. **jsp** 文件:如`bookList.jsp`,可能包含了展示书籍列表的逻辑,可能还包括处理用户搜索请求的代码。 6. **include** 或 **common** 目录:可能包含一些被多个页面共用的部分,如头部、底部和侧边栏的HTML片段...

    roll-a-dice-on-favicon

    综上所述,“roll-a-dice-on-favicon”项目会涉及HTML、JavaScript、Canvas API、Data URI Scheme以及Web Workers等技术,通过这些技术的结合,实现一个在浏览器图标上滚动的骰子效果,给用户带来独特而有趣的互动...

    淘宝客开源web应用1.0.1(php-api2.0)

    API2.0相较于早期版本,可能包含了更多的功能更新和性能优化,比如更丰富的商品信息获取、用户行为分析、交易管理等。 2. **PHP编程语言**:PHP是一种广泛使用的服务器端脚本语言,尤其适合Web开发。在这个项目中,...

    【合集】优化和提高javascript的运行速度

    对于CSS和图片资源,也可以使用CSS精灵和图标字体(favicon)进行优化,减少页面上需要加载的资源数量。此外,合理的缓存策略,如设置正确的缓存头,可以减少服务器请求,利用浏览器缓存减少加载时间。 脚本标签的...

    飞飞PHP影视系统3.0优化版

    4. **favicon.ico**:这是网站的图标,通常显示在浏览器的地址栏或书签中,增加网站识别度。 5. **index.php**:作为入口文件,它通常是网站的主页面,负责处理请求并加载相应的资源,实现页面的展示和跳转。 6. *...

    动态获取图标

    9. **性能优化**:为了提高页面加载速度,可以采用懒加载技术,只在图标即将进入视口时才加载,或者使用雪碧图(Sprite Sheet)来减少HTTP请求次数。 10. **A11Y无障碍访问**:动态图标应遵循无障碍设计原则,确保...

Global site tag (gtag.js) - Google Analytics