[JavaScript知识库] 【网页图标】favicon.ico文件的设置

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【网页图标】favicon.ico文件的设置 -> 正文阅读

[JavaScript知识库]【网页图标】favicon.ico文件的设置

如何在Vue Cli目录下面设置我们想要的网页图标？
文件目录结构如下：
在这里插入图片描述

第一步：打开你的项目文件地址打开找到public文件夹，粘贴.ico文件进去public文件夹
结果图：
在这里插入图片描述
第二步：在index.html文件里面添加一行代码：

<link rel="shortcut icon" type="image/x-icon" href="./vesync-icon.ico">

在这里写的href是你的.ico文件的相对地址，怕你不明白这行代码添加到哪里，截了个图如下：

<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>