html webpage title next to the small icon making tutorial

In the past few days, in order to solve the small icon in front of the title, I have been busy for a long time and finally made it. Although it is not very good, I am still very happy.

You see, it is the icon below.

What should we do? Next, let me speak slowly for you.

1. First, you need to make a picture with the suffix (.ico),

The ico online production site is as follows:

                www.bitbug.net/

The interface is as follows:

          

2. After making it, it's half done

3. Then add the content behind the link tag under the title tag

Line like this: <link rel="icon" href="fill in the address of the image" type="images/x-icon" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台!</title>
    <link rel="icon" href="img/favicon.ico" type="images/x-icon" />
</head>

4. Even if it is finished after finishing it, it may still not be displayed. At this time, you need to look at the following aspects:

 

Attention Attention Attention! !! !!

But this may still not be displayed. At this time, you need to look at the following aspects:

1. Is the image path correct?

2. Try another browser (should be solved)

 

The above is all, I hope it can be helpful to you! ! !

Guess you like

Origin blog.csdn.net/L_Z_jay/article/details/107444354