如何将任何图像添加为标题中的图标？

Question

我想在标题中添加图片作为网站图标。图片为 300px，位于 images 文件夹中。我想显示标题旁边的图片。

我试过了但是没有显示：

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

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

Answer 1

如果您添加网站图标。网站图标大小 16x16 或 32x32，然后是此代码块；

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

或

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

Answer 2

尝试为您的页面设置网站图标时，您必须注意以下事项：

您的图片尺寸正确（300px 太大而不能用作网站图标）。
要获得 cross-browser 支持，您需要不同的尺寸和不同的 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 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

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

如何将任何图像添加为标题中的图标？

How to add any image as a icon in title?

html

favicon