vue 工程修改浏览器title以及icon

设置Vue项目图标与标题

最新推荐文章于 2025-07-23 13:32:05 发布

原创最新推荐文章于 2025-07-23 13:32:05 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在Vue项目中设置浏览器图标（favicon）及浏览器标签上的标题。通过将图标放置于static文件夹并修改index.html文件，可以轻松实现自定义图标显示。同时，调整<title>标签内容可改变浏览器标签上显示的标题。

Icon:

icon 效果如：

vue 工程中有一个专门放置静态文件的文件夹：static；将静态的图标放到static文件夹下，比如是test.jpg或者test.png都可以。

然后在index.html <head></head>中添加

Title:

光标放到浏览器的icon 上面就会有title toast出来：

直接修改index.html title即可：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	  <link rel="shortcut icon" type="image/x-icon" href="static/paas.jpg">
    <title>PaasLT</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>