favicon网站图标

如何获取网站图标：

有限的例子：

• 例1：获取京东官网图标
  浏览器地址栏输入：www.jd.com/favicon.ico
• 例2：获取小米官网图标
  浏览器地址栏输入：www.mi.com/favicon.ico

发现：

1. 在官网地址的后面加上 /favicon.ico 就可以获得图标
2. 点右键下载：发现文件格式为 .ico

网站图标的使用

步骤一：把下载下来的 favicon.ico 文件放到根目录下
步骤二：在 html 页面里，之间引入代码：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

注：属性type="image/x-icon"可以忽略

制作网站图标

步骤一：首先我们把想要的切成图片
步骤二：把图片转换成 ico 格式。借助第三方工具比特虫：www.bitbug.net/

尺寸选择：

• 京东图标尺寸：48x48
• 小米图标尺寸：16x16

总结：所以尺寸选择两者之间，就没问题。

总结：

1. 解决的问题：如何在浏览器中显示网站图标
2. ico 是一种图标格式，网站图标一般命名为 favicon.ico
3. 简单理解为：在html文件中引入特殊格式的图片文件，并显示在 title 中

• 在HTML中引入CSS文件

  <link rel="stylesheet" href="style/base.css"/>

• 在HTML 中引入图标文件

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">