Vue设置浏览器小图标

当我们使用浏览器做开发时，我们能希望浏览器标签页能显示自己的logo小图标，这个是怎样设置的呢？

第一步：准备logo图片信息

找到自己的logo，通过图片在线转换格式，转换成32*32的ico为后缀的图片格式（推荐网站：图片在线转换工具（aconvert））
如下：
图片转换

第二步：拷贝ico图片到项目中

将转换后的ico格式的文件拷贝的vue项目的static目录下
在这里插入图片描述

第三步：添加图片链接到index.html中

找到vue项目根目录下的index.html文件，在head标签里添加如下内容，其中favicon.ico是的拷贝过来的图片名称：

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

也可以在head里设置浏览器小图标右侧的标题信息
使用<title></title>标签设置辩题信息
注意： 这种添加标题的方式，仅适用于静态标题！

附完整的index.html信息，仅供参考：

<!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/favicon.ico">
    <title>Activiti</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

到此，Vue设置浏览器小图标的简单教程已完结！如觉得有帮助，可点赞并关注小编，如果有更好的见解，可评论留言！

这是设置后的画面：

完结展示

# vue.js # 前端 # javascript
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB Ustore存储引擎解读

avatar 华为开发者空间

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。

avatar 华为开发者空间
cover

华为云HCSD校园沙龙走进东北大学软件学院

avatar 华为开发者空间