📌  相关文章
📜  html 页面的 favicon - Html (1)

📅  最后修改于: 2023-12-03 15:31:18.229000             🧑  作者: Mango

HTML 页面的 Favicon

Favicon是指网站的图标，通常显示在浏览器的标签栏和书签栏中。以下是在HTML页面中使用Favicon的方法：

1. 直接在HTML中使用
<head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>

其中，rel="shortcut icon"指定了关系类型，type="image/x-icon"指定了图标类型，href指向了Favicon文件的路径。

2. 通过CSS样式表使用
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css */
html {
  background-image: url("favicon.ico");
  background-repeat: no-repeat;
  background-position: center center;
}

这里将Favicon作为了HTML页面的背景图片，并通过CSS样式表定义了其显示的位置。

3. 使用在线引入
<link rel="icon" href="https://example.com/favicon.ico">

使用在线引入的方式可以减少服务器的带宽使用，但需要确保Favicon文件始终可用，否则可能会导致页面无法完全加载。

以上是在HTML页面中使用Favicon的方法。无论哪种方式都需要保证Favicon文件的格式正确，通常推荐使用.ico格式的文件。