How to set the webpage icon we want under the Vue Cli directory?
The file directory structure is as follows:
Step 1: Open your project file address and open it to find the public folder, paste the .ico file into the public folder
Results:
Step 2: Add a line of code in the index.html file:
<link rel="shortcut icon" type="image/x-icon" href="./vesync-icon.ico">
The href written here is the relative address of your .ico file. I’m afraid you don’t understand where this line of code is added. Here’s a screenshot:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="./vesync-icon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
At this point, save and start the Vue project again, just visit