【全网最全的博客美化系列教程】08.自定义地址栏Logo

自定义地址栏Logo

效果如上图所示~

那么我们如何去自定义地址栏logo呢?

首先,我们得准备一个icon类型的文件~

首先你得准备一张png或者jpg/jepg的图片,这个时候你可能会想要你的博客头像作为图片,你只需要这样子:

然后保存好了图像之后,上传到在线生成icon的网站:https://tool.lu/favicon/

上传成功后点击下载icon图标

进入自己的博客后台管理->文件->选择文件->上传,然后点击已上传的文件,copy这个文件的网络地址

比如这是我的地址:https://files.cnblogs.com/files/ECJTUACM-873284962/favicon.ico

然后再进入自己的博客园->设置,将以下JavaScript代码添加到“页脚Html代码”

<script type="text/javascript" language="javascript">
  //Setting ico for cnblogs
  var linkObject = document.createElement('link');
  linkObject.rel = "shortcut icon";
  linkObject.href = "https://files.cnblogs.com/files/ECJTUACM-873284962/favicon.ico";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

将href种的地址路径替换成你自己的就好了~

保存设置后,刷新页面,就会看到地址栏的图标变了:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端下午茶

Vue 使用中的小技巧

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更...

2782
来自专栏macOS 开发学习

Mac OSX 开发基础控件学习之 NSOutlineView

在开发基于osx的Application的过程中,当我们需要显示一组列表结构的数据时,比较容易想到的控件是NSTableView;但如果你显示的数据有层级结构...

2122
来自专栏CSDN技术头条

前端知识点总结——Vue

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

1312
来自专栏pangguoming

Angular2 -- 生命周期钩子

指令和组件的实例有一个生命周期:新建、更新和销毁。 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的。比如,OnInit接口的钩子方法...

1022
来自专栏zhisheng

使用 CodeMirror 打造属于自己的在线代码编辑器

前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么...

9057
来自专栏木头编程 - moTzxx

微信小程序Ⅲ [页面标题设置]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

9202
来自专栏君赏技术博客

百思不得姐数据挖掘第一篇

这是此文档的第一篇文章,写在之前要说的话。里面设计的技术点可能有些新人不是太了解,我只会说我遇到的难点和思路,文章也是想到那里写到那里。

693
来自专栏大前端_Web

前端路由相关实现

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1032
来自专栏Python疯子

给Mac系统浏览器扩展翻译功能

Google Chrome可以即时翻译网页。可是,如果你用惯了Safari,不想安装Google Chrome,又需要对外文网页即时翻译,那么,请看下面:

9173
来自专栏IT笔记

SpringMvc+Velocity的一些配置总结

前言 公司用了许久的struts2+hibernate,前两年时间SpringMvic+Shiro也有做过,大多都是基于JSP实现的界面展示层,最近一段使用使用...

3697

扫码关注云+社区

领取腾讯云代金券