Question

我想在标题中添加图像作为图标。图像为300像素，位于图像文件夹中。我想在标题旁边显示图像。

我试图这样做，但它没有显示出来：

<head>
<title>My title</title>
<link rel="shortcut" href="./images/logo">
</head>

除了我的标题之外，它不显示任何徽标如何添加带有我的标题的徽标。

Answer 1

尝试在网页上设置图标时，您需要注意以下事项：

您的图片尺寸正确（300px太大而无法用作图标）。
要实现跨浏览器支持，您需要使用不同大小和不同的link标记。

通常，一个180x180，一个32x32和一个16x16就可以覆盖所有浏览器和设备。

<强>代码：

<link rel = "apple-touch-icon" sizes = "180x180" href = "images/logo180x180.png">
<link rel = "icon" type = "image/png" sizes = "32x32" href = "images/logo32x32.png">
<link rel = "icon" type = "image/png" sizes = "16x16" href = "images/logo16x16.png">
<link rel = "mask-icon" href = "images/logo.png">
<link rel = "shortcut icon" href = "images/logo.png">

正确路径：

除了上述内容之外，您似乎也使用了不正确的路径，这就是为什么它根本不起作用的原因。根据您的说法，您的结构如下：

/
- docs
   - index.html
- images
   - logo.png

对于上述结构，您在html文件中使用的正确相对路径是../images/logo.png。

Answer 2

如果您添加favicon您的网站。 favicon size 16x16或32x32然后，这个代码块;

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

OR

https://www.favicon-generator.org/

Answer 3

尝试这个

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

Answer 4

您必须使图像具有响应能力。 300像素的图片很大。您必须将图像转换为不同的屏幕尺寸才能响应。因此，请使用在线工具将图像转换为不同的屏幕尺寸，通常范围在16到180之间。制作网站时，您需要考虑要托管的资源。对于标签图片，请务必保留图片，因为您还需要同时考虑其他资源

如何在标题中添加任何图像作为图标？

4 个答案: