推荐的HTML头部图标标签

多年来,我见过许多不同且常常相互矛盾的关于网站图标和哪些标签是必需的指南。如今,我认为您可以只使用非常简洁的一组元标签,并根据需要进行调整。以下是我推荐您在<head>元素中至少包含的最基本内容:

<head>
  <link rel="icon" sizes="192x192" href="favicon.png">
  <link rel="apple-touch-icon" href="favicon.png">
  <link rel="mask-icon" href="favicon.svg" color="#000000">
</head>

通过创建一个192x192像素的PNG图像,您几乎可以覆盖所有现代设备和浏览器,而不会太麻烦。如果您想更进一步,可以很容易地包含更多图标。只需缩小图像并使用不同的sizes属性包含更多的rel="icon"元标签即可。