Vue设置浏览器小图标(ICON)

Vue设置浏览器小图标

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

第一步:准备logo图片信息

找到自己的logo,通过图片在线转换格式,转换成32*32的ico为后缀的图片格式(推荐网站:) 如下:

第二步:拷贝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>
这是设置后的画面:
经验分享 程序员 微信小程序 职场和发展