79

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

这是我正在使用的代码：

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

非常感谢

4

12 回答 12

76

随着 (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">
于 2014-11-05T22:15:12.357 回答
51

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

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
于 2015-03-28T21:52:18.787 回答
10

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

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

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

于 2015-01-06T19:23:02.650 回答
6

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

什么是收藏夹图标？  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 ..等格式。

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

于 2019-02-22T11:24:47.327 回答
5

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

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

于 2013-08-18T17:30:22.797 回答
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

于 2013-08-18T17:32:14.750 回答
1

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

rel="shortcut icon"

至
rel="icon"

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

于 2013-08-18T18:36:58.817 回答
1 
<head>
    <link rel="shortcut icon" href="favicon.ico">
</head>
于 2014-05-08T19:58:42.757 回答
0

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

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

于 2014-10-07T13:02:15.790 回答
0

尝试将其放在文档的开头： <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

于 2017-12-18T05:31:38.120 回答
0

推荐这种方法

<link rel="icon" 
  type="image/png" 
  href="/somewhere/myicon.png" />
于 2016-04-01T09:34:56.457 回答
0

我使用这个https://realfavicongenerator.net/来生成所有可能的网站图标场景，它是免费的。

于 2022-02-19T07:33:31.920 回答