uniapp修改H5页面浏览器标签栏小图标

原创

已于 2022-04-15 11:59:18 修改 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-15 11:48:31 首次发布

本文介绍了在uniapp中如何修改H5页面浏览器标签栏的图标。关键步骤包括编辑根目录的index.html文件，在head部分添加相应代码，并确保manifest.json文件中配置正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
uniapp如何修改上图浏览器的标题栏的图标。
找到根目录的index.html文件，然后在head标签离添加以下两行代码

<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />//必须的，要不然不生效
<link rel="icon" href="./static/logo1.png"/>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

little little little

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp之H5网站添加图标favicon浏览器标签栏小图标

我心坚持

01-13

3263

、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、 favicon图标可以是PNG、JPG、ico格式的，大部分网站兼容ico格式的。图标大小一般是：16x16 32x32 一、先新建一个HTML文件，名字随意起，例如templateH5.html。进入官网，复制官网的基本模板所有内容到templateH5.html：https://uniapp.dcloud.io/collocation/manifest?id=h5-template 二、在uniapp中找到manifest.jso

UniApp组件与微信小程序组件对照学习

最新发布

行思理的博客

09-26

2357

UniApp只是一个第三方的开发工具，借鉴各种平台的能力，UniApp的组件也借鉴了微信小程序的组件，我们学习时，可以进行对照学习，我们在用UniApp开发微信小程序时，UniApp也只是将代码转成了微信小程序的代码，还是需要了解微信小程序开发，才能开发出微信小程序的。

2 条评论您还未登录，请先登录后发表或查看评论

uniapp自定义H5页面浏览器标签栏小图标

华小灼

02-20

6473

在web页面经常能看到下图的情况，在标签栏中并不是显示的默认的图标，在html和Vue中能很方便的自定义，但是在uniapp中会相对的麻烦 1. 在项目根目录下创建一个html文件这个html文件，将会作为模板引入到H5配置中，并且这个模板也是有要求的，可以参考官方文档(传送门) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-

uniapp修改浏览器图标和名称

m0_74170441的博客

01-27

2691

然后再在html文件里面添加我们所需要的图标路径和写上我们的名称。我们在manifest.json这里写上我们的html路径。另外这个模版在uniapp官网可以复制拿下来就行可以了。首先我们在uniapp项目根目录上新建一个html文件。然后再html里面写上我们的基本模板内容。然后我们重新运行一下h5 就可以生效了。

替换uni-app中H5的默认图标

偷懒的加菲

01-26

3293

https://www.cnblogs.com/wbl001/p/12330792.html https://www.cnblogs.com/niceyoo/p/12215860.html

替换uniapp H5项目在浏览器中的默认图标

D_lunar的博客

07-26

1537

1、在项目根目录下创建一个html文件，取名template.h5.html，如果项目是基于uniCloud admin的，应用根目录下已存在该文件。 2、在文件中添加图标链接。完整的template.h5.html文件内容如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont

uni-app h5修改浏览器导航栏的 title以及icon

热门推荐

Amelian的博客

02-23

1万+

1.title 在pages.json文件中修改:"navigationBarTitleText":"uni-app" 2.icon的修改 2.1 在static中新建一个index.html文件作为模板文件，并且将你的icon图片也放在static文件夹下 2.2 在index.html文件中加入如下代码（记得icon文件就是你放在static文件夹下的图片，我这里举例为logo1.jpg） <!DOCTYPE html> <html lang="...

uniapp 更改浏览器图标

qq_44759522的博客

11-05

2444

uniapp

uniapp-抓娃娃-营销工具

08-11

【标签】"uniapp"是H5、小程序、APP多端开发的统一框架，由DCloud(即海豚浏览器团队)推出。它提供了丰富的组件库和API接口，使得开发者可以用一套代码实现跨平台的应用开发。"抓娃娃"则特指这个游戏功能，通常包含...

给网站添加 favicon的技巧网址前面的小图标

12-13

网站的favicon，全称Favorites Icon，中文常称为“网站头像”，是一个小图标，用于在浏览器的地址栏、书签收藏夹以及标签页中代表特定网站的标识。它增加了网站的辨识度，使得用户在浏览众多网页时能快速识别出自己...

uniapp 给H5网站添加图标favicon.icon

颜良文丑的博客

06-04

6814

给自己网页添加一个小图标

uniapp开发h5，修改原生导航栏，自定义按钮

柑橘乌云_

09-18

1563

关于修改原生导航栏样式的。

【自用整理】Uniapp导航栏&状态栏

weixin_43910903的博客

03-24

5876

导航栏 (1) 全局导航栏样式设置：在pages.json的globalStyle里进行各个参数配置 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Hello uniapp", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "backgroundCol

使用cdn的形式创建vue项目

csdn_chengpeng的博客

01-18

6583

使用cdn的形式创建vue项目一.实例化vue二.引入第三方组件库1.引入elementUI2.使用组件3.效果图三.开发组件1.创建pageA目录，并新建pageA.js2.在index.html中引入该文件3.使用该组件4.效果图四.路由1.引入路由文件2.引入路由组件3.最终效果一.实例化vue 创建index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

uniapp展示在h5端的seo关键词与摘要

weixin_43818835的博客

12-19

5560

首先引入html，并修改h5配置。 html内容为： <!DOCTYPE html> <html lang="zh-CN"> <head> <title>好故事</title> <meta name="keywords" content="" /> <meta ...

uni-app中添加meta标签

ljqzxw的博客

06-29

7302

uni-app中添加meta标签 uni-app不像vue项目提供一个index.html作为主页，而是直接用app.vue作为主页，想要向里边添加meta标签的话需要自己手动创建一个index.html文件，然后在manifest.json中配置html模板路径，官网文档中提供了模板文件的案例(https://uniapp.dcloud.io/collocation/manifest?id=h5-template)，直接复制就可以。用的时候需要注意，不要手贱删（<link rel="style

uni-app——动态修改页面标题

qq_43201350的博客

05-22

1165

将标题改为‘专辑’ uni.setNavigationBarTitle({ title: "专辑" });

uniapp—H5和App坑

qq_33475629的博客

02-28

1006

1、uni-notice-bar在App端不滚动显示解决：setAnimation方法下面添加app端的判断： //#ifdef APP-PLUS setTimeout(() => { uni.createSelectorQuery().in(this).select(`#${this.elId}`).boundingClientRect().exec((ret) => { this.animation = `notice ${ret[0].width / this.speed}s l