给网站设置图标favicon.ico

场景：网站做好后，放在测试服务器，控制台报错，但页面正常显示

在这里插入图片描述
在这里插入图片描述

favicon.ico是什么？

所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。

favicon.ico是一个网站必要的吗？

不是必要的，但是web服务器在网站加载时都会请求favicon.ico这个文件，如果不存在就会报404错误，并且会记录到错误日志中，所以最好的设置。

favicon.ico怎么设置？

第一种方式：放在根目录

这种方法最简单，在服务器根目录下放一个 favicon.ico 的文件，浏览器发现后就会使用。

注：这种方式，ico文件的名称一定要叫：favicon

第二种方法：link标签

在head里面加入代码：

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

注：这种方式，ico文件的名称就可任意命名了。

第一种方法设置的是全站的，这个服务器根目录下的所有网站都会生效，第二种方法可以针对某个网页单独设置ico。

favicon的格式一定是ico格式吗？

favicon的格式不一定是ico格式，它可以是png，jpg甚至是gif，不过ico格式是所有浏览器都支持的。

favicon.ico的尺寸有16×16、32×32、48×48，在添加到桌面、任务栏小尺寸的图标就不是很理想了，这就需要多种尺寸兼容各种设备和情况。