Vue项目更改图标

Vue新建项目后会有默认图标(如下图左上角)

在这里插入图片描述

方法一

替换图标图片
找到public文件下的favicon.ico

在这里插入图片描述

把自己的图标替换掉favicon.ico

在这里插入图片描述

修改成功

在这里插入图片描述

方法二

更换图标路径
找到public文件,把要加的图标放入

在这里插入图片描述

打开index.html,修改图中路径为,指定你要显示的图标

在这里插入图片描述在这里插入图片描述

修改成功

在这里插入图片描述

步骤总结

  1. 在Vue项目的根目录中,找到 public 文件夹。

  2. 在 public 文件夹中,你会找到一个名为 favicon.ico 的文件。这是项目的图标文件。

  3. 使用任何合适的图标编辑工具(如Adobe Photoshop、Sketch等),创建一个新的图标或修改现有的图标。

  4. 将你的新图标保存为 favicon.ico 格式,并确保其尺寸符合图标文件的要求。通常情况下,图标的尺寸为 16x16 像素和 32x32 像素。

  5. 将你的新图标替换掉 public 文件夹中的原始 favicon.ico 文件。确保文件名和格式都正确。

  6. 重新启动你的Vue开发服务器,以使更改生效。你可以使用命令行工具运行 npm run serve 或者其他你习惯的方式。

一旦你完成上述步骤,重新加载你的Vue应用程序,你将看到更改后的项目图标生效了。请确保你遵循版权法和许可协议,使用合法的图标。

Logo

前往低代码交流专区

更多推荐