在标题栏中添加图像

Question

在标题栏中添加图像

52

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

我的标题是“Webnet”

我想将它与FontAwesome字体图标的图像合并，如下所示-

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

然后我尝试用图像源替换它 -

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

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

需要帮助吗？

- Manoz

我认为你想要的是一个Favicon。 - yogi

这个问题是如何将图像放在标题标签中，这与“如何创建网站图标”有些不同，但相当相关。顺便说一下，标题文本支持Unicode字符，因此如果Unicode具有“图像”字形，则可以使用它（例如：雨滴[例如：<title> a raindrop：💧</title>，音符等]），因此您无法控制图像，但可以拥有一个。网站图标是实现此目的的标准方法。 - rogerdpack

这可能不是一个网站图标。请检查一下这个网站，它们在标题栏中有一个笑脸符号：agario.top。 - Giorgi Gvimradze

4个回答

20

请将以下内容添加到你的HTML文件的标签中：

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

- karthick

更容易，因为我不必将任何格式转换为.ico。 - RobbyReindeer

18

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

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

或者您可以在您的Web服务器中更新此项。建议将其添加到您的Web服务器中，因为您不需要在每个HTML页面中都添加它（假设没有includes）。

要在apache中添加，请将favicon.ico放置在您的根网站目录中，并在httpd.conf中添加此内容。

AddType image/x-icon .ico

- nandu

12

您需要在页面中使用一个网站图标(favicon)。将以下内容放置在标签内：<link rel="shortcut icon" href="/favicon.png" type="image/png">其中favicon.png最好是一个16x16像素的png图片。

来源: Adding a favicon to a static HTML page

- errieman

我知道这已经过时了，但是非常有帮助！谢谢。 - user2945651

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samuel MacLachlan · Accepted Answer

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

或者，您可以将图标保存在任何您想要的地方，并将其命名为任何名称，但只需将以下代码插入 HTML 的 <head> 部分并引用您的图标即可：

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

您可以使用Photoshop（带插件）或GIMP（免费）创建.ico文件，或者您可以使用IcoFX，这是我个人最喜欢的工具，因为它非常易于使用且功能强大（您可以从download.com免费获取旧版本软件）。 更新1： 您还可以使用许多在线工具创建favicon，例如ConvertIcon，我已经成功使用了它。现在也有其他免费在线工具可用，可以通过简单的谷歌搜索找到，但还可以生成其他图标，如Windows 8/10开始菜单图标和iOS应用程序图标。 更新2： 您还可以使用.png图像作为图标只要IE11是您需要支持的唯一版本。您只需要使用上面的HTML代码引用它们即可。请注意，IE10及更早版本仍需要.ico文件。

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