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

原创 已于 2022-04-15 11:59:18 修改 · 3.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

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

在这里插入图片描述
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"/>//图标的路径

在这里插入图片描述manifest.json文件h5配置中index.html模板路径配置为index.html
在
在这里插入图片描述

效果图如下：
在这里插入图片描述

替换uniapp H5项目在浏览器中的默认图标
D_lunar的博客
07-26 1585
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
uniapp 给H5网站添加图标favicon.icon
颜良文丑的博客
06-04 7409
给自己网页添加一个小图标
uniapp之H5网站添加图标favicon浏览器标签栏小图标
我心坚持
01-13 3579
、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、 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项目打包H5在浏览器标签显示favicon.ico图标
最新发布
嗨，大家好，我是爱搞知识的咸虾米
10-13 440
通常浏览网站，会在网页标签前面都有小图标，使用uniapp打包的web如何显示小图标那？
uniapp H5端显示favicon.ico
sunluyi的博客
11-29 2099
uniapp自定义template.h5.html 下边这个例子来自官网的自定义模板。 在根目录添加template.h5.html文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <lin
uniapp自定义H5页面浏览器标签栏小图标
华小灼
02-20 6800
  在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 3023
然后再在html文件里面添加我们所需要的图标路径和写上我们的名称。我们在manifest.json这里写上我们的html路径。另外这个模版在uniapp官网可以复制拿下来就行可以了。首先我们在uniapp项目根目录上新建一个html文件。然后再html里面写上我们的基本模板内容。然后我们重新运行一下h5 就可以生效了。
uniapp中自定义H5标签图标的方法详解
本文所提及的“uniapp自定义H5标签图标[源码]”正是围绕如何在UniApp项目中为H5平台自定义浏览器标签栏的小图标而展开的技术实践。该知识点涵盖了前端工程化配置、HTML模板定制、静态资源管理以及manifest.json配置...
uniapp-抓娃娃-营销工具
08-11
【标签】"uniapp"是H5、小程序、APP多端开发的统一框架，由DCloud(即海豚浏览器团队)推出。它提供了丰富的组件库和API接口，使得开发者可以用一套代码实现跨平台的应用开发。"抓娃娃"则特指这个游戏功能，通常包含...
替换uni-app中H5的默认图标
偷懒的加菲
01-26 3496
https://www.cnblogs.com/wbl001/p/12330792.html https://www.cnblogs.com/niceyoo/p/12215860.html
uniapp 更改浏览器图标
qq_44759522的博客
11-05 2567
uniapp
uni-app h5修改浏览器导航栏的 title以及icon
2301_79491526的博客
01-14 1047
在pages.json文件中修改:"navigationBarTitleText":"uni-app"
uniapp如何创建h5网站角标
weixin_44754312的博客
07-04 775
<link rel="icon" type="image/x-icon" href="favicon.ico">
uni-app运行到浏览器跨域H5页面的跨域问题解决方案
Tz
05-26 8018
官方文档对跨域的解决方案推荐： https://ask.dcloud.net.cn/article/35267 更方便的解决方案 项目根目录直接创建一个vue.config.js文件，并在里面配置代理，直接上代码 module.exports = { publicPath: './', devServer: { proxy: { '/api': {...
使用uniapp创建小程序和H5界面
热门推荐
故里2130
02-18 1万+
补充：其中uni-ui是基础组件的补充组件，所以分2部分，其实都是一回事，如果创建的是uni-ui项目模板，那么就可以一起使用，不用引用了，否则，就要单独去引用，和PC页面同理。uniapp的介绍可以看官网，接下来我们使用uniapp创建小程序和H5界面，其他小程序也是可以的，只演示创建这2个，其实都是一套代码，只是生成的方式不一样而已。这里说的UI控件，就是类似于ElementPlus一样，自带的控件是uni开头的，我们也可以叫它原生UI，网站可以查看具体组件的用法，选择如图所示，下面选择Vue3。
uniapp设置模板路径页面样式混乱解决办法
a_靖的博客
06-11 5270
乱了就在html里面加上下面这行代码试试 <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
【自用整理】Uniapp导航栏&状态栏
weixin_43910903的博客
03-24 6125
导航栏 (1) 全局导航栏样式设置： 在pages.json的globalStyle里进行各个参数配置 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Hello uniapp", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "backgroundCol
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值