Vue.js - 03 修改网站的图标

最新推荐文章于 2025-08-27 15:09:59 发布

原创最新推荐文章于 2025-08-27 15:09:59 发布 · 834 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文档介绍了如何在Ubuntu 22.04 LTS环境下，使用Node.js v16.15.0和NPM v8.5.5，以及VSCode v1.66.2，修改基于Vue.js的网站图标。首先，将新图标存放在项目的public目录下，然后更新public/index.html文件中关于favicon的链接。保存更改并重启项目后，浏览器会显示新的网站图标。

环境

Ubuntu 版本信息：

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 22.04 LTS
Release:	22.04
Codename:	jammy

Node.js 和 NPM 版本信息：

$ node --version
v16.15.0
$ npm --version
8.5.5

VS Code 版本信息：

Version: 1.66.2
Commit: dfd34e8260c270da74b5c2d86d61aee4b6d56977
Date: 2022-04-11T07:49:24.808Z
Electron: 17.2.0
Chromium: 98.0.4758.109
Node.js: 16.13.0
V8: 9.8.177.11-electron.0
OS: Linux x64 5.15.0-27-generic

修改网站的图标

该项目基于：Vue.js - 02 修改网站的标题

原始的图标如下图：

在这里插入图片描述

使用 VS Code 打开项目，将新图标存放在项目的 public 目录下，然后修改 public/index.html 文件中的第 7 行（注意：不同的 Vue CLI 版本创建的项目可能存在差异）：

<!DOCTYPE html>
<html lang="">
  <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 %>favicon32.ico">
    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
    <title>Hello World 20220508</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>