本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到):

favicon.ico 是啥?看下面这张图就知道了。

favicon 是 favourite icon 的简称,亦被称为 website icon(网页图标)、page icon(页面图标)或urlicon(URL图标)。一个网页的 favicon.ico 通常可以在浏览器地址栏、标签栏,或者被保存为书签后可见,设置一个个性化的 icon 是不是很酷呢?

给一个网页设置 favicon.ico 有两种方式。

  • 方法一(推荐):

    将 favicon.ico 文件放置在服务器根目录下。

    通常来说一个网站的网页,其 favicon.ico 只有一个,所以这也是最普遍的做法,比如 百度,Google 等等。打开该域名下的网页,会自动去根目录寻找 favicon.ico 文件。

    二级域名呢?如果有必要,可以为二级域名单独设置 favicon.ico,比如 http://m.baidu.com/favicon.ico,它和 http://www.baidu.com/favicon.ico 是不同的文件,如果 m.baidu.com 中没有设置,会自动使用顶级域名下的 icon。

  • 方法二:

    可以在具体网页中设置,优先级高于方法一

    设置方式相当简单,通常在 head 元素后新增个 link 标签即可,将其 href 属性指向图片地址。通常我们使用 ico 格式的图片,16*16(best) 或者 32*32 等,不过近来各种高级浏览器也支持 png 格式甚至 gif 格式的图片了。

      <link rel="shortcut icon" href="cat.ico" /> 

再回到文章开头的问题,如何处理这个 404 的错误?最简单的方式无非是给根目录加个 icon 文件了,如果不需要显示具体的,可以用一个空白的 ico 文件,美其名曰 "blank favicon file"。其他方法可以参考 How to prevent favicon.ico requests?

如何得到一个 ico 文件?推荐两个网站,easyicon 以及 iconfinder,后者更全不过不少 icon 都要收费。当然,你完全可以自己搞个 png 文件转换格式,http://www.favicon-icon-generator.com/ 和 http://www.atool.org/ico.php 是值得推荐的。

最后再介绍一个用于获取网站 favicon.ico 文件的 url。http://www.google.com/s2/favicons?domain=url。比如需要获取博客园的,可以打开 http://www.google.com/s2/favicons?domain=http://www.cnblogs.com。

Read More:

  • 关于favicon.ico的两三事
  • favicon.ico Wiki
  • Useless favicon.ico 404 messages in logs
  • HOW A BAD FAVICON.ICO CAN CAUSE A LOT OF TROUBLE
  • How To Give Your Site A Favorite Icon
  • Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?
  • favicon-cheat-sheet

favicon.ico文件简介相关推荐

  1. 网站常用的favicon.ico文件

    在项目中,经常看到favicon.ico报错,一直不明白是啥个东西,如下图.(如果你访问的页面上没有这个的话, 可以强制刷新下看看) 偶然间看到了一篇文章,才明白是怎么回事, 在此记录下:FAVICO ...

  2. 解决页面favicon.ico文件不存在提示404问题

    所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不是Favicon的全部,根据浏览器的不同,F ...

  3. png转为favicon.ico文件

    分享一个比较好用的网站可以直接上传png文件生成favicon.ico文件. 实测比较好用. 直接上链接. http://www.bitbug.net/

  4. html自动请求favicon,浏览器默认请求的favicon.ico文件,可能带来的问题

    本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 浏览器加载网站的时候,都会默认请求一个favicon.ico文件.当然,如果页面代码里面有额外指定图片的话,是 ...

  5. Apache下favicon.ico文件找不到的问题

    最近安装apache svn时,发现error日志中,大量出现以下日志: [Thu Apr 25 13:13:23 2013] [error] [client 127.0.0.1] File does ...

  6. css网页favicon_网站常用的favicon.ico文件详解

    FAVICON.ICO 是网站图标文件,浏览网站时显示在地址栏前边的那个图标 关于Favicon 总是被命名为favicon.ico 默认存放在网站web根目录.我们常常看到这样的一个请求/favic ...

  7. springboot 中favicon.ico 图标不显示问题,后台日志报错找不到favicon.ico 文件问题 解决

    重构框架的时候发现这个问题 在服务器上发现已访问就会出现favicon.ico 找不到的日志,开始也是在网上找方案,找问题,结果都不是很符合心意. 我个人感觉还是配置拦截器的问题,先贴代码.然后真的是 ...

  8. 【网页图标】favicon.ico文件的设置

    如何在Vue Cli目录下面设置我们想要的网页图标? 文件目录结构如下: 第一步:打开你的项目文件地址打开找到public文件夹,粘贴.ico文件进去public文件夹 结果图: 第二步:在index ...

  9. 在线透明favicon ico图标文件制作 - aTool在线工具

    原址:http://www.atool.org/ico.php 在线透明favicon ico图标文件制作 - aTool在线工具 支持格式 png.jpg.gif 在线转换成透明.ico图标. [图 ...

最新文章

  1. spring28: aspectJ--基于xml
  2. DirectX 向量点乘和叉乘
  3. ubuntu 64上的GCC如何编译32位程序
  4. Intellij IDEA创建的Web项目配置Tomcat并启动Maven项目
  5. centos 7 安装kvm 虚拟机
  6. Maven学习总结(51)——Maven 常用属性和常量说明
  7. Ubuntu 安装 Redis
  8. php html小项目,使用PHP把HTML生成PDF文件的几个开源项目介绍
  9. 【ELAMN预测】基于遗传算法优化ELMAN神经网络实现电力符合数据回归预测附matlab代码
  10. CVPR2022论文列表(中英对照)
  11. 微信公众号推送模板信息
  12. 企业需要关注的零信任 24 问
  13. 计算机无法显示硬盘盘符,电脑硬盘不显示盘符怎么办 移动硬盘不显示盘符的原因...
  14. Js 实现十六进制颜色值和RGB颜色值转换整理
  15. 淘宝标题怎么写?写标题营销词怎么应用恰当?
  16. 宇视录像机通道名称如何修改
  17. Browser Security Plus 企业网络过滤工具
  18. linux下贪吃蛇代码,贪吃蛇 linux 程序
  19. Piggy-Bank - 九度教程第 102 题
  20. JavaScript中函数里的arguments属性

热门文章

  1. 51单片机的UART应用
  2. java毕业生设计中小型连锁超市配送中心配送管理计算机源码+系统+mysql+调试部署+lw
  3. Origin 纵坐标名称栏中插入公式
  4. 模式识别第二课 建立MFC窗口+插入图片+处理+显示图片
  5. JavaSE学习笔记(一)基础知识
  6. CometOJ国庆欢乐赛 C两排房子 二分 D1 二分贪心 E贪心特判
  7. Selenium Python2.7
  8. TP50 TP90 TP95 TP99 TP999 TP9999
  9. Gillette!Gillette!
  10. java中金额转换精度问题