【记录】uni-app H5如何给网站设置favicon.icon图标
<p> </p><p><span style="font-size: 14pt">uni-app H5如何给网站设置favicon.icon图标？</span></p>
<p>1：首先修改mainfest.json配置文件</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1697935/202002/1697935-20200219124027736-597760803.png" alt=""></p>
<p> </p>
<p> </p>
<p> </p>
<p>2：设置个html页面，我的是新建了一个main.html</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1697935/202002/1697935-20200219124220827-1817310809.png" alt=""></p>
<p> </p>
<p> </p>
<p>html模版如下：（官网地址：https://uniapp.dcloud.io/collocation/manifest?id=h5-template）</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html </span><span style="color: rgba(255, 0, 0, 1)">lang</span><span style="color: rgba(0, 0, 255, 1)">="zh-CN"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">http-equiv</span><span style="color: rgba(0, 0, 255, 1)">="X-UA-Compatible"</span><span style="color: rgba(255, 0, 0, 1)"> content</span><span style="color: rgba(0, 0, 255, 1)">="IE=edge"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="viewport"</span><span style="color: rgba(255, 0, 0, 1)"> content</span><span style="color: rgba(0, 0, 255, 1)">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> htmlWebpackPlugin.options.title </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
document.addEventListener(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">DOMContentLoaded</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">, </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">() {
document.documentElement.style.fontSize </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.documentElement.clientWidth </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">/</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">20</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
})
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">link </span><span style="color: rgba(255, 0, 0, 1)">rel</span><span style="color: rgba(0, 0, 255, 1)">="stylesheet"</span><span style="color: rgba(255, 0, 0, 1)"> href</span><span style="color: rgba(0, 0, 255, 1)">="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">noscript</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">strong</span><span style="color: rgba(0, 0, 255, 1)">></span>Please enable JavaScript to continue.<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">strong</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">noscript</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="app"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)"> built files will be auto injected </span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<p> 3：找到图标图片存放在项目根目录，图片名称随便起</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1697935/202002/1697935-20200219124544987-1153551102.png" alt=""></p>
<p> </p>
<p> </p>
<p>4：在main.html中添加图标代码</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">link </span><span style="color: rgba(255, 0, 0, 1)">rel</span><span style="color: rgba(0, 0, 255, 1)">="icon"</span><span style="color: rgba(255, 0, 0, 1)"> href</span><span style="color: rgba(0, 0, 255, 1)">="../favicon.png"</span><span style="color: rgba(0, 0, 255, 1)">></span> </pre>
</div>
<p>5：重启项目就能看到浏览器中我们的图标设置成功</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1697935/202002/1697935-20200219124743079-1709995512.png" alt=""></p>
<p> </p>
<p> </p>
<p>参考地址：https://blog.csdn.net/guzhao593/article/details/93972193</p>
<p>参考地址：https://uniapp.dcloud.io/collocation/manifest?id=h5-template</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/wbl001/p/12330792.html 顶一个！感谢楼主的分享，这个方法真的很实用！
之前一直纠结uni-app H5的favicon怎么设置，试过直接在static文件夹放图标但就是不起作用，原来要自定义html模板才行。按照楼主的步骤操作后终于成功了！
补充一下个人经验：
1. 图标文件建议用png格式，尺寸32x32或64x64都可以，兼容性比较好
2. 如果想同时支持苹果设备的图标，可以再加一行：
<link rel="apple-touch-icon" href="../favicon.png">
3. 修改完模板后一定要重新编译项目，直接刷新页面可能不会生效
另外提醒一下新手同学，main.html文件要放在项目根目录下的h5-template文件夹里（如果没有的话新建一个），然后在mainfest.json里配置h5的template路径。
再次感谢楼主的详细教程，收藏了！以后有新项目就不愁了哈哈～
uniapp官方H5模板文档 也分享给需要的同学~
頁:
[1]