当前位置:首页 > 前端 > 正文内容

js动态设置html站点标题图标(ico)

xuwenyan11个月前 (02-22)前端413

我们可以直接在站点根目录直接放一个favicon.ico的ico文件,这样整个站点的默认标题图标就是这个图标了,但有时候我们需要为某个html指定特定的icon图标。(下面演示使用的是WampServer本地服务器)

不放favicon.ico文件时

不放favicon.ico时,站点其实是没有图标的,浏览器通常会显示一个默认的图标。





放favicon.ico文件

当根目录放了favicon.ico时,站点标题图标就会显示我们放置的图标。





用js指定图标

实现代码:

$favicon = document.createElement("link")
$favicon.rel = "icon"
$favicon.href = "1.ico"
document.head.appendChild($favicon)

demo演示:





demo代码:

<html>
  <head>
  </head>

  <body>
    <a>Hello Word!</a>
  </body>

  <script>
    window.onload = function() {
      $favicon = document.createElement("link")
      $favicon.rel = "icon"
      $favicon.href = "1.ico"
      document.head.appendChild($favicon)
    }
  </script>
</html>
    文章作者:xuwenyan
    版权声明:本文为本站原创文章,转载请注明出处,非常感谢,如版权漏申明或您觉得任何有异议的地方欢迎与本站取得联系。

    扫描二维码推送至手机访问。

    版权声明:本文由艺文笔记发布,如需转载请注明出处。

    本文链接:https://www.xuwenyan.com/archives/2691

    分享给朋友:

    “js动态设置html站点标题图标(ico)” 的相关文章

    分享几个 HTML5 非常惊艳的动画 demo

    分享几个 HTML5 非常惊艳的动画 demo

    在知乎上看到别人分享的几个动画demo,个人感觉非常炫酷,于是记录一下。可惜的是作者并没提供动画源代码,只能是观摩一下了!!!demo动画链接如下: FBI作战部署系统 3D粒子旋转 黑客数字雨 百家姓暗号解析 撕衣服 3D元素周期表 时钟特效...

    js统计字符串中汉字、数字、字母、符号个数

    js统计字符串中汉字、数字、字母、符号个数

    如何用js统计字符串中字符个数,所占字节数,包含的汉字个数、数字个数、字母个数、标点符号个数? 首先去掉一些不需要统计的符号 let text = document.getElementById('input').value; // 去掉换行符 text = text.replace(...

    ipad在ios13修改了ipad浏览器的userAgent,导致设备类型判断错误。

    ipad在ios13修改了ipad浏览器的userAgent,导致设备类型判断错误。

    最近发现一个问题,想根据设备的类型来展示不同的主题风格,但根据网上的判断方法添加完代码之后,别的设备都正常,就是在ipad上面判断为了pc设备,让我相当郁闷。经过多出查询资料,最终总结如下: 这个问题是如何导致的? 我们一般是通过浏览器的userAgent来判断设备类型的,但是在ipa...

    javascript实现解析网页(html)

    javascript实现解析网页(html)

    javascript如何实现解析网页(html) demo代码如下: var parser = new DOMParser(); var html_dom = parser.parseFromString(html_content, 'text/html'); var els =...

    什么是跨域访问,如何实现跨域?

    什么是跨域访问,如何实现跨域?

    什么是跨域请求?在 HTML 中,<a>, <form>, <img>, <script>, <iframe>, <link> 等标签以及 Ajax 都可以指向一个资源地址,而所谓的跨域请求就是指:当前发起请求的域与该请求指向的...