uniapp添加网站favicon文件

Chenliaoyuan 2020-01-19

前言

uniapp 默认创建的项目并没有给我们提供加上网站 favicon 的 ”机会”，但其实官方已经给出解决方法了，使用的是 自定义模板

自定义模板的场景，通常有以下几种情况：

  1. 调整界面 head 中的 meta 配置
  2. 补充 SEO 相关的一些配置「仅首页」
  3. 加入百度统计等第三方js

如上，使用 自定义模板 肯定是满足我们解决添加 favicon 的了，看一下怎么用吧。

1、工程跟项目新建一个 XXX.html 文件，文件名字自己定义，比如 template.html
2、复制基本模板内容到这个html文件，在此基础上修改meta和引入js；
<!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、这 head 中加入我们的 favicon 文件
<link rel="icon" type="image/png" sizes="32x32" href="http://img.sscai.club/favicon1.png”>
4、在 manifest.json -> h5 -> template 节点中关联这个html文件的路径。
uniapp添加网站favicon文件

ok，运行下项目我肯可以看到已经添加好了。

uniapp添加网站favicon文件

综上，关于三种场景的使用方式可以自行扩展了，比如增加百度统计代码 > uniapp增加百度统计代码(h5)

最后

博客地址：https://www.cnblogs.com/niceyoo

求关注??，求推荐??，如果觉得这篇文章有点东西，不妨左上角关注一下我。

Chenliaoyuan

Chenliaoyuan

相关推荐

SpringBoot favicon Chrome设置问题解决

今天学习SpringBoot 设置favicon，使用springboot 2.2.4 版本。浏览器为Chrome,根据文档设置无法实现显示。但是如果更换为Safiri浏览器，可以正确显示，现把Chrome的解决方法写下来。其他资料显示，把favicon.

goodyatou / 0评论 2020-02-16

SpringBoot favicon.ico网站图标

1.在application.properties下添加spring.mvc.favicon.enabled=false默认true开启 2.关闭后，需要在src/main/resources/static目录下放置自己的favicon.ico文件

xiashulin / 0评论 2020-02-03

自用代码css获取任意网址的/favicon.ico的方法教程

onerror 事件会在文档或图像加载过程中发生错误时被触发。

goodyatou / 0评论 2020-02-02

Java web Springboot

　　　　　　3.classpath：/META-INF/resources/ ； classpath：/resources/; classpath:/public/; classpath:/static/; 优先级: resource>static

goodyatou / 0评论 2020-01-29

favicon.ico 请求在各浏览器的机制

直接访问url时favicon.ico请求在各浏览器的实现是不同的。chrome每次访问请求(自动)firefox第一次访问请求(自动)ie不请求

goodyatou / 0评论 2013-05-10

nginx之升级openssl及自定义nginx版本

favicon.ico 文件是浏览器收藏网址时显示的图标，当客户端使用浏览器问页面时，浏览器会自己主动发起请求获取页面的favicon.ico文件，但是当浏览器请求的favicon.ico文件不存在时，服务器会记录404日志，而且浏览器也会显示404报错。

Caleb0 / 0评论 2019-12-22

在线favicon ico图标文件制作工具

所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如Fi

道北吴彦祖 / 0评论 2014-01-12

JS判断浏览器是否支持某一个CSS3属性

css3的出现让浏览器的表现更加的丰富多彩，表现冲击最大的就是动画了，在日常书写动画的时候，很有必要去事先判断浏览器是否支持，尤其是在写CSS3动画库的时候。比如transition的animation-play-state，就只有部分浏览器支持。

Simagle / 0评论 2014-05-31

Koa2 入门教程

里面demo都是自己写的，保证能跑，至於环境问题我就不敢保证了。懒得写就去上面搬走看，懒得搬就直接看文章，大部分代码连输出信息都给你们了。koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa

kobemini / 0评论 2019-11-04

jsp页面左上角的小图标

<link rel=”icon” href=”/favicon.ico” mce_href=”/favicon.ico” type=”image/x-icon”>. 　　因此，在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为F

道北吴彦祖 / 0评论 2014-11-11

修改web项目的ico

进入tomcat服务器\webapps\ROOT，然后用自己项目的favicon.ico替换tomcat自带的favicon.ico图片。如果想让图标出现在收藏夹中，就：<link type="image/favicon.ico"

slytop / 0评论 2016-11-16

大前端

现在把你的网站加入收藏夹再重新打开看看，就是这样简单！如果没有显示,可以在网页的head里加入下面的代码:＜link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&

Donven / 0评论 2019-03-23

vue favicon设置以及动态修改favicon的方法

动态更新之前需要有一个默认的favicon。目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。favicon图片放到该文件夹下。<link rel="shortcut icon" type=&qu

万俟飞技术 / 0评论 2018-12-21

浏览器图标设置

显示在浏览器的图标设置：favicon.ico，当前是哪个页面就展现这个页面设置的图标

wenteryan / 0评论 2017-01-09

Apache下favicon.ico文件找不到

线上查找一个其他的问题，意外发现错误日志里竟是一堆这样的错误。去这个目录下看了下，确实没有这个文件。favorite”里将显示IE浏览器的图标，与此同时“favicon.ico”不存在的信息（404 not. 貌似是每次请求都会去访问这个目录，继续查证，，

Donven / 0评论 2010-12-30

为VUE 脚手架中自定义title标签页小图标

二、 在项目index.html中引入<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />三、

李大仁 / 0评论 2019-07-01

7.工程架构的优化

到这一章节，一个前端项目的工程架构基本已经搭建起来了，但是还有有需要优化的地方。webpack配置重复client端和server端的配置有重复的地方，优化的手段就是将两个文件中重复的配置项提取出来，然后利用webpack-merge包去合并配置。只需要创

kobemini / 0评论 2019-07-01

【项目记录】个人站点by Gatsby

SEO做什么设置document head内容，比如title, favicon, description. 借助Context API实现语言切换。react-i18next提供已封装好的高阶组件gatsby-plugin-i18next做初始化处理方式

ccgsteel / 0评论 2019-06-30

构建多页面应用——单个页面的处理

在看这篇文章之前，需要你对构建多页面应用有一定的基础认识，如果没有的话，可以先参考这篇文章webpack 构建多页面应用。多页面应用是由一个个独立的页面组成。因为所涵盖的知识点较碎，所以就不按照页面的位置结合组成元素来讲，如：head, body, scr

李大仁 / 0评论 2019-06-29

修改web项目的ico

进入tomcat服务器\webapps\ROOT，然后用自己项目的favicon.ico替换tomcat自带的favicon.ico图片目前在tomcat8上面单纯的替换是不生效的，如果你想全局修改掉的话：。如果想让图标出现在收藏夹中，就：<link

道北吴彦祖 / 0评论 2016-11-16

favicon.ico显示，favicon显示，favicon图标显示

例子中是Java项目，使用了绝对路径。<link rel="bookmark" href="favicon.ico"/>rel="bookmark" 表示收藏夹显示图标，效果如下：。没

goodyatou / 0评论 2016-07-19

前端项目目录如何组织

背景最近看了 antd pro 发现其项目的目录结构组织的不错。然后再按照自己的项目经验，对其项目的组织进行修改，现在总结下自己的想法。我个人理解的 model 应该指的是领域对象也就是领域驱动设计中的 domain object，类似于 java bea

zhaoyum / 0评论 2019-06-28

iNotify.js 2 实现浏览器的title闪烁滚动声音提示，弹出通知

JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统弹出通知。它没有依赖，压缩只有只有4.66kb，demo 实例预览。$ npm install title-notify --save使用import N

ccgsteel / 0评论 2019-06-27

express中间层搭建前端项目2

上面一片文章已经介绍怎样创建nodejs服务端服务，这篇将express搭建路由第一章搭建nodejs服务。配置app.js引入相关中间件var express = require;app.set;使用相关中间件// uncomment after pla

kobemini / 0评论 2019-06-27

网站favicon.ico配置

在header中加入icon的请求链接。springmvc资源拦截做出对应配置

johncena / 0评论 2015-09-11

网页小图标Favicon

Favicon是favoritesicon的缩写，亦被称为websiteicon、pageicon或urlicon。Favicon是与某个网站或网页相关联的图标。网站设计者可以多种方式创建这种图标，而目前也有很多网页浏览器支持此功能。浏览器可以将favic

slytop / 0评论 2015-07-24

浏览器选项卡 上 图标设置

<link rel="shortcut icon" type="image/x-icon" href="<%=request.getContextPath()%>/favicon.ico&

slytop / 0评论 2015-06-09

vuejs&electron-vue----朝花夕拾.

————仅以此文记录个人使用vuejs开发项目对一些需求的处理方法,不定期更新...})全局添加sass变量声明npm install -D sass-resources-loader

界之边缘的轮回 / 0评论 2019-06-27

jsp页面左上角的小图标

<link rel=”icon” href=”/favicon.ico” mce_href=”/favicon.ico” type=”image/x-icon”>. 　　因此，在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为F

johncena / 0评论 2014-11-11

修改tomcat项目浏览器显示的图标

部署在tomcat中的项目在运行的时候，地址栏都是那个标志的小猫图标，很多时候我们需要修改这个图标。其实方法很简单，系统读取这个标志的时候先从你的项目的根目录下读看有没有favicon.ico文件，如果有直接显示这个图标，如果没有，则会去webapps/r

midle0 / 0评论 2011-03-01

favicon.ico文件详解

FAVICON.ICO是网站图标文件，浏览网站时显示在地址栏前边的那个图标关于Favicon总是被命名为favicon.ico默认存放在网站web根目录。很多网站都不添加favicon.ico这个文件，其实这个文件很重要，高端大气上档次！这显然是应该予以避

道北吴彦祖 / 0评论 2014-02-24

网站log图片问题：favicon.ico

<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />在自己应用的web.xml或者tomcat的Conf下的web.xml中加入一下代码，然后重起tomcat。

goodyatou / 0评论 2014-02-12

在线favicon ico图标文件制作工具

所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。这从某些角度看仍在网站推广的范畴之内，而欲取得成功，不仅包括良好的页面设计、令人印象深刻的网站Logo，也包括

johncena / 0评论 2014-01-12

网页title左边显示网页的logo图标

方法是：找一个或者作一个ico文件，然后把文件的名字改为favicon.ico，像素大小为16*16，所使用的颜色不得超过16色，然后再把favicon.ico放到网站的根目录下就行了。这样的话浏览器会不停的搜索您的网站的根目录，只要它一发现了名字叫做fa

goodyatou / 0评论 2013-12-05

favicon.ico 请求在各浏览器的机制

直接访问url时favicon.ico请求在各浏览器的实现是不同的chrome每次访问请求(自动)firefox第一次访问请求(自动)ie不请求

slytop / 0评论 2013-05-10

DJANGO中添加favicon

urlpatterns=patterns('',{'template':'robots.txt','mimetype':'text/plain'}),

ICONSYHO / 0评论 2013-03-12

网站默认图标shortcut icon和icon的区别

然而，只有第一行是必须的，因为“shortcuticon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词；而InternetExplorer将会把它作为一个单独的名称。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像时

道北吴彦祖 / 0评论 2013-03-01

HTML5离线存储整理

var bodyParser = require; //解析post请求模块。app.use; //设置静态文件夹。我们设置离线缓存的图片在无网络情况下能够正常从缓存中访问。离线缓存中的坑：清单文件经过修改。清单文件本身必须进行更改。

Bierante / 0评论 2019-06-21

tomcat jsp设置地址栏小图标

制作一个16*16像素大小的favicon.ico格式图片，放在网站根目录下，在页面head部分插入以下代码

slytop / 0评论 2012-08-28

favicon

<link href="http://www.apple.com/favicon.ico" rel="icon" type="image/x-icon">

johncena / 0评论 2012-02-20

网站地址栏收藏栏的图标设置

我们将图标的大小定义为16x16 像素。记得文件名是固定的，要叫做“favicon.ico”。每当有网友要把你的网站“加入收藏”的时候，IE浏览器便会到你的网站根目录去寻找看看有没有favicon.ico这个文件，如果有的话，这个文件就会被用来当作书签上面

johncena / 0评论 2011-12-29

一个生成网站ico的站点和改掉网站ico的方法

1）、在每个页面的<head></head>里加入以下两行代码。2）、在WebRoot下面，也就是网站的根目录下面放一个favicon.ico文件，这个文件必须是标准的ico文件。　有的网站说，这个文件必须叫"favico

ICONSYHO / 0评论 2011-12-20

小图标

<link rel="shortcut icon" href="//i.vanclimg.com/common/favicon/favicon.ico" type="image/x-icon&quo

slytop / 0评论 2011-09-17

修改浏览器图标为自己想要的LOGO

在网站后面加上favicon.ico即可，因为大部分网站他们的浏览器图标都是丢在根目录下的。</head>总结：1、大多数做法都会把favicon.ico发在WebRoot下面。这样页面不需要改动

ICONSYHO / 0评论 2011-08-12

网页地址栏图标的实现

文件扩展名为ico，然后上传到相应目录中。<Link Rel=\"ICON NAME\" href=\"http://图片的地址\">. Favicon，即Favorites Icon的缩写，顾名思义，便

johncena / 0评论 2011-07-18

如何自定义地址栏的图标--favicon.ico

我们自己做的网站，地址栏的图标应该改为自己的，不用Jboss或Tomcat默认图标。

slytop / 0评论 2011-07-11

如何在浏览器地址栏显示自己的.ico图标

设置自己网站的浏览器小图标的好处：可以加深访客对贵站的形象且容易认出你的网站，就跟网站的logo效果一样。这显然是应该予以避免的。至于在浏览器中使用时16×16像素的图片已经足够，为什么还要准备32×32像素的图片，原因在于，正如上文所言，favicon也

道北吴彦祖 / 0评论 2011-05-23

favicon兼容

--FF下可用gif动态icon，-->

johncena / 0评论 2011-04-07

apple-touch-icon,shortcut icon和icon的区别

apple-touch-icon 可以了解到这是一个类似网站favicon的图标文件，用来在iphone和ipod上创建快捷键时使用。这个文件应当是png格式，57x57像素大小，放在网站根目录之下。如果准备的文件不是57x57的话，它会自己缩放的。在页面

道北吴彦祖 / 0评论 2011-03-04