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

Angel_Kitty

发布于 2018-08-01 11:17:34

3470

发布于 2018-08-01 11:17:34

文章被收录于专栏：小樱的经验随笔小樱的经验随笔

自定义地址栏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种的地址路径替换成你自己的就好了~

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