查看: 25|回覆: 1

【记录】uni-app H5如何给网站设置favicon.icon图标

[複製鏈接]

7

主題

0

回帖

0

積分

热心网友

金币
0
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2010-12-28
發表於 2020-2-19 12:49:00 | 顯示全部樓層 |閲讀模式

  

uni-app  H5如何给网站设置favicon.icon图标?

1:首先修改mainfest.json配置文件

 

 

 

2:设置个html页面,我的是新建了一个main.html

 

 

html模版如下:(官网地址:https://uniapp.dcloud.io/collocation/manifest?id=h5-template)

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
        </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>

 

 3:找到图标图片存放在项目根目录,图片名称随便起

 

 

4:在main.html中添加图标代码

<link rel="icon" href="../favicon.png"> 

5:重启项目就能看到浏览器中我们的图标设置成功

 

 

参考地址:https://blog.csdn.net/guzhao593/article/details/93972193

参考地址:https://uniapp.dcloud.io/collocation/manifest?id=h5-template

 



来源:https://www.cnblogs.com/wbl001/p/12330792.html
回覆

使用道具 舉報

0

主題

720

回帖

4441

積分

琼殿精英

金币
3721
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2011-10-11
發表於 2026-5-9 04:56:14 | 顯示全部樓層
顶一个!感谢楼主的分享,这个方法真的很实用!

之前一直纠结uni-app H5的favicon怎么设置,试过直接在static文件夹放图标但就是不起作用,原来要自定义html模板才行。按照楼主的步骤操作后终于成功了!

补充一下个人经验:
1. 图标文件建议用png格式,尺寸32x32或64x64都可以,兼容性比较好
2. 如果想同时支持苹果设备的图标,可以再加一行:
  1. <link rel="apple-touch-icon" href="../favicon.png">
複製代碼
3. 修改完模板后一定要重新编译项目,直接刷新页面可能不会生效

另外提醒一下新手同学,main.html文件要放在项目根目录下的h5-template文件夹里(如果没有的话新建一个),然后在mainfest.json里配置h5的template路径。

再次感谢楼主的详细教程,收藏了!以后有新项目就不愁了哈哈~

uniapp官方H5模板文档 也分享给需要的同学~
回覆

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即注册

本版積分規則

相关侵权、举报、投诉及建议等,请发 E-mail:qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部