📄HTML Favicon
2024-8-9
| 2024-8-9
686  |  阅读时长 2 分钟
type
status
date
slug
summary
tags
category
icon
password
Tip: A favicon is a small image, so it should be a simple image with high contrast.
A favicon image is displayed to the left of the page title in the browser tab, like this:
notion image
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
Next, add a <link> element to your "index.html" file, after the <title> element, like this:

Example

 
Now, save the "index.html" file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.
 

Please explain the maening of this code: <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
 
This HTML code snippet is used to specify a favicon for a website. Here’s a breakdown of each part:
  • <link>: This HTML element is used to link to external resources, like stylesheets or icons.
  • rel="icon": This attribute specifies the relationship between the current document and the linked resource. In this case, "icon" indicates that the linked resource is a favicon.
  • type="image/x-icon": This attribute specifies the MIME type of the linked resource. "image/x-icon" is a common MIME type for favicon files, which are typically in .ico format.
  • href="/images/favicon.ico": This attribute provides the path to the favicon file. The path "/images/favicon.ico" points to the favicon file located in the "images" directory at the root of the website.
In summary, this code tells the browser to use the specified .ico file as the favicon for the website.
 
这段 HTML 代码的作用是为网页指定一个网站图标(favicon)。下面是每个部分的解释:
  • <link>:这个 HTML 元素用于链接外部资源,比如样式表或图标。
  • rel="icon":这个属性指定当前文档与链接资源之间的关系。在这里,“icon”表示链接的资源是一个网站图标。
  • type="image/x-icon":这个属性指定链接资源的 MIME 类型。这里的 "image/x-icon" 是 favicon 文件的常见 MIME 类型,通常用于 .ico 格式的图标文件。
  • href="/images/favicon.ico":这个属性提供了 favicon 文件的路径。路径 "/images/favicon.ico" 指向位于网站根目录下 "images" 文件夹中的 favicon 文件。
总结来说,这段代码告诉浏览器使用指定的 .ico 文件作为网站的 favicon。
 

拓展:MIME 类型

(Multipurpose Internet Mail Extensions 类型)
用于描述互联网中传输的数据的性质和格式。它是一个标准,用于告诉接收方(如浏览器或邮件客户端)如何处理接收到的数据。MIME 类型由两个部分组成:
  1. 主类型(Primary Type):描述数据的大类,比如 "text"(文本)、"image"(图像)、"audio"(音频)、"video"(视频)等。
  1. 子类型(Sub-Type):描述主类型下的数据具体类型,比如 "plain"(普通文本)、"html"(HTML 文本)、"jpeg"(JPEG 图像)、"png"(PNG 图像)等。
例如,text/html 表示 HTML 文本,image/png 表示 PNG 图像。MIME 类型帮助浏览器或其他客户端正确处理和展示不同类型的数据。
  • 建站
  • 如何摆脱原生家庭的负面影响A CHILD’S HISTORY OF THE WORLD
    目录