UniappカスタムH5ページブラウザタブバー小さなアイコン

次の画像はWebページでよく見られます。タブバーに表示されるデフォルトのアイコンではありません。htmlやVueで簡単にカスタマイズできますが、uniappでは比較的面倒です。1。
ここに画像の説明を挿入
プロジェクトのルートディレクトリ。次に、htmlファイルを作成します。
このhtmlファイルはH5構成にテンプレートとして導入され、このテンプレートも必要です。公式ドキュメント（ポータル）を参照できます。

<!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.画像をプロジェクトファイルにコピーします。
個人的なアドバイスは、静的フォルダーに配置することです
ここに画像の説明を挿入
。ファイル構造を参照できます
。3.H5テンプレートを構成します。manifest.jsonファイルでindex.htmlテンプレートパスを構成します。独自のインデックスファイルを選択します。4。index.htmlに
ここに画像の説明を挿入
画像
をインポートします。index.htmlのヘッドルートノードで、リンクを使用してアイコンをインポートします。

<link rel="icon" href="./static/logo.png"/>

構成が完了したら、プロジェクトを再起動すると、ブラウザーのタブバーの小さなアイコンが変更されていることがわかります。

UniappカスタムH5ページブラウザタブバー小さなアイコン

おすすめ