2022.3.8——怎么给我们的网页标题栏加小图标？

今天在学vue的时候，忽然听到视频里讲解一个控制器的小错误（因为vscode安装live server而导致的，就是没有标题栏图标，如下是我加上的），

就稍微了解了一下怎么为网页标题栏加图标。

方法：

• <title>标题名</title>
  <link rel="shortcut icon" href="图片地址" />
  

• <title>标题名</title>
  <!--动态图-->
  <link rel="icon" href="图片地址" type="image/gif" />
  <!--静态图-->
  <link rel="shortcut icon" href="图片地址" type="image/x-icon" />
  

注意事项：

1. 图片类型我试了一下gif/img/ico/png都可以（标准是使用ico文件），尺寸的话其实差不多正方形都可以，我设置gif时出错了，我觉得应该是尺寸问题，大家都统一认可的尺寸是16px*16px
2. 两种方法都可以，但是方式一最简单。
3. 我们习惯把图标文件放在我们这个端口接的文件夹的根目录下，方便浏览器识别
4. 关于rel中shortcut icon和icon的区别，shortcut icon是一个更保险的方式，因为在IE浏览器中如果只写icon可能不会被识别，所以要加一个shortcut，而在其他浏览器中shortcut会被忽略，因为他们能够直接识别icon。（其实这里rel为了各种移动设备和浏览器的兼容，会更加的复杂，这里我不考虑）

以上都是我自己的理解，并没有深入研究技术点，可能会有错误，请谅解。

标签：浏览器,标题栏,shortcut,小图标,ico,图标,2022.3,icon
来源： https://www.cnblogs.com/mlhiter/p/15981711.html