50

如何在标题栏中添加图像？

我有标题-“Webnet”

将它与 FontAwesome Glyphicon 的图标图像合并为-

<title><i class="icon-user icon-black"></i>Webnet</title>

我尝试用图像源替换它-

<title><img src="assests/img/user-Hermosillo.png" ></img>Webnet</title>

但标题显示 innerHTML 而不是在那里显示图像。

有什么帮助吗？

4

4 回答 4

86

这种方法行不通。<title>唯一支持纯文本。您将需要创建一个.ico文件名为 的图像favicon.ico并将其保存到您网站的根文件夹（您的默认页面所在的位置）。

或者，您可以将图标保存在您希望的任何位置，并随意调用它，但只需将以下代码插入<head>HTML 部分并引用您的图标：

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

您可以使用 Photoshop（带有插件）或 GIMP（免费）来创建.ico文件，或者您可以只使用IcoFX，这是我个人最喜欢的，因为它非常易于使用并且做得很好（您可以使用旧的从download.com免费下载该软件的版本）。

更新 1： 您还可以使用许多在线工具来创建我已经成功使用的ConvertIcon等网站图标。现在还有其他免费的在线工具可用，它们可以做同样的事情（通过简单的谷歌搜索访问），但也会生成其他图标，例如 Windows 8/10 开始菜单图标和 iOS 应用程序图标。

更新 2：您也可以使用.png图像作为图标提供 IE11 是您需要支持的唯一 IE 版本。您只需要使用上面的 HTML 代码引用它们。请注意，IE10 和更早版本仍然需要.ico文件。

更新 3：您现在可以在标题字段中使用表情符号字符。在 Windows 10 上，它通常应该回退并使用 Segoe UI 表情符号字体并很好地显示，但是您需要测试并查看其他系统如何支持和显示您选择的表情符号，因为并非所有设备都可以使用相同的表情符号。

于 2013-04-03T12:20:28.283 回答
19

将此添加到您的 html 的 head 部分

<link rel="icon" type="image/gif/png" href="mouse_select_left.png">
于 2013-04-03T12:13:34.380 回答
18

您应该搜索如何添加favicon.ico. 您可以尝试favicon.ico像这样直接在您的html页面中添加

<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="shortcut icon" type="image/png" href="http://www.example.com/favicon.png" />

或者你可以在你的webserver. 建议添加您的webserver，因为您不需要在每个html页面中添加它（假设没有includes）。

要在您的根网站目录中添加您的位置并将其添加到apachehttpd.conffavicon.ico

AddType image/x-icon .ico
于 2013-04-03T12:13:35.487 回答
12

您必须为您的页面使用网站图标。把它放在头标签中： <link rel="shortcut icon" href="/favicon.png" type="image/png">

其中 favicon.png 最好是 16x16 png 图像。

来源：将网站图标添加到静态 HTML 页面

于 2013-04-03T12:11:43.243 回答