什么是favicon?

所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳favicon到桌面以建立到网站的快捷方式;除此之外,标签式浏览器甚至还有不少扩展的功能,如FireFox甚至支持动画格式的favicon等。

从特定的技术角度看,favicon也并不只是仅仅让网站给人更专业的观感,也可以在一定程度上减轻服务器的流量带宽占用:一般为了提高网站的可用性,我们都会为自己的网站创建一个自定义的404错误文件,在这种情况下,如果网站没有相应的favicon.ico文件,每当有用户收藏网站/网页时, Web服务器都会调用这个自定义的404文件,并在网站的错误日志中记录。这显然是应该予以避免的。

如何制作Favicon.ico

制作Favicon.ico的方法相当简单,首先,利用图形工具创建2个反映网站主题的256色的小图片:1个为32×32像素,另一个为16 ×16像素。需要注意的是,调色板要选用“Windows 默认调色板”,不然,在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化。

需要说明的是,在很多关于Favicon.ico的说明中,常见到要求图片为16色的说法,应该说这类说法大大过时:在早期如Windows 95时期,16色的Favicon.ico可能是个稳妥的选择,保证其在大多数情况下正常使用,但现在,完全不存在那类限制,16色只能使图标的展示效果大大降低。

至于在浏览器中使用时16×16像素的图片已经足够,为什么还要准备32×32像素的图片,原因在于,正如上文所言,favicon也显示在地址栏中,用户可以拖曳favicon到桌面以建立到网站的快捷方式,而桌面图标则要以32×32显示的,如果您的Favicon.ico不包括32像素的图片,系统就只能使用默认的浏览器图标来标注网站/网页,如Internet Explorer的蓝色“e”,起不到我们意欲通过Favicon.ico打造网站品牌的作用。

图片制作好后,使用如Image2Ico之类的小程序即可将2张图片转换到一个Icon文件中。也可以通过可以在线制作Favicon的网站来制作,不过,需要注意的是,这个网站要求图片源文件格式为Pic。还有一个toycon的软件,只有200多K吧,很不错的。

在网页中使用Favicon.ico

浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件,如果没有,便到网站的根目录下寻找。

因此,在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico,然后将其上传到网站的根目录即可。

如果您需要将Favicon.ico放到其他目录下,或者希望让不同的网页显示不同的Favicon,就需要在网页Html文件中做设定了,具体设置也很简单,在Html中的<head>部分加入如下的代码:

引用内容

程序代码:

复制代码代码如下:

Firefox还支持GIF动画格式的Favicon,使用方法如下:

首先制作一个16*16的gif动画,然后在html代码

中加入如下代码:

引用内容

程序代码

复制代码代码如下:

最终效果:

html 地址坐标图标,浏览器地址栏中显示自定义小图标相关推荐

  1. 浏览器地址栏中显示自定义小图标 及什么是网站 ICO 图标?

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

  2. 请编写一个类,该类能够实现访问一个web应用下的Servlet后,还能在浏览器地址栏中显示出同站点下的index.jsp的路径

    朋友我知道你很迷茫,不知道这是干啥的,要回答啥,哼哼-! 就是一个response的重定向,老师给的题目真是扰乱人 ①创建jsp <%@ page language="java&quo ...

  3. php添加网站ico图标,phpcms在地址栏中显示网站图标的方法(增加网站ico图标)

    本文关键详细介绍了phpcms在地址栏中显示信息网站图标的方式(提升网站ico图标),必须的盆友能够参照下 phpcms怎样在地址栏中显示信息网站的图标 最先寻找网站的css文件,刚开始在里面改动. ...

  4. 浏览器访问网站标签页小图标显示

    浏览器访问网站标签页小图标显示 1.对于IE浏览器:把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下,浏览器会自动检索 2.对于其他浏览器通用的在标签页加入指定图标 ...

  5. 在浏览器地址栏中输入URL后发生了什么

    在浏览器地址栏中输入URL后发生了什么 基本流程: ①查询ip地址 ②建立tcp连接,接入服务器 ③浏览器发起http请求 ④服务器后台操作并做出http响应 ⑤网页的解析与渲染 详细步骤如下: 查询 ...

  6. 在URL地址栏中显示ico

             <!-- 在URL地址栏中显示ico -->         <link Rel="SHORTCUT ICON" href="imag ...

  7. 27、HTML框架(同一个浏览器窗口中显示不止一个页面)

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. <iframe src="https://www.17173.com/" width="500" ...

  8. 在网页中画Icon小图标

    在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧, ...

  9. 如何解决TortoiseSVN不显示状态小图标问题

    如何解决TortoiseSVN不显示状态小图标问题 在客户端使用TortoiseSVN来管理文件的版本是很方便地,它会在受管理的文件图标上显示一个小图标用来表示当前文件的版本状态,让我们看着一目了然, ...

最新文章

  1. 在 IDEA 中使用 Debug,真是太厉害了!
  2. php 去除中英文空格,php去除字符串首尾中英文空格程序-PHP源码
  3. 清北学堂培训2019.4.7
  4. JS判断上传文件类型
  5. 本周开源论文推荐:含人脸识别、实例分割、跟踪、SR等
  6. 记录水电开发的心理【2】
  7. Xib和StoryBoard的区别
  8. python重写和装饰器_Python | 老司机教你 5 分钟读懂 Python 装饰器
  9. 佳能mp145/mp140/mp288打印机 e16代码怎么处理
  10. 红米k50 刷入类原生教程
  11. 韩天峰 - Swoole4-全新的PHP编程模式
  12. 61_ZYNQ7020开发板_SD/QSPI方式启动_ax_peta
  13. matlab实现幂法迭代求特征值和特征向量
  14. 【排列组合】扑克牌大小王被同一人拿到概率
  15. 中文文本情感分类(基于LSTM和textCNN)
  16. Android studio设计一个简易微信界面
  17. Excel表格转为Latex图表
  18. SpringCloud持续集成项目部署
  19. (winform)winform 通过 PictureBox添加图片的四种方法。
  20. 短信平台系统搭建 后台功能管理 web源码架构 多线路由通道详解介绍

热门文章

  1. 2020年阿里大数据一面面经,看看你还有啥不知道的?
  2. Linux 运维故障排查思路,有这篇文章就够了
  3. python ip代理池_python实现ip代理池功能示例
  4. 电子产品设计流程_产品设计“学习、就业、留学”全攻略
  5. 【算法与数据结构】一道检测inversion count的初级算法
  6. Flink中的状态与容错
  7. 从初创公司的角度来看微服务
  8. lucene源码分析(8)MergeScheduler
  9. 如何做好一款爬虫产品
  10. 漫说单例模式--宝宝成长记 你真的了解了吗?