The following picture can often be seen on the web page. It is not the default icon displayed in the tab bar. It can be easily customized in html and Vue, but it will be relatively troublesome in uniapp
1. In the project root directory Next, create an html file.
This html file will be introduced as a template into the H5 configuration, and this template is also required, you can refer to the official document ( Portal )
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- Open Graph data -->
<!-- <meta property="og:title" content="Title Here" /> -->
<!-- <meta property="og:url" content="http://www.example.com/" /> -->
<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
<!-- <meta property="og:description" content="Description Here" /> -->
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports(
'top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2. Copy the picture to the project file.
Personal advice is to put it in the static folder. You can refer to my file structure
. 3. Configure the H5 template
. Configure the index.html template path in the manifest.json file and select your own index file
4. Import pictures
in index.html In the head root node of index.html, use link to import icons
<link rel="icon" href="./static/logo.png"/>
After the configuration is complete, restart the project and you can see that the small icon in the browser tab bar has been changed