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设置浏览器小图标的简单教程已完结！如觉得有帮助，可点赞并关注小编，如果有更好的见解，可评论留言！
这是设置后的画面：
扫一扫
1150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
