favicon 和 image 有什么区别？答案

【问题标题】：What is the difference between favicon and image?favicon 和 image 有什么区别？
【发布时间】：2018-03-23 03:43:09
【问题描述】：

我想在浏览器的标题栏上放一个图标，但我应该在下面的选项中使用什么都可以正常工作，但我想知道这些类型之间的区别，是否有必要在两个 rel 中提及图标（快捷方式图标& 图标）。

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

和

<link rel="shortcut icon" type="image/png" href="img/micrologo.png">
<link rel="icon" type="image/png" href="img/micrologo.png">

【问题讨论】：

标签： html favicon

【解决方案1】：

引用自 Mozilla 开发者页面，您应该只使用 rel="icon"。

快捷链接类型经常出现在图标之前，但这种链接类型不符合要求，被忽略，网络作者不得再使用它。

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

至于 ico 与 png，如果您想支持 Internet Explorer 10 及更低版本等旧版浏览器，则需要定义 .ico 图标，因为这些浏览器不支持 png、gif、jpeg 或 svg 图标。

为大多数浏览器优化一个漂亮的网站图标的最佳方法是拥有这样的东西：

// Target ios browsers.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
// Target safari on MacOS.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
// The classic favicon displayed in tabs.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
// Used by Android Chrome for the "Add to home screen" icon and settings.
<link rel="manifest" href="/site.webmanifest">
// Used for Safari pinned tabs.
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#193860">
// Target older browsers like IE 10 and lower.
<link rel="icon" href="/favicon.ico">
// Used by Chrome, Firefox OS, and opera to change the browser address bar.
<meta name="theme-color" content="#ccccc7">
// Used by windows 8, 8.1, and 10 for the start menu tiles.
<meta name="msapplication-TileColor" content="#00aba9">

要生成所有这些不同的文件，元标记最好使用https://realfavicongenerator.net/（我与这个网站没有任何关系，我只是经常使用它）

【讨论】：