如何添加适用于所有浏览器的站点图标？

Question

<head>
<link rel="icon" type="image/png" href="/anime_logo/favicon32x32.png" size="32x32">
<link rel="shortcut icon" type="image/png" href="/anime_logo/favicon32x32.png" size="32x32">
</head>

我的站点图标只能在 firefox 中使用。我将如何更改它以适用于所有浏览器。请帮忙

Answer 1

添加以下 link 以及您现有的：

<link rel="icon" type="image/png" href="/anime_logo/favicon32x32.png" sizes="32x32">

所以现在你的标记变成这样：

注意 - 我已将 size 替换为 sizes 属性。

<link rel="shortcut icon" type="image/png" href="/anime_logo/favicon32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/anime_logo/favicon32x32.png" sizes="32x32">

Answer 2

您需要几个图标来支持所有浏览器：

经典的桌面浏览器，在选项卡中显示一个小图标。
移动浏览器，使用高清图标作为书签和 "add to home screen" 用例。
现代 Windows IE 和 Edge，它们使用 Metro 的特定图标 UI。
macOS Safari 使用特定的单色图标来固定选项卡，并为最新的 MacBooks 使用 Touch Bar。

基本上有多种方法可以解决所有这些用例：

工具辅助：您可以使用RealFaviconGeneator，它会生成您需要的所有图标和HTML代码。完全披露：我是该网站的作者。
手动：Favicon Cheat Sheet 是极好的资源。

如何添加适用于所有浏览器的站点图标？

how to add site icon which work on all browser?

html

css

favicon