logo标签列表

如何设置网站图标？

favicon
86
我正在尝试做一个非常简单的初步练习来设置一个网站，即创建一个网站图标。
这是我正在使用的代码：
<!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文件中了吗？<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 并确保它在根目录下。 - Asdfg
不确定您的意思。这是我在问题中的全部代码 - 它正确吗？ - user2694332
请确保您的 href 指向的位置存在图标，这样看起来就没问题了。 - Asdfg
没有，什么都没有发生。 - user2694332
12个回答
85

随着(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宣称以下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">
1
看起来太复杂了。我认为这不再需要了。 - guettli
8
好的，您有支持这个说法的来源或实验吗？只是因为它看起来很复杂并不意味着这不是正确的方法，或者是吗？您有什么解决方案？ - Clément
3
“@guettli? 我回答的第一句话解释了为什么需要更多。‘随着(i|android|windows)手机的问世，情况发生了变化，要获得一个在任何设备上都能正常工作的正确完整的解决方案确实很耗时。’只有一行代码中有一个.ico文件是不能在每个设备上都起作用的。可以参考我在答案中提到的 https://github.com/audreyr/favicon-cheat-sheet。” - Clément
1
@guettli 好的，也许你应该读一下这句话后面的几行。请看 https://realfavicongenerator.net/favicon_checker?protocol=http&site=thomas-guettler.de%2F ，iOS Safari、Android Chrome和其他一些设备都没有图标。我不是说这是必须的（你可能显然不关心这些设备，或者认为这是他们的问题而不是你的问题），我只是想说拥有“正确完整的解决方案，适用于任何设备，真的很耗时”。如果你不想使用它，可以随意，但写上“不再需要”是不正确的。 - Clément
2
你是正确的。如果你想支持所有设备，那么一行代码是不够的。 - guettli
显示剩余3条评论
52

我在我的网站上使用这个东西，它非常好用。

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

据我所知，有一种非常简单的方法来设置网站图标，而且已经存在很久了。 只需将 favicon.ico 文件放置在默认位置即可。 例如：

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

这在几乎所有浏览器中都可以工作，无需 <link> 标签。 但是，这仅适用于 *.ico 文件。 PNG 和其他格式仍然需要使用 <link> 标签链接。

6
FYI - W3C不建议使用这种方法，称其“与Web架构的一些原则不一致”。https://www.w3.org/2005/10/howto-favicon - NaN
8
以下是关于网站图标的一些信息：

什么是网站图标？  网站图标是指出现在应用程序地址栏标题左上角的小图片。favicon.ico 的标准大小规格为 16 x 16 像素。请参见下面附的图片。

enter image description here

它是如何工作的？  通常我们将 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” 或 Type=”image/ico”：其中一个要求使用特定的ico图像，而另一个则可以使用任何格式的图像，甚至包括.jpg或.png等。

 我们必须在常用页面上使用以上两个标记，例如：主控页面和主框架，这些页面会被所有页面使用。

6
你可以看一下w3的相关教程，链接在这里：w3 如何设置网站图标，我认为你会觉得很有帮助。
另外，你需要将链接标签属性改为rel="icon"。
我已经查看了w3的相关教程，但没有找到答案。你说我的链接标签应该是rel="icon"？而不是link rel="shortcut icon"？ - user2694332
“w3 how to”链接似乎是针对Html4的，因为在Html5中不支持profile，所以我认为那个链接不可信。 - Steven T. Cramer
1
<!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）不知何故被卡住了 - 这是怎么回事！ - user2694332
<link>标签中的网站图标文件的URL是什么？ - Vivek Jain
我的代码仍然是一样的，即{<!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>}。 - user2694332
但是精确的URL是file:///C:/Users/Emi/Desktop/Zedius%20website/favicon.ico。 - user2694332
@user2694332，在<link>标签之前有一个分号，请将其删除。同时将rel属性的值更改为icon（rel="icon"）。代码的其余部分看起来很好，应该可以正常工作。请查看此链接 - https://dev59.com/pmw15IYBdhLWcg3wYawx - Vivek Jain
1
根据我的经验，如果网站没有显示favicon.ico图标，我会分享我的经验。只有将您的网站放在主机上才能显示它，因此请尝试在本地主机上使用XAMPP - http://www.apachefriends.org/en/xampp.html。这就是favicon的显示方式，正如其他人建议的那样，请更改：
rel="shortcut icon"
为
rel="icon"
此外，这样可以使用.png的favicon以提高美观度。
1
<head>
    <link rel="shortcut icon" href="favicon.ico">
</head>
4
欢迎来到 Stack Overflow，请避免仅提供代码的答案，应添加描述您答案的文本。 - A.L
0

建议使用此方法

<link rel="icon" 
  type="image/png" 
  href="/somewhere/myicon.png" />
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接