如何设置图标？
我正在尝试做一个非常简单的初步练习来建立一个创建图标的网站.
这是我正在使用的代码:
<!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文件相同的级别上(在子目录中).
非常感谢
Clé*_*ent 54
随着(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">
- @guettli好吧...您是否有资料来证明这一点，还是需要做一些实验？这不是因为*看起来很复杂*不是这样做的正确方法，或者是吗？您有什么解决方案？ (3认同)
- @盖特利？我的回答的第一句话解释了为什么需要更多。“随着 (i|android|windows) 手机的推出，情况发生了变化，要获得适用于任何设备的正确和完整的解决方案真的很耗时。” 一行带有一个 `.ico` 文件的行并不适用于所有设备。参见 https://github.com/audreyr/favicon-cheat-sheet ，我在回答中也提到了。 (3认同)
- 你是对的。如果要支持所有设备，那么一根线是不够的。 (2认同)
Sch*_*zer 37
我在我的网站上使用它,效果很好.
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
- 你敢打赌它! (3认同)
有一种非常简单的方法来设置一个已经存在很长时间AFAIK的图标.将favicon.ico文件放在默认位置.即
http://www.yoursite.com/favicon.ico
这适用于几乎所有没有<link>标签的浏览器.但是,仅当它是*.ico文件时才有效.PNG和其他格式仍然必须与<link>标签链接
- 仅供参考-W3C认为这种方法“与Web体系结构的某些原理不一致”，因此不鼓励使用此方法。https://www.w3.org/2005/10/howto-favicon (2认同)
下面给出了一些关于 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 ..etc 格式化。
? 我们必须将上面两个标签用于公共页面，例如 – Master page ，在所有页面中都使用的 Main frame