欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

shortcut icon图标移动端和PC端设置

程序员文章站 2022-04-01 10:42:24
...

之前收到客户的需求,需要在移动端和PC端,使用不同的shortcut icon,很简单的几句代码,记录一下
首先在head里引入小图标

<link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" />

然后在index.html文件里最后面,新增一个script标签,我以最大767px作为分界线,内容如下:

if(window.matchMedia("(max-width: 767px)").matches) {
    var link = document.querySelector("link[rel='shortcut icon']");
    link.href = './static/miniScreen.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
}

下面是效果展示
shortcut icon图标移动端和PC端设置