(Vue.js) The icon does not apply

<link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
<link rel="mask-icon" href="./icons/safari-pinned-tab.svg">

I added this code. But the icon does not apply.

The file structure is
test
　└icons
　　└safari-pinned-tab.svg
　　└favicon-16x16.png
　　└favicon-32x32.png
　　└apple-touch-icon.png
　└index.html

Solution

Try this.

<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" href="icons/apple-touch-icon.png" type="image/x-icon">
    <link rel="icon" type="image/png" sizes="32x32" href="icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/apple-touch-icon.png">


  </head>
  <body>
    <!-- DO NOT touch the -->
  </body>

</html>