标签：浏览器 标题栏 shortcut 小图标 ico 图标 2022.3 icon

今天在学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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。