"/favicon.ico"vs <link rel ="快捷图标"/>

Question

"/favicon.ico"vs <link rel ="快捷图标"/>

byt*_*e77 90 html favicon html5

题

在网站上创建图标的最佳做法是什么？
并且是一个.ico文件,16x16和32x32图像比只有16x16 的.png文件更好？
今天优选的正确方法是不是在合理的旧浏览器中工作？

方法1

放置favicon.ico在主目录中命名的文件是一种方法.浏览器始终请求该文件.您可以在apache日志文件中看到它.

方法2

部分中的HTML标记<head>:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />

Run Code Online (Sandbox Code Playgroud)

Answer 1

phi*_*e_b 137

有几种方法可以创建图标.最好的方法取决于各种因素:

你可以花在这个任务上的时间.对很多人来说,这是"尽可能快".
你愿意做的努力.比如,手动绘制一个16x16图标以获得更好的效果.
特定约束,例如支持具有奇数规格的特定浏览器.

第一种方法:使用favicon生成器

如果您希望快速完成工作,可以使用favicon生成器.这个为所有主要的桌面和移动浏览器创建图片和HTML代码.完全披露:我是这个网站的作者.

此解决方案的优点:它很快,所有兼容性考虑因素已经为您解决.

第二种方法:创建一个favicon.ico(仅限桌面浏览器)

如您所知,您可以创建favicon.ico包含16x16和32x32图片的文件(请注意,Microsoft建议使用16x16,32x32和48x48).

然后,在HTML代码中声明它:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Run Code Online (Sandbox Code Playgroud)

此方法适用于所有桌面浏览器,无论新旧.但大多数移动浏览器都会忽略图标.

关于您将favicon.ico文件放在根目录中而不是声明它的建议:注意,虽然这种技术适用于大多数浏览器,但它并非100%可靠.例如,Windows Safari无法找到它(被授予:此浏览器在Windows上以某种方式被弃用,但您明白了这一点).与PNG图标(适用于现代浏览器)结合使用时,此技术非常有用.

第三种方法:创建一个favicon.ico,一个PNG图标和一个Apple Touch图标(所有浏览器)

在您的问题中,您没有提到移动浏览器.他们中的大多数将忽略该favicon.ico文件.虽然您的网站可能专用于桌面浏览器,但您可能不希望完全忽略移动浏览器.

您可以实现与以下的良好兼容性:

favicon.ico, 往上看.
适用于Android Chrome的192x192 PNG图标
一个180x180 Apple Touch图标(适用于iPhone 6 Plus;其他设备可根据需要缩小它).

用它们声明它们

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Run Code Online (Sandbox Code Playgroud)

这不是完整的故事,但在大多数情况下它已经足够好了.

实际上,仍然经常使用的<link rel ="快捷图标"href ="/ path/to/icons/favicon.ico">不是有效选项.它甚至不是标准的,只有IE支持它.从IE 9开始,IE支持默认的"look at root"方法.所以它不是一种支持所有浏览器的方式,而只是一种支持IE <9的方法.依赖于(现在的标准)'root'方法,或者,如果你坚持,添加:<link rel ="icon"href ="/ favicon.ico">(即使这不是标准) (8认同)
多年来，图标图标机制已经发生了演变。我今天注意到，MDN的规范现在说：_快捷方式链接类型通常在图标之前看到，但是此链接类型不合格，已被忽略，网络作者不得再使用它。_含义使用`<link ref =“ icon” ...>`而非`<link ref =“快捷方式图标” ...>`https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types (5认同)
@laggingreflex `/favicon.ico` 是首选方法。这就是您访问`www.google.com` 时得到的结果。然而，您可能不想用图标污染您的根目录。在这种情况下，标记工作得很好。 (2认同)

Answer 2

Mah*_*zad 10

由于 SVG favicon 已获得主要浏览器的支持，另一个选择是切换到 SVG：

<link rel="icon" sizes="any" type="image/svg+xml" href="favicon.svg">
<!-- Fallback favicon in case a browser does not support the SVG version -->
<link rel="alternate icon" type="image/x-icon" href="favicon.ico">

Run Code Online (Sandbox Code Playgroud)

SVG 还可以进行 URL 编码（如下所示），或者像其他格式一样，编码为 Base64（例如，使用此在线工具）。好处是，您可以避免一个 HTTP 请求：

<link rel="icon" sizes="any" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5e400' d='m6 21 2-7-6-5h7l3-7 3 7h7l-6 5 2 7-6-4z'/%3E%3C/svg%3E%0A">

Run Code Online (Sandbox Code Playgroud)

这篇 CSS-Tricks 文章解释了切换到 SVG 的一些好处，最值得注意的是：

面向未来（保证我们的网站图标在未来的设备上看起来清晰）
更容易修改（例如，更改颜色）
深色模式支持
可以是动画的（使用SMIL）（AFAIK，只有 Firefox 支持动画图标）

这篇文章提供了一个很好的答案，即是否/在何处可以安全地使用 SVG 图像作为网站图标。

以下是一些使用 SVG 图标的著名网站（使用浏览器检查页面）：

归档时间：	11 年，1 月前
查看次数：	133033 次
最近记录：	6 年，7 月前