How to set page icon (logo) in html

In HTML, you can use the link tag to set the page icon; just add the "" code in the head tag of the page That’s it.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Prepare materials

1. Prepare an ico icon of 32px*32px size.

2. Prepare the development environment.

Start making

Setting the ico icon of a web page is actually relatively simple. Just add a line of code to the head tag of the page. <link rel="shortcut icon" href="favicon.ico">, does this line of code look very simple?

Usage examples are as follows:

<!--声明文档内容为html-->
nbsp;html>
<!--设置语言为英文-->


    <!--设置文档默认编码-->
    <meta>
    <!--网页的title-->
    <title>系统首页</title>
    <!--设置ico图标-->
    <link>


<p>Hello World</p>

Refresh the page in the browser. If you see an effect similar to the picture below, congratulations! This wave of operations has been successful.

Description: The

link element can be used to introduce resource files external to the HTML page. During the web development process, developers will use link to introduce CSS files into the page. Of course, they can also use link to set the ico icon.

rel: Indicates the resource type to be referenced.

href: Indicates the URL pointing to the resource.

<link rel="shortcut icon" href="favicon.ico">, rel="shortcut icon" in the code is a fixed writing method . If defaulted, this attribute will affect the correct display of the ico icon. So you must remember to write this attribute. In layman's terms, this line of code tells the browser to help introduce an icon in ico format. The address of the resource is in href.

Recommended tutorial: "html video tutorial"

The above is the detailed content of How to set page icon (logo) in html. For more information, please follow other related articles on the PHP Chinese website!