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 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

您需要多个图标才能支持所有浏览器：

经典桌面浏览器，在标签中显示一个小图标。
移动浏览器，使用书签的高清图标和“添加到主屏幕”用例。
现代Windows IE和Edge，它使用Metro UI的特定图标。
macOS Safari为固定标签使用特定的单色图标，为最新的MacBook使用Touch Bar。

基本上有办法解决所有这些用例：

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

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

2 个答案: