Question

我正在尝试进行一项非常简单的初步练习，以建立一个创建图标的网站。

这是我正在使用的代码：

<!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文件相同的级别上（在子目录中）。

非常感谢

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

Answer 2

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

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

Answer 3

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

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

这几乎适用于所有没有<link>标记的浏览器。但是，仅当它是*.ico文件时才有效。 PNG和其他格式仍需与<link>代码

相关联

Answer 4

您可以查看w3 how to，我认为您会发现它很有用

您的链接标记属性应为rel="icon"

Answer 5

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

Answer 6

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

rel="shortcut icon"

要
rel="icon"

这种方式.png favicons也可用于光滑。

Answer 7

以下给出了一些有关收藏夹图标的信息

什么是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”或Type =“ image / ico” ：曾经期望精确的ico图像，甚至期望了任何以.jpg或.pn ..etc格式格式化的图像

我们必须对通用页面使用上述两个标签，例如– Master page，正在所有页面中使用的Mainframe

Answer 8

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

<!-- 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"/>

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

Answer 9

建议使用此方法

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

Answer 10

Try put this in the head of the document: <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

Answer 11

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

如何设置图标？

11 个答案: