如何使页面标题带有图标？

73

我想在标题的图标区域而不是默认的白色文档中显示我网站的徽标。就像堆栈溢出一样。

html icons

— 小克里斯
source

101

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

将此添加到您的HTML Head。当然，文件“ favicon.ico”必须存在。我认为16x16或32x32像素的文件是最好的。

— 尼克拉斯
source

4

对于代码，我认为维基百科具有更好的解释和更好的跨浏览器兼容性。 zh.wikipedia.org/wiki/Favicon

— Andy Li 2009年

谢谢！只是从我的网站上获取了此代码行，由于它有效，所以我认为这不太可能。;-)

— NiklasMM 2009年

谢谢尼克！Kust必须将我的图像转换为ico才能在IE中运行。<link rel =“ shortcut icon” href =“ / Content / images / MyIcon.ico” />

— littlechris

如果在红宝石导轨中使用<link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>">

— Sunil Kumar

21

这是一个有趣的问题，因此请检查一下是否有用作网站图标的图像，然后

将此添加到您的脚本

   <link rel="icon" type="image/gif" href="animated_favicon1.gif" />

否则，如果您的网站图标带有图标，则选择

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

我总是使用http://www.iconspedia.com/获取更多图标

如果我的答案解决了您的问题，那么请给我投票

— 社区
source

8

它们被称为网站图标，并且很容易制作/使用。阅读http://www.favicon.com/以获得帮助。

— 保罗·麦克林
source

8

显然，您可以使用此技巧。

<title>📈 My title</title>

该图标相似实际上是文本。

— 开发者
source

4

您在哪里找到这些？

— 马克斯·罗斯·柯林斯

这种方法存在一个小问题。

— 阿米尔·沙巴尼

7

该接受的答案工作完全正常。我只想提到devXen提供的答案的一个小问题。

如果您像这样设置图标：

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

该图标将按预期工作：

但是，如果按照devXen的建议进行设置，则：

<title>🧐 Amir A. Shabani</title>

页面标题在刷新时移动：

所以我建议<link>改为使用。

— 阿米尔·沙巴尼（Amir A. Shabani）
source

2

根据w3school：

<link rel="icon" href="your_icon"/>

— 盖文·李
source

2

该代码将绝对有效。在评论中，我看到他们使用的ejs syntex不仅适用于所有使用express.js的人员，

<link rel="icon" href="demo_icon.gif" sizes="16x16">
<title> Reddit</title>

您还可以添加png和jpg

— 夏恩博士
source

1

如果在红宝石导轨中使用，请使用以下代码。

为了计算文件的路径，asset_path函数用于在嵌入其中的rails代码中查找我们正在使用的图像 <%= code %>

<link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>">

— 苏尼尔·库玛（Sunil Kumar）
source

1

如果您想使用URL，则可以使用此代码。

<link rel="shortcut icon" type="image/x-icon" href="https://..." />

— Behdad Setoodegan
source