【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
打算给网站加上个标签栏里的图标，类似这种
。
据维基百科，Favicon是favorites icon的缩写，亦被称为website icon（网页图标）、page icon（页面图标）或urlicon（URL图标）。Favicon是与某个网站或网页相关联的图标。浏览器可以将favicon显示于浏览器的地址栏中，也可置于书签列表的网站名前，还可以放在标签式浏览界面中的页标题前。
任何一个适当大小的（16×16像素或更大）的图像都可以用作favicon。有两种实现方法，第一种是将图标命名为“favicon.ico”，并置于web服务器的根目录下，即可以自动显示该文件。第二种方法更为灵活，即使用HTML来为任何一个网页指示其图标所存储的位置。这种方法是通过在页面的<head>部分添加两个link组件来实现的：
<link rel="icon" href="Images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon" />
这样，图标位置不一定要在web服务器根目录下，名字也不一定是favicon.ico。我为了更好的兼容性，两种方法都用上了。结果测试的时候发现图标在chrome上显示不了，但IE、360、百度浏览器都是可以的。就在我不得其解的时候，把目光投向其他项目，发现竟然有采用base64编码的。类似这样：
<link rel="icon" href="data:image/ico;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAA
这是什么意思呢？即图片的 base64 编码就是将一幅图片数据编码成一串字符串，使用该字符串代替图像地址。于是找了个 图片在线转换base64 的工具，转换之后得到一串字符串，用来替换原来的图片地址。然后，刷新浏览器缓存，chrome上也可以显示了。。问题解决。
但为什么要这样呢？我们知道，网页上的每一个图片，都是需要消耗一个 http 请求下载而来的，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。但是，这种方法也有局限性，那就是被 base64 编码的图片尺寸要足够小，否则将其制作转化成 base64 编码时，生成的 base64 字符串编码会很长。想象一下，一个元素的 css 样式编写超过了 2000个字符，那对 css 整体的可读性将会造成十分大的影响，代码的冗余使得在此使用 base64 编码将得不偿失。
favicon图标在这里是没问题的，因为这个图标本身不会太大，这种转换也就可行。
来源：oschina
链接：https://my.oschina.net/u/2420309/blog/813752