如何设置网站图标？答案

【问题标题】：How to set-up a favicon?如何设置网站图标？
【发布时间】：2013-08-20 12:55:07
【问题描述】：

我正在尝试做一个非常简单的初步练习来设置一个正在创建网站图标的网站。

这是我正在使用的代码：

<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>

但它不起作用 - 任何人都可以帮忙吗？我已将文件 favicon.ico 保存在与我的 html 文件相同的级别（在子目录中）。

非常感谢

【问题讨论】：

你把它添加到你的html了吗？和确保它在根目录
不确定你的意思。这就是我的问题中我的代码的范围 - 对吗？
看起来不错。确保图标存在于您的 href 指向的位置。
不，什么都没发生。

标签： favicon

【解决方案1】：

随着 (i|android|windows) 手机的推出，情况发生了变化，要获得适用于任何设备的正确且完整的解决方案确实非常耗时。

您可以查看https://realfavicongenerator.net/favicon_compatibility 或http://caniuse.com/#search=favicon，了解获得适用于任何设备的东西的最佳方式。

你应该看看 http://realfavicongenerator.net/ 自动化大部分工作，并且可能在https://github.com/audreyr/favicon-cheat-sheet 了解它是如何工作的（即使后一个资源在很长一段时间内没有更新）。

一个完整的解决方案需要向您添加以下标题（当然还有相应的图片和文件）：

<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">

2016 年 6 月，RealFaviconGenerator claimed that 以下 5 行代码支持的设备数量与之前的 18 行一样多：

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

【讨论】：

看起来太复杂了。我认为不再需要这个了。
@guettli 好的……你有支持这个的来源，或者一些实验吗？不是因为它看起来很复杂，这不是正确的做法，或者是吗？你的解决方案是什么？
@guettli ？我的回答的第一句话解释了为什么需要更多。 “随着 (i|android|windows) 手机的推出，情况发生了变化，要获得适用于任何设备的正确和完整的解决方案确实非常耗时。”一行有一个.ico 文件并不适用于每台设备。参照。 github.com/audreyr/favicon-cheat-sheet ，我在回答中也提到了这一点。
@guettli 好的，也许您应该在此之后阅读几行。亲自查看realfavicongenerator.net/…：iOS Safari、Android Chrome 和其他一些缺失。我并不是说它是必须的（你可能显然不关心这些设备，或者认为这是他们的问题而不是你的问题），我只是说拥有“适用于任何设备的正确和完整的解决方案真的是时间——消耗。”。随意不要使用它，但写“不再需要”是不正确的。
你是对的。如果要支持所有设备，那么一条线是不够的。

【解决方案2】：

我在我的网站上使用它，效果很好。

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

【讨论】：

【解决方案3】：

有一个非常简单的方法来设置一个 favicon，它已经存在了很长时间 AFAIK。将favicon.ico 文件放在默认位置。即

http://www.yoursite.com/favicon.ico

这几乎适用于所有没有<link> 标签的浏览器。但是，这仅适用于 *.ico 文件。 PNG 和其他格式仍然必须使用 <link> 标签链接

【讨论】：

仅供参考 - W3C 不鼓励这种方法，理由是它“与 Web 体系结构的某些原则不一致”。 w3.org/2005/10/howto-favicon

【解决方案4】：

下面给出了一些关于fav Icon的信息

什么是 FavIcon？  FavIcon 只是与应用程序地址栏标题一起出现在左上角的小图像。favicon.ico 的标准尺寸规格为 16 x 16 像素。请看下图。

它是如何工作的？  通常我们在路由解决方案文件夹中添加我们的 FavIcon.ico 图像，并在运行时自动应用程序选择它。但大多数时候我们可能不得不使用下面的两个链接参考。

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

一些浏览器需要一个 (rel="icon") 一些其他浏览器需要另一个 rel="shortcut icon"

 Type=”image/x-icon” OR Type=”image/ico”：一旦期望精确的 ico 图像，并且期望任何图像，甚至从 .jpg 或 .pn ..etc 格式化.

 我们必须对常见页面使用以上两个标签，例如 - 母版页，在所有页面中都使用的主框架

【讨论】：

【解决方案5】：

你可以看看w3 how to，我想你会发现它很有帮助

你的链接标签属性应该是rel="icon"

【讨论】：

我查看了 w3 如何但无济于事。你是什么意思我的链接标签应该是rel =“icon”？那而不是链接rel =“快捷方式图标”？
“w3 how to”链接似乎适用于 Html4，因为 Html5 不支持配置文件，所以我认为该链接不应该被信任。

【解决方案6】：

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
</head>
<body>
...
</body>
</html>

rel="shortcut icon" 应该是rel="icon"

来源：W3C

【讨论】：

现在发生了最疯狂的事情......我有来自这个网站（即 stackoverflow.com）的网站图标不知何故卡在我的网站上 - 这是怎么发生的！
<link> 标签中的 favicon 文件的 URL 是什么？
我的代码还是一样的，即 { w3.org/2005/10/profile"> }
但准确的 URL 是 file:///C:/Users/Emi/Desktop/Zedius%20website/favicon.ico
@user2694332，<link>标签前有semi-colon，请去掉。还将rel 属性的值更改为icon (rel="icon")。其余代码看起来不错，应该可以正常工作。看看这个 - stackoverflow.com/q/6644684/1654121

【解决方案7】：

根据我的 favicon.ico 没有出现的经验，我正在分享我的经验。在将您的网站放在主机上之前，您无法显示它，因此，请尝试使用 XAMPP - http://www.apachefriends.org/en/xampp.html 将其放在本地主机上。这就是网站图标的显示方式，并且像其他人推荐的那样进行更改：

rel="shortcut icon"

到
rel="icon"

同样，.png favicons 也可以用于光滑度。

【讨论】：

【解决方案8】：

<head>
    <link rel="shortcut icon" href="favicon.ico">
</head>

【讨论】：

欢迎来到 Stack Overflow，请通过添加描述您的答案的文本来避免纯代码答案。

【解决方案9】：

在我的网站中，我使用这个：

<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">

<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>

为了简化您的生活，请使用此网站图标生成器http://realfavicongenerator.net

【讨论】：

【解决方案10】：

推荐此方法

<link rel="icon" 
  type="image/png" 
  href="/somewhere/myicon.png" />

【讨论】：

【解决方案11】：

试着把它放在文档的头部： <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

【讨论】：